DDR爱好者之家

使用vue-infinite-scroll实现无限滚动效果
站长资源 2024/4/26 佚名
32 1538
DDR爱好者之家 Design By 杰米

vue-infinite-scroll插件可以无限滚动实现加载更多，其作用是是当滚动条滚动到距离底部的指定高度时触发某个方法。

https://github.com/ElemeFE/vue-infinite-scroll/

https://www.npmjs.com/package/vue-infinite-scroll

npm i vue-infinite-scroll --save

main.js使用

import vueiInfinite from 'vue-infinite-scroll'
Vue.use(vueiInfinite)
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" infinite-scroll-distance="10">
   <div class="loading">加载中...</div>
</div>

1.loadMore是方法，里面是要执行的代码

2.busy的值是true的时候，就不再加载，如果是false就执行加载

3.10表示距离底部为10 的时候就执行loadMore方法

loadMore () {
   this.busy = true
   //把busy置位true，这次请求结束前不再执行
   setTimeout(() => {
    this.page++
    this.getGoodLists(true)
    //调用获取数据接口，并且传入一个true，让axios方法指导是否需要拼接数组。
   }, 500)
  }
getGoodLists (flag) {
   var param = {
    page: this.page,
    pageSize: this.pageSize,
    sort: this.sortFlag "color: #ff0000">总结


以上所述是小编给大家介绍的使用vue-infinite-scroll实现无限滚动效果，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！
DDR爱好者之家 Design By 杰米
广告合作：本站广告合作请联系QQ：858582 申请时备注：广告合作（否则不回）
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
DDR爱好者之家 Design By 杰米
ddrfans.com DDR爱好者之家
8,675无损音乐
1,324高清电影
213破解软件
70,141收录资讯

更新日志

友情链接

杰晶网络 DDR爱好者之家 南强小屋 黑松山资源网 白云城资源网 更多链接
DDR爱好者之家 Design By 杰米