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

 更新时间:2017年12月23日 08:44:01   作者:蓓蕾心晴  
下面小编就为大家分享一篇Vue.js 的移动端组件库mint-ui实现无限滚动加载更多的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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

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

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

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

代码如下:

html:

//父组件
<div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="1000">
   <LifeLists :loadingTextBtn="loadingTextBtn" :loadingText="loadingText" :loadingComplete="loadingComplete" :lifeList="lifeList"></LifeLists>
</div>
//LifeLists组件:
<LifeListItem :lists="lifeList"></LifeListItem>
  <div class="loading-text" v-show="{loadingTextBtn:true}">
   <span v-text="loadingText"></span>
   <mt-spinner v-if="(loadingComplete==false)" type="snake" :size="16"></mt-spinner>
</div>
LifeListItem组件:
<div id="lifeListItemBox">
<router-link v-for="(item,index) in lists" :to="{name:'lifeDetails',params:{id:item.id}}" :key="index">
   <div class="lifeListItem1" v-if="(item.status=='online')">
   <div v-if="(item.hasPrice==true)">
    <div class="title1">{{item.title}}</div>
    <div class="price">
    <b class="now"><span class="unit">{{item.monetaryUnit}}</span>{{item.price}}</b>
    </div>
   </div>
   <div v-else class="title2">{{item.title}}</div>
   <div class="info">
    发布于{{formatTime(item.createAt)}}
    &nbsp;&nbsp;&nbsp;&nbsp;
    {{item.countryName}} {{item.cityName}}
   </div>
   <div class="imageList">
    <img :src="img" alt="" v-for="(img,index) in item.photos">
   </div>
   <div class="content">{{item.detail}}</div>
   <div class="listBar">
    <div class="iconBox">
    <svg class="icon icon-dianzan" aria-hidden="true">
     <use xlink:href="#icon-dianzan" rel="external nofollow" ></use>
    </svg>
    {{item.like}}
    </div>
    <div class="iconBox">
    <svg class="icon icon-pinglun2" aria-hidden="true">
     <use xlink:href="#icon-pinglun2" rel="external nofollow" ></use>
    </svg>
    {{item.commentCount}}
    </div>
   </div>
   </div>
  </router-link>
</div>

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

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

相关文章

  • vue组件发布到npm简单步骤

    vue组件发布到npm简单步骤

    给大家讲解一下vue组件发布到npm简单方法和步骤过程,需要的朋友一起学习参考一下。
    2017-11-11
  • vue.js语法及常用指令

    vue.js语法及常用指令

    vue.js相比于Angular.js,Vue.js提供了更加简洁、更易于理解的API,使得我们能够快速地上手并使用Vue.js。下面通过本文给大家分享vue.js语法及常用指令,希望对大家有所帮助
    2017-10-10
  • vue.js 实现点击按钮动态添加li的方法

    vue.js 实现点击按钮动态添加li的方法

    今天小编就为大家分享一篇vue.js 实现点击按钮动态添加li的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 详解从零搭建 vue2 vue-router2 webpack3 工程

    详解从零搭建 vue2 vue-router2 webpack3 工程

    本篇文章主要介绍了详解从零搭建 vue2 vue-router2 webpack3 工程,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 解决vant的Toast组件时提示not defined的问题

    解决vant的Toast组件时提示not defined的问题

    这篇文章主要介绍了解决vant的Toast组件时提示not defined的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • 讲解vue-router之命名路由和命名视图

    讲解vue-router之命名路由和命名视图

    这篇文章主要介绍了讲解vue-router之命名路由和命名视图,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • vue绑定class与行间样式style详解

    vue绑定class与行间样式style详解

    这篇文章主要介绍了vue绑定class与行间样式style的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-08-08
  • Vue3中使用vue3-print-nb实现打印功能

    Vue3中使用vue3-print-nb实现打印功能

    这篇文章主要为大家详细介绍了Vue3中如何使用vue3-print-nb实现打印功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起参考一下
    2025-02-02
  • vue实现树状表格效果

    vue实现树状表格效果

    这篇文章主要为大家详细介绍了vue实现树状表格效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-12-12
  • Vue出现弹出层时禁止底部页面跟随滑动

    Vue出现弹出层时禁止底部页面跟随滑动

    本文主要介绍了Vue出现弹出层时禁止底部页面跟随滑动,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07

最新评论