From a6b76ef7f39f0d43fb6b42d4a7d62d28e3f1da78 Mon Sep 17 00:00:00 2001 From: xuan <3142316616@qq.com> Date: Thu, 28 Nov 2024 00:54:10 +0800 Subject: [PATCH] =?UTF-8?q?=E8=81=8A=E5=A4=A9=E5=86=85=E5=AE=B9=E8=BF=87?= =?UTF-8?q?=E9=95=BF=E5=88=97=E8=A1=A8=E6=97=A0=E6=B3=95=E6=AD=A3=E5=B8=B8?= =?UTF-8?q?=E4=B8=8B=E6=8B=89=E7=9A=84bug?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/views/chat/ChatList.vue | 71 +++++++++++++++++++++++++++++++++++++ src/views/chat/chat.vue | 60 ++++++++++++++++++++++++++----- 2 files changed, 122 insertions(+), 9 deletions(-) create mode 100644 src/views/chat/ChatList.vue diff --git a/src/views/chat/ChatList.vue b/src/views/chat/ChatList.vue new file mode 100644 index 00000000..a73fc077 --- /dev/null +++ b/src/views/chat/ChatList.vue @@ -0,0 +1,71 @@ +<template> + <div class="container" :style="{height: containerHeight}" @scroll="scroll_event"> + <div class="list" :style="{top: listTop}"> + <slot :show_list="getShowList" :show_height="one_height"></slot> + <div :style="{height: barHeight}"></div> + </div> + </div> + +</template> + + +<script> +export default{ + data(){ + return{ + start : 0, + end : this.shownum, + } + }, + props:{ + shownum: Number, + items: Array, + one_height: Number, + }, + computed:{ + containerHeight(){ + return this.shownum*this.one_height + 'px' + }, + getShowList(){ + console.log(this.items.slice(this.start,this.end)) + return this.items.slice(this.start,this.end) + }, + barHeight(){ + return this.one_height * (this.items.length-this.start-this.shownum+1) + 'px' + }, + listTop(){ + console.log(this.items,this.shownum,this.one_height) + return this.one_height * this.start + 'px' + } + }, + methods:{ + scroll_event(e){ + const top = e.target.scrollTop + this.start = Math.floor(top / this.one_height) + this.end = this.start + this.shownum + + } + } +} + + +</script> +<style scoped> +.container{ + overflow-y: scroll; + align-items: center; + background-color: transparent; + width: 100%; + height: 100%; + scrollbar-color:#F3ABB6 #FFFF; + /* text-align: center; */ + + /* height: 100px; */ +} +.list{ + position: relative; + top: 0; + width: 100%; +} + +</style> \ No newline at end of file diff --git a/src/views/chat/chat.vue b/src/views/chat/chat.vue index 328b6ecf..80f699d5 100644 --- a/src/views/chat/chat.vue +++ b/src/views/chat/chat.vue @@ -10,7 +10,8 @@ <input id="chatSearchInput" type="search" v-model="searchName"> </div> <div class="chat-leftline3"> - <div class="chat-friends" v-for="(item,index) of showSearchList" :key="index" @click="clickFriendList(index)"> + <ChatList :shownum="Number(7)" :items="showSearchList" :one_height="Number(58)" v-slot="a"> + <div class="chat-friends" v-for="(item,index) of a.show_list" :key="index" @click="clickFriendList(item)"> <img id="chatIconImg" :src="item.icon" /> <div class="chat-friend-text"> <p id="chatFriendName">{{ item.name }}</p> @@ -18,12 +19,16 @@ </div> <p id="chatTime">{{ item.chatHistory[item.chatHistory.length - 1].time.split(' ')[1] }}</p> </div> + </ChatList> + </div> </div> <div class="chat-middlelayout"> - <div v-for="(item,index) of getFriendObject.chatHistory" :key="index"> - <ChatCard :your_icon="getFriendObject.icon" :my_icon="userInfo.icon" :name="item.name" :yours="chatWith" :content="historyContentHandle(item.content)"></ChatCard> - </div> + <ChatList v-if="chatWith == '' ? false : true" :shownum="Number(5)" :items="getFriendObject.chatHistory" :one_height="Number(100)" v-slot="a"> + <div v-for="(item,index) of a.show_list" :key="index"> + <ChatCard :your_icon="getFriendObject.icon" :my_icon="userInfo.icon" :name="item.name" :yours="chatWith" :content="historyContentHandle(item.content)"></ChatCard> + </div> + </ChatList> <div class="send-msg"> <img :src="userInfo.icon" alt="" style="width: 40px;height: 40px; border-radius: 50%;"> <input id="send-msg-input" type="search" v-model="sendingMsg"> @@ -77,7 +82,8 @@ // import RecycleScroller from 'vue-virtual-scroller'; import HonneyBtn from './HonneyBtn.vue'; -import ChatCard from './ChatCard.vue' +import ChatCard from './ChatCard.vue'; +import ChatList from './ChatList.vue'; export default { name: 'chatIndex', // 添加组件名称 data(){ @@ -116,6 +122,41 @@ export default { {name:'我',content:'you are',time:'2024-11-24 22:24'}, {name:'小闽',content:'h',time:'2024-11-25 22:11'}, ]}, + {name:'小','icon':'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1, + chatHistory:[ + {name:'我',content:'you are',time:'2024-11-24 22:24'}, + {name:'小',content:'h',time:'2024-11-25 22:11'}, + ]}, + {name:'闽','icon':'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1, + chatHistory:[ + {name:'我',content:'you are',time:'2024-11-24 22:24'}, + {name:'闽',content:'h',time:'2024-11-25 22:11'}, + ]}, + {name:'哈哈','icon':'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1, + chatHistory:[ + {name:'我',content:'you are',time:'2024-11-24 22:24'}, + {name:'哈哈',content:'h',time:'2024-11-25 22:11'}, + ]}, + {name:'kk','icon':'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1, + chatHistory:[ + {name:'我',content:'you are',time:'2024-11-24 22:24'}, + {name:'kk',content:'h',time:'2024-11-25 22:11'}, + ]}, + {name:'44','icon':'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1, + chatHistory:[ + {name:'我',content:'you are',time:'2024-11-24 22:24'}, + {name:'44',content:'h',time:'2024-11-25 22:11'}, + ]}, + {name:'77','icon':'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1, + chatHistory:[ + {name:'我',content:'you are',time:'2024-11-24 22:24'}, + {name:'77',content:'h',time:'2024-11-25 22:11'}, + ]}, + {name:'88','icon':'/icon/UserIcon.png',position:'china',birth:'2003-3-4',concern_status:false,black_status:false,beeing_friends_time: 1, + chatHistory:[ + {name:'我',content:'you are',time:'2024-11-24 22:24'}, + {name:'88',content:'h',time:'2024-11-25 22:11'}, + ]}, ], showSearchList: [], recomendList: [ @@ -132,15 +173,16 @@ export default { components:{ HonneyBtn, // RecycleScroller, - ChatCard + ChatCard, + ChatList }, methods:{ - clickFriendList(index){ - let who = this.friendsInfoList[index].name + clickFriendList(item){ + let who = item.name if(this.chatWith != who){ this.sendingMsg = '' } - this.chatWith = this.friendsInfoList[index].name + this.chatWith = item.name console.log(this.chatWith) },