fix: 修复虚拟列表首次滚动底部BUG (Evansy#24)

* fix: 修复首次滚动底部、移除包裹组件

* style: format code

src/components/VirtualList/index.tsx

@@ -61,6 +61,15 @@ export default defineComponent({
       type: Number,
       default: 0,
     },
+    // Item项的Props
+    itemProps: {
+      type: Object,
+    },
+    // 指定用什么名字传递数据
+    dataPropName: {
+      type: String,
+      default: 'source',
+    },
   },
   setup(props, { emit, expose }) {
     const range = ref<Range | null>(null)
@@ -195,7 +204,7 @@ export default defineComponent({
     const getRenderSlots = () => {
       const slots = []
       const { start, end } = range.value! // 解构获取范围的起始、结束索引
-      const { data, dataKey, item } = props
+      const { data, dataKey, item, itemProps, dataPropName } = props
       for (let index = start; index <= end; index++) {
         const dataSource = data[index] as DataSource // 获取当前索引的数据项
         if (dataSource) {
@@ -209,6 +218,8 @@ export default defineComponent({
                 uniqueKey={uniqueKey}
                 source={dataSource}
                 component={item}
+                itemProps={itemProps}
+                dataPropName={dataPropName}
                 onItemResize={onItemResized}
               />,
             )
@@ -255,6 +266,7 @@ export default defineComponent({
       } else if (props.offset) {
         scrollToOffset(props.offset)
       }
+      emit('ok')
     })
 
     onUnmounted(() => {

src/components/VirtualList/item.tsx

@@ -25,6 +25,14 @@ export default defineComponent({
     uniqueKey: {
       type: [String, Number],
     },
+    itemProps: {
+      type: Object,
+      default: () => {},
+    },
+    dataPropName: {
+      type: String,
+      default: 'source',
+    },
   },
   emits: ['itemResize'],
   setup(props, { emit }) {
@@ -66,12 +74,16 @@ export default defineComponent({
     })
 
     return () => {
-      const { component: Comp, index, source, uniqueKey } = props
+      const { component: Comp, index, source, uniqueKey, itemProps, dataPropName } = props
+      const merged = {
+        ...itemProps,
+        [dataPropName]: source, // 数据源给到指定属性上
+      }
       // 渲染出传入自定义组件项-这里的Comp就是传入的自定义组件 (ts-ignore避免类型警告)
       return (
-        <div key={uniqueKey} ref={rootRef}>
+        <div key={uniqueKey} ref={rootRef} {...{ index }}>
           {/* @ts-ignore */}
-          <Comp {...{ source, index }} />
+          <Comp {...merged} />
         </div>
       )
     }

src/views/Home/components/ChatList/index.vue

@@ -4,7 +4,7 @@ import throttle from 'lodash/throttle'
 import { useChatStore } from '@/stores/chat'
 import type { MessageItemType } from '@/services/types'
 import VirtualList from '@/components/VirtualList/index'
-import Item from './item.vue'
+import MsgItem from './MsgItem/index.vue'
 
 const chatStore = useChatStore()
 const virtualListRef = ref()
@@ -22,7 +22,6 @@ onMounted(() => {
     chatStore.chatListToBottomAction = () => {
       goToBottom()
     }
-    goToBottom()
   })
 })
 
@@ -62,12 +61,14 @@ const getKey = (item: MessageItemType) => item.message.id
       v-if="chatStore.chatMessageList?.length"
       ref="virtualListRef"
       class="virtual-list"
+      dataPropName="msg"
       :data="chatStore.chatMessageList"
       :data-key="getKey"
-      :item="Item"
+      :item="MsgItem"
       :size="20"
       @totop="onTotop"
       @scroll="onScroll"
+      @ok="goToBottom"
     />
     <template v-if="!chatStore.isLoading && chatStore.chatMessageList?.length === 0">
       <div class="empty">暂无消息，快来发送第一条消息吧~</div>