vue-infinite-scroll插件可以无限滚动实现加载更多,其作用是是当滚动条滚动到距离底部的指定高度时触发某个方法。
https://github.com/ElemeFE/vue-infinite-scroll/
npm我vue-infinite-scroll——保存
从“vue-infinite-scroll”进口vueiInfinite Vue.use (vueiInfinite) & lt; div v-infinite-scroll=發oadMore infinite-scroll-disabled”=懊β怠眎nfinite-scroll-distance=?0”比; & lt; div类="加载"祝辞加载中…& lt;/div> & lt;/div>
1. loadmore是方法,里面是要执行的代码
2.繁忙的值是正确的时候,就不再加载,如果是假就执行加载
3.10表示距离底部为10的时候就执行loadMore方法
loadMore () { 这一点。忙=true//把忙碌的置位为真,这次请求结束前不再执行 setTimeout(()=比;{ this.page + + this.getGoodLists(真正的)//调用获取数据接口,并且传入一个真的,让axios方法指导是否需要拼接数组。 },500) } getGoodLists(国旗){ var参数={ 页面:this.page, 页大小:this.pageSize, :这个。sortFlag & # 63;1: 1 } axios。get(/货物,{参数:param}),然后((响应)=比;{ 让res=response.data 如果(国旗){ 这一点。goodList=this.goodList.concat (res.result.list)//如果是flagtrue,则拼接数组。 如果(res.result。数===0){ 这一点。忙=true 其他}{ 这一点。忙=false } 其他}{ 这一点。goodList=res.result.list 这一点。忙=false 第一次进来的时候,把忙碌的置位假。执行loadMore的方法 } }) },
以上所述是小编给大家介绍的使用vue-infinite-scroll实现无限滚动效果,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!