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 相关文章推荐
Ext grid 添加右击菜单
Nov 26 Javascript
Javascript 设计模式(二) 闭包
May 26 Javascript
HTML上传控件取消选择
Mar 06 Javascript
用jquery方法操作radio使其默认选项是否
Sep 10 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
Jan 02 Javascript
jQuery中nextUntil()方法用法实例
Jan 07 Javascript
JS动态添加Table的TR,TD实现方法
Jan 28 Javascript
JavaScript脚本判断蜘蛛来源的方法
Sep 22 Javascript
jQuery实现放大镜效果实例代码
Mar 17 Javascript
Angularjs结合Bootstrap制作的一个TODO List
Aug 18 Javascript
js学习总结_轮播图之渐隐渐现版(实例讲解)
Jul 17 Javascript
微信小程序实现YDUI的ScrollTab组件
Feb 02 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 adodb连接带密码access数据库实例,测试成功
2008/05/14 PHP
php上传apk后自动提取apk包信息的使用(示例下载)
2013/04/26 PHP
php实现简单洗牌算法
2013/06/18 PHP
PHP验证信用卡卡号是否正确函数
2015/05/27 PHP
PHP实现的限制IP投票程序IP来源分析
2016/05/04 PHP
PHP入门教程之面向对象基本概念实例分析
2016/09/11 PHP
php版微信公众账号第三方管理工具开发简明教程
2016/09/23 PHP
laravel 5.4中实现无限级分类的方法示例
2017/07/27 PHP
JavaScript 闭包深入理解(closure)
2009/05/27 Javascript
Jquery在IE7下无法使用 $.ajax解决方法
2009/11/11 Javascript
单独使用CKFinder选择图片的方法
2010/08/21 Javascript
深入理解JavaScript作用域和作用域链
2011/10/21 Javascript
jquery ajax方式直接提交整个表单核心代码
2013/08/15 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
JavaScript将取代AppleScript?
2014/09/18 Javascript
jquery图形密码实现方法
2015/03/11 Javascript
JS获取Table中td值的方法
2015/03/19 Javascript
jQuery给多个不同元素添加class样式的方法
2015/03/26 Javascript
cocos2dx骨骼动画Armature源码剖析(一)
2015/09/08 Javascript
JS 对象(Object)和字符串(String)互转方法
2016/05/20 Javascript
node vue项目开发之前后端分离实战记录
2017/12/13 Javascript
vue项目打包后打开页面空白解决办法
2018/06/29 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
2020/04/28 Javascript
使用python绘制常用的图表
2016/08/27 Python
python实现发送邮件功能代码
2017/12/14 Python
python+splinter自动刷新抢票功能
2018/09/25 Python
python中的socket实现ftp客户端和服务器收发文件及md5加密文件
2020/04/01 Python
python基于Kivy写一个图形桌面时钟程序
2021/01/28 Python
HTML5标签嵌套规则详解【必看】
2016/04/26 HTML / CSS
世界上最受欢迎的钓鱼诱饵:Rapala
2019/05/02 全球购物
商务会议邀请函
2014/01/09 职场文书
工程建设实施方案
2014/03/14 职场文书
搞笑的爱情检讨书
2014/10/01 职场文书
2016秋季运动会开幕词
2016/03/04 职场文书
年终工作总结范文
2019/06/20 职场文书