频道导航

Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法

2019-01-07 Vue 前端之家

前端之家收集整理的这篇文章主要介绍了Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

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

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

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

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

代码如下：

html:

//LifeLists组件：

LifeListItem组件：

Box">

{{item.countryName}} {{item.cityName}}

Box"> {{item.like}}

Box"> {{item.commentCount}}

vue.js

data:

methods:

0&&parseInt(this.page) { // this.$store.dispatch('loadMoreLifeList',{city:this.city,country:this.country,size:this.size}) this.$store.dispatch('loadMoreLifeList',size:this.size}); this.page++; },1000); }else{ this.loadingText="已全部加载完成"; this.loadingComplete=true; this.loading = false; } },

这里重要的是判断，当当前页面为0的时候，即第一页的时候，不需要setTimeout定时器，直接请求加载，当加载更多的时候可以加个定时器。

网上找到很多mint-ui 的loadmore组件来实现上拉加载更多，由于上拉触发相应的加载更多事件，所以当进入页面的时候应该不会自动载入数据，则这里可以加一个获取第一页数据的函数。

以上这篇Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持编程之家。

原文链接：https://www.f2er.com/vue/34539.html

mint-ui 加载更多无限滚动移动端组件库