13518219792
网站建设资讯

NEWS

网站建设资讯

Vue.js中mint-ui如何实现无限滚动加载更多

这篇文章主要介绍Vue.js中mint-ui如何实现无限滚动加载更多，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！

十年的振安网站建设经验，针对设计、前端、开发、售后、文案、推广等六对一服务，响应快，48小时及时工作处理。网络营销推广的优势是能够根据用户设备显示端的尺寸不同，自动调整振安建站的显示方式，使网站能够适用不同显示终端，在浏览器中调整网站的宽度，无论在任何一种浏览器上浏览网站，都能展现优雅布局与设计，从而大程度地提升浏览体验。成都创新互联从事“振安网站设计”,“振安网站推广”以来，每个客户项目都认真落实执行。

代码如下：

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

以上是“Vue.js中mint-ui如何实现无限滚动加载更多”这篇文章的所有内容，感谢各位的阅读！希望分享的内容对大家有帮助，更多相关知识，欢迎关注创新互联行业资讯频道！


名称栏目：Vue.js中mint-ui如何实现无限滚动加载更多
本文地址：http://cdweb.net/article/gcgdph.html

其他资讯