vue + nuxt3 vue3-infinite-scroll-better 页面无限滚动加载

前言

最近项目中用到了滚动加载，不想自己封组件，然后找了个库感觉还不错，分享一下，用nuxt的同学可以参考～

第一步 项目中安装 vue3-infinite-scroll-better

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

第二步 新建文件 vue-infinite-scroll.ts

• 项目中 src -> plugins -> 新建文件 vue-infinite-scroll.ts
  用nuxt的同学应该都知道我们引入外部的包需要在这个文件夹下新建一个js或者ts文件,是用来注册插件，nuxt3目录中的所有插件plugins/都是自动注册的，因此不用将它们nuxt.config单独添加到目录中。

import infiniteScroll from 'vue3-infinite-scroll-better'

export default defineNuxtPlugin(nuxtApp => {
 nuxtApp.vueApp.use(infiniteScroll)
})

第三步 在组件中使用

1.html

<div
  v-infinite-scroll="handleInfiniteOnLoad"
  :class="transactionList.length > 5 ? 'bottomCon ' : 'bottomCon bottomConHei'"
  :infinite-scroll-immediate-check="false"
  :infinite-scroll-disabled="scrollDisabled"
  infinite-scroll-watch-disabled="scrollDisabled"
  :infinite-scroll-distance="4"
>
  <div v-for="(item, index) in renderDataList" :key="index" class="item">
    <div class="bottomLeft">
      {{ item.name }}
    </div>
  </div>
  <p v-if="scrollDisabled" style="color: #fff">加载完啦</p>
</div>

2.css

.bottomCon {
  height: 246px;
  overflow: scroll;
}
.bottomConHei {
  height: 100%;
}
.item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  padding-right: 16px;
  .bottomLeft {
    display: flex;
    align-items: center;
    color: @themeColor;
    width: 90%;
    font-size: 12px;
    svg {
      width: 14px;
      height: 14px;
      fill: @themeColor;
      margin-left: 5px;
    }
  }

3.js

setup(props, context) { 
    // 数据列表 
    const renderDataList = ref([ 
        {name:'yy'},
        {name:'yy'},
        {name:'yy'},
        {name:'yy'},
        {name:'yy'},
        {name:'yy'},
        {name:'yy'},
        {name:'yy'},
        {name:'yy'},
        {name:'yy'}
    ]) 
    //最大展示条数 用来结束加载 也可以换成其他的条件
    const listCount = 25 
    //碰底加载
    const handleInfiniteOnLoad = () => { 
        // 异步加载数据等逻辑 
        if (scrollDisabled) { 
            // 数据加载完毕 
        } else { 
            // 加载数据列表 
            const data: any = { 
                list: [
                    { name: 'dd' },
                    { name: 'ff' }, 
                    { name: 'dd' }, 
                    { name: 'ff' }, 
                    { name: 'dd' }, 
                    { name: 'ff' }
                ] 
            }
            renderDataList.value = renderDataList.value.concat(data.list)
        } 
    } 
const scrollDisabled = computed(() => renderDataList.length >= listCount) 
return { scrollDisabled, renderDataList, handleInfiniteOnLoad } }

总结

这样基本就完成啦，api是我直接拿过来的，大家可以搜下这个库找找看，效果还不错，尝试用一下吧～