vue3 无限下拉滚动插件vue3-infinite-scroll-better 使用详解

vue3-infinite-scroll-better

关注公众号

@笑果杂谈

介绍

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

演示地址>>>demo

Install

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	-

使用示例

注册指令

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

在组件中使用

<div
  class="list-lis"
  v-infinite-scroll="handleInfiniteOnLoad"
  :infinite-scroll-immediate-check="false"
  :infinite-scroll-disabled="scrollDisabled"
  infinite-scroll-watch-disabled="scrollDisabled"
  :infinite-scroll-distance="20">
  <ul>
    <li v-for="(item, index) in renderDataList" :key="index">
      <a
        :href="item.url"
        target="_blank"
        rel="noopener"
        >{{index + 1}}、{{item.name}}</a
      >
    </li>
    <div v-if="scrollDisabled">数据加载完毕</div>
  </ul>
</div>

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