pwfnlmjh2
/
frontend
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

聊天内容过长列表无法正常下拉的bug

Browse Source
pull/1/head
xuan 2 months ago
parent 8277a99aae
commit a6b76ef7f3
2 changed files with 122 additions and 9 deletions
Show Stats Download Patch File Download Diff File

71
src/views/chat/ChatList.vue
Unescape View File

@ -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>

60
src/views/chat/chat.vue
Unescape View File

@ -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)
},

Write Preview
Loading…
Cancel
Save