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

vue3-infinite-scroll-better

关注公众号

@笑果杂谈

介绍

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

演示地址>>>demo

Install

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

API

指令

使用示例

注册指令

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

在组件中使用

<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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

setup(props, context) {
  const renderDataList = [] // 数据列表
  const listCount = 50
  const handleInfiniteOnLoad = () => {
    // 异步加载数据等逻辑
    if (scrollDisabled) {
      // 数据加载完毕
    } else {
      // 加载数据列表
    }
  }
  const scrollDisabled = computed(() => renderDataList.length >= listCount)
  return {
    scrollDisabled,
    renderDataList,
    handleInfiniteOnLoad
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18