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

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

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

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

代码如下:

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"></use>
</svg>
{{item.like}}
</div>
<div class="iconBox">
<svg class="icon icon-pinglun2" aria-hidden="true">
<use xlink:href="#icon-pinglun2"></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实现无限滚动加载更多的更多相关文章

  1. 基于VUE.JS的移动端框架Mint UI

    Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...

  2. 基于Vue.js PC桌面端弹出框组件|vue自定义弹层组件|vue模态框

    vue.js构建的轻量级PC网页端交互式弹层组件VLayer. 前段时间有分享过一个vue移动端弹窗组件,今天给大家分享一个最近开发的vue pc端弹出层组件. VLayer 一款集Alert.Dia ...

  3. vue2.0 移动端,下拉刷新,上拉加载更多插件,修改版

    在[实现丰盛]的插件基础修改[vue2.0 移动端,下拉刷新,上拉加载更多 插件], 1.修改加载到尾页面,返回顶部刷新数据,无法继续加重下一页 2.修改加载完成文字提示 原文链接:http://ww ...

  4. vue 原生添加滚动加载更多

    vue中添加滚动加载更多,因为是单页面所以需要在跳出页面时候销毁滚动,要不会出现错乱.我们在mounted建立滚动,destroyed销毁滚动. mounted () { window.addEven ...

  5. 笔记-VUE滚动加载更多数据

    来源:https://blog.csdn.net/qq_17281881/article/details/87342403 VUE滚动加载更多数据 data() { return { loading: ...

  6. scroll-view组件实现下拉刷新, 拉到底加载更多

    官方文档已声明,即使在page.json和app.json中开启下拉刷新,scroll-view组件也是不支持的.但我们可以通过曲线救国的方法来实现 实现代码 // wxml <scroll-v ...

  7. Vue无限滚动加载数据

    Web项目经常会用到下拉滚动加载数据的功能,今天就来种草Vue-infinite-loading 这个插件,讲解一下使用方法! 第一步:安装 npm install vue-infinite-load ...

  8. 基于Vue.js的表格分页组件

    有一段时间没更新文章了,主要是因为自己一直在忙着学习新的东西而忘记分享了,实在惭愧. 这不,大半夜发文更一篇文章,分享一个自己编写的一个Vue的小组件,名叫BootPage. 不了解Vue.js的童鞋 ...

  9. Vue移动组件库Mint UI的安装与使用

    一.什么是 Mint UI 1.Mint UI 包含丰富的 CSS 和 JS 组件,可以提升移动端开发效率 2.Mint UI 按需加载组件 3.Mint UI 轻量化 二.Mint UI 的安装 1 ...

随机推荐

  1. nova创建虚拟机源码分析系列之六 api入口create方法

    openstack 版本:Newton 注:博文图片采用了很多大牛博客图片,仅作为总结学习,非商用.该图全面的说明了nova创建虚机的过程,从逻辑的角度清晰的描述了前端请求创建虚拟机之后发生的一系列反 ...

  2. Android 开发笔记___图像视图

    <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:android=&quo ...

  3. 浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式 [转载]

    前言 因为项目中经常会有利用jquery操作dom元素的增删操作,所以会涉及到dom元素的绑定事件方式,简单的归纳一下bind,live,delegate,on的区别,以便以后查阅,也希望该文章日后能 ...

  4. HTML5 设备上的API

    一.Vibration API ,接受两种类型参数 vibrate (unsigned long time)   当参数是unsigned long的时候 此时参数表示震动时间.  NotSuppor ...

  5. 单元测试框架 unittest 的运行方法if __name__ == '__main__': unittest.main()

    1. if __name__ == '__main__': unittest.main()2. 测试用例实例根据测试的特点分组在一起. unittest为此提供了一个机制:测试套件由unittest' ...

  6. linux系统下解决getch()输入数值不回显示

    在linux系统下开发C 程序却会遇到系统不支持conio.h头文件,无法使用getch()不回显函数.下面就演示如何构建函数实现数值输入不回显. #include <stdio.h> # ...

  7. ubuntu server小技巧(不定期更新)

    0.常用工具apt安装包名 # ssh服务器工具 apt-get install openssh-server # RabbitMQapt-get install rabbitmq-server # ...

  8. 【游戏开发】Excel表格批量转换成CSV的小工具

    一.前言 在工作的过程中,我们有时可能会面临将Excel表格转换成CSV格式文件的需求.这尤其在游戏开发中体现的最为明显,策划的数据文档大多是一些Excel表格,且不说这些表格在游戏中读取的速度,但就 ...

  9. java-基础-泛型

    java泛型通配符问题.   java中的泛型基本用法参考<java编程思想>第四版 p.353 java泛型中比较难理解的主要是类型擦除和通配符相关.   1.类型擦除 在编译期间,类型 ...

  10. 从实战出发,谈谈 nginx 信号集

    前言 之前工作时候,一台引流测试机器的一个 ngx_lua 服务突然出现了一些 HTTP/500 响应,从错误日志打印的堆栈来看,是不久前新发布的版本里添加的一个 Lua table 不存在,而有代码 ...