2.2.0 • Published 3 years ago

vue3-infinite-scroll-better v2.2.0

Weekly downloads
-
License
MIT
Repository
github
Last release
3 years ago

vue3-infinite-scroll-better

介绍

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

演示地址>>>demo

Install

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

API

参数说明类型默认值版本
infinite-scroll-throttle-delay滚动延迟number200
infinite-scroll-disabled是否禁止booleanfalse
infinite-scroll-distance滚动条距离底部的距离number0
infinite-scroll-immediate-check是否立即触发滚动booleantrue
infinite-scroll-watch-disabledinfinite-scroll-disabled绑定的对应值stringnull

指令

指令名称说明回调参数版本
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
  }
}