php 无限滚动加载,有关Vue.js如何实现无限滚动加载

下面我就为大家分享一篇Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法，具有很好的参考价值，希望对大家有所帮助。

通过多次爬坑，发现了这些监听滚动来加载更多的组件的共同点，

因为这些加载更多的方法是绑定在需要加载更多的内容的元素上的，

所以是进入页面则直接触发一次，当监听到滚动事件之后，继续加载更多，

所以对于无限滚动加载不需要写首次载入列表的函数，

代码如下：

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)

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组件来实现上拉加载更多，由于上拉触发相应的加载更多事件，所以当进入页面的时候应该不会自动载入数据，则这里可以加一个获取第一页数据的函数。

以上就是我整理的文字，希望对大家有帮助

相关文章: