下面小编就为大家分享一篇Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
通过多次爬坑，发现了这些监听滚动来加载更多的组件的共同点，
因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的，
所以是进入页面则直接触发一次，当监听到滚动事件之后，继续加载更多，
所以对于无限滚动加载不需要写首次载入列表的函数，
代码如下：
html:
//父组件 <div> </div> //LifeLists组件： <div class="loading-text"> <span></span></div> LifeListItem组件： <div id="lifeListItemBox"> <div class="lifeListItem1"> <div> <div class="title1">{{item.title}}</div><div class="price"> <b class="now"><span class="unit">{{item.monetaryUnit}}</span>{{item.price}}</b></div></div><div class="title2">{{item.title}}</div><div class="info"> 发布于{{formatTime(item.createAt)}} {{item.countryName}} {{item.cityName}} </div><div class="imageList"> </div><div class="content">{{item.detail}}</div><div class="listBar"> <div class="iconBox"> {{item.like}} </div><div class="iconBox"> {{item.commentCount}} </div></div></div></div>
vue.js
data:
page:0, size:10, loadingTextBtn:false, loadingText:"努力加载中", loadingComplete:false, refreshComplete:false, city:"", country:""
methods:
loadMore() { this.loading = true; this.loadingTextBtn=true; if(parseInt(this.page)==0){ this.$store.dispatch('loadMoreLifeList',{city:"纽约",country:"美国",category:"",page:this.page,size:this.size}); this.page++; }else if(<div style="color:transparent">本文来源gaodai.ma#com搞##代!^码网(</div>parseInt(this.page)>0&&parseInt(this.page) { // this.$store.dispatch('loadMoreLifeList',{city:this.city,country:this.country,category:"",page:this.page,size:this.size}) this.$store.dispatch('loadMoreLifeList',{city:"纽约",country:"美国",category:"",page:this.page,size:this.size}); this.page++; }, 1000); }else{ this.loadingText="已全部加载完成"; this.loadingComplete=true; this.loading = false; } },
这里重要的是判断，当当前页面为0的时候，即第一页的时候，不需要setTimeout定时器，直接请求加载，当加载更多的时候可以加个定时器。
网上找到很多mint-ui 的loadmore组件来实现上拉加载更多，由于上拉触发相应的加载更多事件，所以当进入页面的时候应该不会自动载入数据，则这里可以加一个获取第一页数据的函数。
以上这篇Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持gaodaima搞代码网。
以上就是Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
转载请注明原文链接：Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法
