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

  

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

  

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

  https://www.npmjs.com/package/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实现无限滚动效果,希望对大家有所帮助,如果大家有任何疑问请给我留的言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!

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