摘要：网上找到很多的组件来实现上拉加载更多，由于上拉触发相应的加载更多事件，所以当进入页面的时候应该不会自动载入数据，则这里可以加一个获取第一页数据的函数。
通过多次爬坑，发现了这些监听滚动来加载更多的组件的共同点，
因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的，
所以是进入页面则直接触发一次，当监听到滚动事件之后，继续加载更多，
所以对于无限滚动加载不需要写首次载入列表的函数，
代码如下：
html:
//父组件
//LifeLists组件：
//LifeListItem组件：
{{item.title}}
{{item.monetaryUnit}}{{item.price}}
{{item.title}}
发布于{{formatTime(item.createAt)}}
{{item.countryName}} {{item.cityName}}
{{item.detail}}
{{item.like}}
{{item.commentCount}}
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) {
// 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组件来实现上拉加载更多，由于上拉触发相应的加载更多事件，所以当进入页面的时候应该不会自动载入数据，则这里可以加一个获取第一页数据的函数。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/90350.html
