vue + vue-loop-scroll

夏木。。。

已于 2025-05-28 16:09:37 修改

阅读量437

点赞数 9

CC 4.0 BY-SA版权

文章标签： vue.js 前端 javascript

于 2025-05-28 15:42:46 首次发布

本文链接：https://blog.csdn.net/w_jiunian/article/details/148285227

大屏实现页面无限滚动功能，找了找插件，找到了vue-loop-scroll，官方文档：Vue Loop Scroll

依赖包

npm i @joyday/vue-loop-scroll

实现：

代码：

<template>
      <ul style="height: 23.4vh;overflow: hidden">
        <LoopScroll
            :dataSource="recordsData"
            itemKey="idx"
            :waitTime="500"
            :pausedOnHover="true"
            :speed="1"
            :loadCount="7"
        >
          <template #default="{ item }">
            <li @click="handleMissStation(item)" style="cursor: pointer">
              <div>{{ item.idx }}</div>
              <div>{{ item.Num }}</div>
            </li>
          </template>
        </LoopScroll>
      </ul>
</template>

<script setup lang="ts">
import { LoopScroll } from "@joyday/vue-loop-scroll";
// onMounted
onMounted(() => {
  getDataList()
  addGridData()
})
/**
 * 获取数据
 */

// 表格数据
let recordsData = ref([]);
let totalNum = ref(999)
async function getDataList() {
  let data = await getAttFindPage(parameter.value);
  totalNum.value = data.data.total
    data.data.records.map((item,index) =>{
      let nt = {...item,idx:0}
      nt.idx = Number((parameter.value.pageNo - 1) * parameter.value.pageSize + (index + 1))
      recordsData.value.push(nt)
    })
}
// 自动填充数据
let MissTimer = ref(0)
const addGridData = () =>{
  MissTimer.value = window.setInterval(() => {
    if(recordsData.value.length < totalNum.value){
      parameter.value.pageNo = parameter.value.pageNo + 1
      getDataList()
    }else{
      window.clearInterval(MissTimer.value)
    }
  }, 5000)
}
onUnmounted(()=>{
  window.clearInterval(MissTimer.value)
})
</script>

注意事项：

在实际项目中使用时，请合理设置 itemKey 和 loadCount，以获得最佳性能和正确的数据更新。

itemKey 是列表数据项的唯一标识字段名。在数据更新时，组件会通过 itemKey 找到对应的项并更新其内容，以确保正确的数据匹配和渲染。
loadCount 控制每次批量加载的数据量，默认值为 1。建议设置为当前可视区域最多能展示的项数，这样可以减少不必要的渲染计算，提升滚动性能，而不是每次仅加载 1 项后再判断是否填满可视区域。

一开始，我没有设置itemKey,更新数据时，页面会出现序号乱跳的情况，突然从36跳到21，重新开始。

又因为，我的表格高度只支持最多7个，因此我的pageSize以及loadCount的值都给的是7

后期又尝试了下，pageSize不必要一定要给表格高度能支持的条数，我给了pageSize以及loadCount值为20，页面滚动也没有问题