通过多次爬坑，发现了这些监听滚动来加载更多的组件的共同点，因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的，所以是进入页面则直接触发一次，当监听到滚动事件之后，继续加载更多，所以对于无限滚动加载不需要写首次载入列表的函数。本文就为大家分享一篇vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧，希望能帮助到大家。
代码如下：
html:
//父组件
<p v-infinite-scroll="loadmore" infinite-scroll-disabled="loading" infinite-scroll-distance="1000">
<lifelists :loadingtextbtn="loadingtextbtn" :loadingtext="loadingtext" :loadingcomplete="loadingcomplete" :lifelist="lifelist"></lifelists>
</p>
//lifelists组件：
<lifelistitem :lists="lifelist"></lifelistitem>
<p class="loading-text" v-show="{loadingtextbtn:true}">
<span v-text="loadingtext"></span>
<mt-spinner v-if="(loadingcomplete==false)" type="snake" :size="16"></mt-spinner>
</p>
lifelistitem组件：
<p id="lifelistitembox">
<router-link v-for="(item,index) in lists" :to="{name:'lifedetails',params:{id:item.id}}" :key="index">
<p class="lifelistitem1" v-if="(item.status=='online')">
<p v-if="(item.hasprice==true)">
<p class="title1">{{item.title}}</p>
<p class="price">
<b class="now"><span class="unit">{{item.monetaryunit}}</span>{{item.price}}</b>
</p>
</p>
<p v-else class="title2">{{item.title}}</p>
<p class="info">
发布于{{formattime(item.createat)}}
{{item.countryname}} {{item.cityname}}
</p>
<p class="imagelist">
<img :src="img" alt="" v-for="(img,index) in item.photos">
</p>
<p class="content">{{item.detail}}</p>
<p class="listbar">
<p class="iconbox">
<svg class="icon icon-dianzan" aria-hidden="true">
<use xlink:href="#icon-dianzan" rel="external nofollow" ></use>
</svg>
{{item.like}}
</p>
<p class="iconbox">
<svg class="icon icon-pinglun2" aria-hidden="true">
<use xlink:href="#icon-pinglun2" rel="external nofollow" ></use>
</svg>
{{item.commentcount}}
</p>
</p>
</p>
</router-link>
</p>
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(parseint(this.page)>0&&parseint(this.page)<parseint(this.totalpages)){
settimeout(() => {
// 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组件来实现上拉加载更多，由于上拉触发相应的加载更多事件，所以当进入页面的时候应该不会自动载入数据，则这里可以加一个获取第一页数据的函数。
相关推荐：
详解原生js是实现控制多个滚动条同步跟随滚动
vue中如何实现滚动加载更多的功能
详解css3实现无限循环的无缝滚动
以上就是详解vue.js 的移动端组件库mint-ui实现无限滚动加载更多的详细内容。