1.无限滚动的运用场景:

一般运用在列表展示,有分页、下拉加载更多的需求中。

2.代码分析

代码很简单,实现了列表分页,数据加载完之后显示数据状态

<template>
<div class="list-data"
v-infinite-scroll="loadMore"
infinite-scroll-disabled="loading"
infinite-scroll-distance="10">
<equipment-list :list="list"></equipment-list>
<div class="loading" v-if="loading">
<span id="load-text">{{loadText}}</span>
</div>
</div>
</template>
<script>
import { findPage } from '@/api/api'
import EquipmentList from 'common/list/EquipmentList.vue'
export default {
data(){
return {
loading:false,
loadText:'正在加载...',
list: [],
param: {
pageIndex: 0,
pageSize: 10
}
},
components:{
EquipmentList
},
methods: {
getList(callBack){
findPage(this.param).then(response => {
if(response.ret){
let data = response.datas
if(!data){data = []} // 上次list的长度
let len = this.list.length // 拼接数据
this.list = this.list.concat(data) if (data && data.length == 0 && !len) {
this.loadText = '没有找到相关数据'
} else if (data && data.length < 10) {
this.loadText = '暂无更多数据'
} else {
this.loading = false
} callBack && callBack()
}
},reject => {})
},
loadMore() {
this.loading = true
this.param.pageIndex += 1
this.getList()
}
}
}
</script>
<style>
.list-data{
height: 100%;
overflow-y: auto;
}
</style>

参考mint-ui官网介绍

1.为HTML元素添加v-infinite-scroll指令即可使用无限滚动。

2.滚动该元素,当其底部与被滚动元素底部的距离小于给定的阈值(通过infinite-scroll-distance设置)时,绑定到 v-infinite-scroll 指令的方法就会被触发。

3.infinite-scroll-disabled若为真,则无限滚动不会被触发,默认为false。

4.infinite-scroll-immediate-check若为真,则指令被绑定到元素上后会立即检查是否需要执行加载方法。在初始状态下内容有可能撑不满容器时十分有用。默认为true。

但是,3和4实际效果却和官网描述有出入,实际效果:实际效果:实际效果:

1.为HTML元素添加 v-infinite-scroll 指令即可使用无限滚动。

2.滚动该元素,当其底部与被滚动元素底部的距离小于给定的阈值(通过infinite-scroll-distance设置)时,绑定到 v-infinite-scroll 指令的方法就会被触发。

3.infinite-scroll-disabled 若为真,如果上次加载的数据没有撑满容器,则立即再次执行绑定到 v-infinite-scroll 指令的方法(loadMore),直到数据撑满容器为止。在初始状态下内容有可能撑不满容器时十分有用,默认为false。

4.infinite-scroll-immediate-check,若为真 则指令被绑定到元素上后会立即执行加载方法(loadMore),默认为true。

填坑

1.重复加载。初次进入列表页,会加载两次或者多次数据

造成重复加载的原因,罪魁祸首是infinite-scroll-disabled,在 loadMore 方法里 有一句 this.loading = true,把infinite-scroll-disabled的值设置为了true,

它的作用就是,当你进入页面是,会检查如果第一次请求的数据没有撑满你的容器(list-data),就会立即再次执行v-infinite-scroll 绑定的方法(loadMore),第二次没有撑满,会执行第三次。。。。。。

2.滚动时,不起作用

这种情况,就是在loadMore方法里没有写this.loading = true,同时,第一次加载的数据也没有撑满容器。而我们的样式设置:

.list-data{
height: 100%;
overflow-y: auto;
}

根本原因是因为,数据没有撑满容器就不会有滚动效果,所以就不会起作用了。

所以解决方案 就是要出现滚动条 !!! 容器高设置的小一点,或者每页的数据多一点。

注:

1.为什么没有在created 里调用一次getlist方法?为什么pageIndex 默认为0?

因为infinite-scroll-immediate-check默认为 true,进入页面会直接调用loadMore 。

2.容器的样式需要设置height和 允许滚动overflow-y:auto;

mint-ui Infinite scroll 重复加载、加载无效的原因及解决方案的更多相关文章

  1. Vue2 框架开发的单页程序页面首次加载慢的原因与优化方案

    在用Vue2 框架进行单页面开发时,开发完成后项目打包到线上环境,发现vendor脚本有963K,app.css文件也有四百多k,用户第一次打开网页加载这两个文件要十多秒,会使页面白屏十多秒,之后再次 ...

  2. iOS开发——加载、滑动翻阅大量图片解决方案详解

    加载.滑动翻阅大量图片解决方案详解     今天分享一下私人相册中,读取加载.滑动翻阅大量图片解决方案,我想强调的是,编程思想无关乎平台限制. 我要详细说一下,在缩略图界面点击任意小缩略图后,进入高清 ...

  3. Android高效加载大图、多图解决方案,有效避免程序内存溢出现象

    好久没有写博客了,今天就先写一个小的关于在Android中加载大图如何避免内存溢出的问题. 后面会写如何使用缓存技术的核心类,android.support.v4.util.LruCache来加载图片 ...

  4. C#连接Sqlite 出现:混合模式程序集是针对“v2.0.50727”版的运行时生成的,在没有配置其他信息的情况下,无法在 4.0 运行时中加载该程序集。的解决方案

    C#连接Sqlite 出现: 混合模式程序集是针对“v2.0.50727”版的运行时生成的,在没有配置其他信息的情况下,无法在 4.0 运行时中加载该程序集.的解决方案 C#连接sqlite数据库代码 ...

  5. Android UI之View的加载机制(二)

    转载请标明出处:http://blog.csdn.net/sk719887916/article/details/39961201,作者:skay 对于接触安卓开不到一年的自己来说,总结下view的生 ...

  6. 关于 Mybatis 设置懒加载无效的问题

    看了 mybatis 的教程,讲到关于mybatis 的懒加载的设置: 只需要在 mybatis 的配置文件中设置两个属性就可以了: <settings> <!-- 打开延迟加载的开 ...

  7. 9.【nuxt起步】-scroll分页加载

    面是单页,下面实现一个列表页和分页加载的例子 1.新建pages/list.vue <template> <div> 分页加载列表页面 </div> </te ...

  8. iOS开发UI篇-懒加载、重写setter方法赋值

    一.懒加载 1.懒加载定义 懒加载——也称为延迟加载,即在需要的时候才加载(效率低,占用内存小).所谓懒加载,写的是其get方法. 注意:如果是懒加载的话则一定要注意先判断是否已经有了,如果没有那么再 ...

  9. HTML prefetch 预加载无效的记录

    在link中新增: <link rel="prefetch" href="/view/search.html" /> 预加载会将内容缓存到浏览器, ...

随机推荐

  1. Python+Selenium学习--cookie处理

    场景 有时候我们需要验证浏览器中是否存在某个cookie,因为基于真实的cookie 的测试是无法通过白盒和集成测试完成的.webdriver 可以读取.添加和删除cookie 信息.webdrive ...

  2. [剑指Offer]7-重建二叉树

    链接 https://www.nowcoder.com/practice/8a19cbe657394eeaac2f6ea9b0f6fcf6?tpId=13&tqId=11157&tPa ...

  3. unknow Unknown type name 'NSString'

    转载:geweb 今天看到个问题,编辑工程提示Unknown type name 'NSString',如下图 导致出现异常的原因是是因为工程中添加了ZipArchive(第三方开源解压缩库) 一般情 ...

  4. Shell 数值、字符串比较

    Shell脚本中,数值与字符串比较是不同的,因此要注意(注意[]括号内参数和括号之间有一个空格). 一.数值比较 -eq 等于,如: if [ $a -eq $b ] -ne    不等于,如: if ...

  5. Solr定时导入功能实现

    需要实现Solr定时导入功能的话,我们可以通过使用Solr自身所集成的dataimportscheduler调度器实现 下载对应的jar包,下载地址https://code.google.com/ar ...

  6. java 小心使用float和double他可能不如你所想

    public static void main(String[] args) { double funds=1.00; ; // ; ;funds>=price;price+=.){ funds ...

  7. cpp 区块链模拟示例(一)工程建立

    /* 作 者: itdef 欢迎转帖 请保持文本完整并注明出处 技术博客 http://www.cnblogs.com/itdef/ 技术交流群 群号码:432336863欢迎c c++ window ...

  8. 解决 “access violation at address xxxxxxxxx”错误

    在进行磁盘整理的时候,打开Foxmail的时候出现了“access violation at address32383137”错误 和“access violation at address00000 ...

  9. PyCharm选择性忽略PEP8代码风格警告信息

    用了几天的PyCharm,发现确实在编写Python代码上非常好用,但有一点体验不太好,就是代码编写时要按照PEP8代码风格编写,不然会有波浪线的警告信息.解决方法如下: 方法一: 将鼠标移到提示的地 ...

  10. 单色三角形(hdu-5072

    单色三角形模型:空间里有n个点,任意三点不共线.每两个点之间都用红色或者黑色线段链接.如果一个三角形的三条边同色,责成这个三角形是单色三角形.对于给定的红色线段列表,找出单色三角形的个数. 分析:对于 ...