vue3-infinite-scroll-better

vue3.0-infinite-scroll

介绍

vue3.0无限滚动加载

Install

npm install vue3.0-infinite-scroll --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	-

使用示例

演示地址>>>demo

注册指令

app.use(infiniteScroll).mount('#app')

在组件中使用

<div
  class="poster-list-lis"
  v-infinite-scroll="handleInfiniteOnLoad"
  :infinite-scroll-immediate-check="false"
  :infinite-scroll-disabled="scrollDisabled"
  infinite-scroll-watch-disabled="scrollDisabled"
  :infinite-scroll-distance="20">
</div>

setup(props, context) {
  const renderDataList = [] // 数据列表
  const listCount = 50
  const handleInfiniteOnLoad = () => {
    // 异步加载数据等逻辑
    if (scrollDisabled) {
      // 数据加载完毕
    } else {
      // 加载数据列表
    }
  }
  const scrollDisabled = computed(() => renderDataList.length >= listCount)
  return {
    scrollDisabled,
    handleInfiniteOnLoad
  }
}