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 相关文章推荐
JSON 学习之JSON in JavaScript详细使用说明
Feb 23 Javascript
用jQuery获取IE9下拉框默认值问题探讨
Jul 22 Javascript
轻量级的原生js日历插件calendar.js使用指南
Apr 28 Javascript
jQuery animate和CSS3相结合实现缓动追逐效果附源码下载
Apr 18 Javascript
jquery实现下拉框左右选择功能
Feb 21 Javascript
利用Vue.js框架实现火车票查询系统(附源码)
Feb 27 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
jQuery实现分页功能(含ajax请求、后台数据、附完整demo)
Apr 03 jQuery
JS实现的冒泡排序,快速排序,插入排序算法示例
Mar 02 Javascript
详解vue 在移动端体验上的优化解决方案
May 20 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
Oct 28 Javascript
基于postman获取动态数据过程详解
Sep 08 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运行环境配置与开发环境的配置(图文教程)
2013/06/04 PHP
PHP判断是否连接上网络的方法
2015/07/01 PHP
Linux环境下php实现给网站截图的方法
2016/05/03 PHP
最新最全PHP生成制作验证码代码详解(推荐)
2016/06/12 PHP
PHP控制前台弹出对话框的实现方法
2016/08/21 PHP
PHP+Redis链表解决高并发下商品超卖问题(实现原理及步骤)
2020/08/03 PHP
执行iframe中的javascript方法
2008/10/07 Javascript
浅析js绑定事件的常用方法
2016/05/15 Javascript
js下载文件并修改文件名
2017/05/08 Javascript
vue-cli之router基本使用方法详解
2017/10/17 Javascript
vue 表单输入格式化中文输入法异常问题
2018/05/30 Javascript
Vue.js子组件向父组件通信的方法实例代码详解
2018/12/10 Javascript
基于vue.js组件实现分页效果
2018/12/29 Javascript
js如何获取访问IP、地区、当前操作浏览器
2019/07/23 Javascript
python使用百度翻译进行中翻英示例
2014/04/14 Python
Python中使用gzip模块压缩文件的简单教程
2015/04/08 Python
Python算术运算符实例详解
2017/05/31 Python
200 行python 代码实现 2048 游戏
2018/01/12 Python
python3实现公众号每日定时发送日报和图片
2018/02/24 Python
Python将json文件写入ES数据库的方法
2019/04/10 Python
Python 利用高德地图api实现经纬度与地址的批量转换
2019/08/14 Python
pandas 空数据处理方法详解
2019/11/02 Python
python selenium 执行完毕关闭chromedriver进程示例
2019/11/15 Python
关于numpy.where()函数 返回值的解释
2019/12/06 Python
500行python代码实现飞机大战
2020/04/24 Python
Speedo速比涛法国官方网站:泳衣、泳镜、泳帽、泳裤
2019/07/30 全球购物
生产车间班组长岗位职责
2014/01/06 职场文书
鲜花方阵解说词
2014/02/13 职场文书
捐资助学倡议书
2014/04/15 职场文书
小学美术兴趣小组活动总结
2014/07/07 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
公司会议开幕词
2015/01/29 职场文书
学校勤俭节约倡议书
2015/04/29 职场文书
道歉信怎么写
2015/05/12 职场文书
教你如何使用Python实现二叉树结构及三种遍历
2021/06/18 Python
tomcat的catalina.out日志按自定义时间格式进行分割的操作方法
2022/04/02 Servers