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 相关文章推荐
JAVASCRIPT 对象的创建与使用
Mar 09 Javascript
JavaScript高级程序设计(第3版)学习笔记10 再访js对象
Oct 11 Javascript
JavaScript中使用stopPropagation函数停止事件传播例子
Aug 27 Javascript
纯JS实现旋转图片3D展示效果
Apr 12 Javascript
使用jspdf生成pdf报表
Jul 03 Javascript
深入解析Javascript闭包的功能及实现方法
Jul 10 Javascript
AngularJS ngModel实现指令与输入直接的数据通信
Sep 21 Javascript
jQuery 获取select选中值及清除选中状态
Dec 13 Javascript
Vue中引入样式文件的方法
Aug 18 Javascript
浅谈Vue-cli 命令行工具分析
Nov 22 Javascript
Vue项目中配置pug解析支持
May 10 Javascript
Vue3.0数据响应式原理详解
Oct 09 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
PHP+MYSQL会员系统的登陆即权限判断实现代码
2011/09/23 PHP
php&amp;mysql 日期操作小记
2012/02/27 PHP
php生成图形验证码几种方法小结
2013/08/15 PHP
php替换字符串中间字符为省略号的方法
2015/05/04 PHP
php并发加锁问题分析与设计代码实例讲解
2021/02/26 PHP
JavaScript入门教程(8) Location地址对象
2009/01/31 Javascript
Javascript验证Visa和MasterCard信用卡号的方法
2015/07/27 Javascript
Javascript编程中几种继承方式比较分析
2015/11/28 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
使用Object.defineProperty实现简单的js双向绑定
2016/04/15 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
[js高手之路]设计模式系列课程-发布者,订阅者重构购物车的实例
2017/08/29 Javascript
javascript获取图片的top N主色值方法详解
2018/01/26 Javascript
小程序多图列表实现性能优化的方法步骤
2019/05/28 Javascript
Vue动态加载图片在跨域时无法显示的问题及解决方法
2020/03/10 Javascript
详解如何修改 node_modules 里的文件
2020/05/22 Javascript
原生js实现无缝轮播图效果
2021/01/28 Javascript
[01:28:56]2014 DOTA2华西杯精英邀请赛 5 24 CIS VS DK
2014/05/26 DOTA
17个Python小技巧分享
2015/01/23 Python
深入解析Python中函数的参数与作用域
2016/03/20 Python
Python中规范定义命名空间的一些建议
2016/06/04 Python
用tensorflow搭建CNN的方法
2018/03/05 Python
便捷提取python导入包的属性方法
2018/10/15 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
tensorflow对图像进行拼接的例子
2020/02/05 Python
Python3中对json格式数据的分析处理
2021/01/28 Python
Viking比利时:购买办公用品
2019/10/30 全球购物
计算机专业个人简短的自我评价
2013/10/23 职场文书
建设工地安全标语
2014/06/07 职场文书
艺术学院毕业生求职信
2014/07/09 职场文书
整顿机关作风心得体会
2014/09/10 职场文书
与美同行演讲稿
2014/09/13 职场文书
车贷收入证明范本
2014/09/14 职场文书
现役军人家属慰问信
2015/03/24 职场文书
公历12个月名称的由来
2022/04/12 杂记
详解ZABBIX监控ESXI主机的问题
2022/06/21 Servers