Vue无限滚动

最新推荐文章于 2024-07-29 11:08:22 发布

w_gold_qin

最新推荐文章于 2024-07-29 11:08:22 发布

阅读量735

点赞数

本文链接：https://blog.csdn.net/w_gold_qin/article/details/108140935

版权

本文介绍了如何在Vue项目中实现无限滚动加载功能，包括安装插件、在main.js中引入、使用插件及其配置，特别强调了回调函数的触发条件和避免无限加载的注意事项。在配置中，回调函数在距离页尾特定距离时触发，当标记为繁忙状态时暂停加载。当与ElementUI的el-tabs组件结合使用时，需注意无限滚动组件的位置设置。

摘要由CSDN通过智能技术生成

1、安装插件

npm install vue-infinite-scroll --save

2、引入插件，在main.js中引入

import infiniteScroll from 'vue-infinite-scroll'
Vue.use(infiniteScroll)

3、使用插件

 <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
    <div v-for="item in data" :key="item.index">{
   {
   item