vue3无限滚动插件

vue3无限滚动插件

vue3-infinite-scroll-better

支持Vue3的滚动加载插件，所有用法和vue-infinite-scroll一致。并解决了一些bug。

安装

npm install vue3-infinite-scroll-better --save

api

参数	说明	类型	默认值
infinite-scroll-throttle-delay	滚动延迟	number	200
infinite-scroll-disabled	是否禁止	boolean	false
infinite-scroll-distance	滚动条距离底部的距离	number	0
infinite-scroll-immediate-check	是否立即触发滚动	boolean	true
infinite-scroll-watch-disabled	与infinite-scroll-disabled绑定的对应值	string	null

指令

指令名称	说明	回调参数	版本
v-infinite-scroll	指令，执行滚动触发的事件	() => void	-

使用示例

main.ts

import infiniteScroll from 'vue3-infinite-scroll-better'
app.use(infiniteScroll).mount('#app')

组件中使用

 <section
    v-infinite-scroll="handleInfiniteOnLoad"
    :infinite-scroll-immediate-check="false"
    :infinite-scroll-disabled="scrollDisabled"
    infinite-scroll-watch-disabled="scrollDisabled"
    :infinite-scroll-distance="20">
    <div v-for="res in state.resData" :key="res.id" class="blogs">
     <span class="bg-red-100">{{ res.label.name }}</span>
    </div>
    <div v-if="scrollDisabled">数据加载完毕</div>
 </section>

js

const handleInfiniteOnLoad = async () => {
  // 异步加载数据等逻辑
  if (scrollDisabled.value) { //当前读取的数据总数是否大于内容总数
    // 数据加载完毕
  } else {
    // 加载数据列表
    state.pagesize += 8 //每页显示的数量
    await method.GetFy()//读取分页数据 state.resData
  }
}
const scrollDisabled = computed(() => {
  return state.resData.length >= state.count
})

onMounted(async () => {
  await method.GetCount(0, 'null') //state.count 内容总条数
  await method.GetFy() //读取分页数据 state.resData
})