大橙子网站建设,新征程启航

为企业提供网站建设、域名注册、服务器等服务

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://dzwzjz.com/article/gcgdph.html