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


Posted in Javascript onDecember 23, 2017

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

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

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

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

代码如下:

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)}}
        
    {{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实现无限滚动加载更多的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
学习js所必须要知道的一些
Mar 07 Javascript
jquery 为a标签绑定click事件示例代码
Jun 23 Javascript
基于javascript实现简单计算器功能
Jan 03 Javascript
微信小程序 swiper组件轮播图详解及实例
Nov 16 Javascript
Vue.js组件tabs实现选项卡切换效果
Dec 01 Javascript
利用Node.js+Koa框架实现前后端交互的方法
Feb 27 Javascript
Node.js使用Express.Router的方法
Nov 14 Javascript
layui获取选中行数据的实例讲解
Aug 19 Javascript
微信小程序实现的canvas合成图片功能示例
May 03 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
Nov 19 Javascript
js数组相减简单示例【删除a数组所有与b数组相同元素】
Mar 04 Javascript
JavaScript实现捕获鼠标坐标
Apr 12 Javascript
9种使用Chrome Firefox 自带调试工具调试javascript技巧
Dec 22 #Javascript
JavaScript中的一些隐式转换和总结(推荐)
Dec 22 #Javascript
原生JS写Ajax的请求函数功能
Dec 22 #Javascript
原生JS控制多个滚动条同步跟随滚动效果
Dec 22 #Javascript
使用vue-cli+webpack搭建vue开发环境的方法
Dec 22 #Javascript
通过vue-cli来学习修改Webpack多环境配置和发布问题
Dec 22 #Javascript
vue 系列——vue2-webpack2框架搭建踩坑之路
Dec 22 #Javascript
You might like
ThinkPHP模板IF标签用法详解
2014/07/01 PHP
php实现scws中文分词搜索的方法
2015/12/25 PHP
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
php实现每日签到功能
2018/11/29 PHP
js null,undefined,字符串小结
2010/08/21 Javascript
Javascript访问器属性实例分析
2014/12/30 Javascript
js时间比较 js计算时间差的简单实现方法
2016/08/26 Javascript
Javascript中arguments对象的详解与使用方法
2016/10/04 Javascript
JS库之ParticlesJS使用简介
2017/09/12 Javascript
对angularjs框架下controller间的传值方法详解
2018/10/08 Javascript
基于vue框架手写一个notify插件实现通知功能的方法
2019/03/31 Javascript
vue中npm包全局安装和局部安装过程
2019/09/03 Javascript
js判断非127开头的IP地址的实例代码
2020/01/05 Javascript
使用python绘制人人网好友关系图示例
2014/04/01 Python
使用python实现rsa算法代码
2016/02/17 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
Python自定义装饰器原理与用法实例分析
2018/07/16 Python
python中正则表达式 re.findall 用法
2018/10/23 Python
对Python实现简单的API接口实例讲解
2018/12/10 Python
python学生信息管理系统实现代码
2019/12/17 Python
jupyter notebook读取/导出文件/图片实例
2020/04/16 Python
关于Keras Dense层整理
2020/05/21 Python
浅析Python 字符编码与文件处理
2020/09/24 Python
用C或者C++语言实现SOCKET通信
2015/02/24 面试题
汉语言文学毕业生自荐信范文
2014/03/24 职场文书
公民授权委托书范本
2014/09/17 职场文书
2014年党的群众路线活动个人整改措施
2014/10/28 职场文书
公务员年度考核评语
2014/12/31 职场文书
2015年度个人教学工作总结
2015/05/20 职场文书
《丑小鸭》教学反思
2016/02/19 职场文书
2019年年中工作总结讲话稿模板
2019/03/25 职场文书
导游词之井冈山
2019/11/20 职场文书
jQuery实现广告显示和隐藏动画
2021/07/04 jQuery
磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单
2021/11/21 数码科技
Redis超详细讲解高可用主从复制基础与哨兵模式方案
2022/04/07 Redis
教你win10系统中APPCRASH事件问题解决方法
2022/07/15 数码科技