使用vue-infinite-scroll实现无限滚动效果

前端之家收集整理的这篇文章主要介绍了使用vue-infinite-scroll实现无限滚动效果前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

main.js使用

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

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

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

{ this.page++ this.getGoodLists(true) //调用获取数据接口,并且传入一个true,让axios方法指导是否需要拼接数组。 },500) } getGoodLists (flag) { var param = { page: this.page,pageSize: this.pageSize,sort: this.sortFlag ? 1 : -1 } axios.get('/goods',{params: param}).then((response) => { let res = response.data if (flag) { this.goodList = this.goodList.concat(res.result.list) //如果是flagtrue,则拼接数组。 if (res.result.count === 0) { this.busy = true } else { this.busy = false } } else { this.goodList = res.result.list this.busy = false 第一次进来的时候,把busy置位false。执行loadMore的方法 } }) },

总结

以上所述是小编给大家介绍的使用vue-infinite-scroll实现无限滚动效果。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助,如果觉得编程之家不错,可分享给好友!感谢支持

原文链接:https://www.f2er.com/vue/31820.html

猜你在找的Vue相关文章