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

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>

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">  
+            <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){
+        clickFriendList(item){
-            let who = this.friendsInfoList[index].name
+            let who = item.name
             if(this.chatWith != who){
                 this.sendingMsg = ''
             }
-            this.chatWith = this.friendsInfoList[index].name
+            this.chatWith = item.name
             console.log(this.chatWith)
 
         },