我们在做pc时,一般的数据都会使用表格进行数据的分页处理,但是当到移动端时,我们对数据的处理一般都会使用列表的显示方式。这样的开发模式我们就会使用到elementui InfiniteScroll 无限滚动。
根据文档这部分,写了我的代码,开始长下面这样子…结果发现了一个问题,就是进入页面之后像是 infinite-scroll-disabled和infinite-scroll-immediate没有生效似的,页面疯狂调用onLoad函数。
elementui InfiniteScroll 无限滚动的具体的用法可以查看官方的开发文档:
基础用法
在要实现滚动加载的列表上上添加v-infinite-scroll
,并赋值相应的加载方法,可实现滚动到底部时自动执行加载方法。
案例代码:
<template>
<ul class="infinite-list" v-infinite-scroll="load" style="overflow:auto">
<li v-for="i in count" class="infinite-list-item">{{ i }}</li>
</ul>
</template>
<script>
export default {
data () {
return {
count: 0
}
},
methods: {
load () {
this.count += 2
}
}
}
</script>
看起来用起来很方便 ,但是在我在移动端使用时却出现了问题:
在我开发时,将v-infinite-scroll 添加到了for 循环生成的盒子父级节点上,数据
是有了,数据也进行分页拿到了全部数据,但是出现了一个大问题,就是在我刚进入页面之后,v-infinite-scroll所绑定方法就立即启动了,并且在我没有任何操作下,v-infinite-scroll一直在拉取数据,并没有向上滑动进行加载的效果。也就是会出现,一直请求的情况。
解决办法:
我在csdn上搜索了很多解决方案,比如:
1、包含的UI 需要设置固定的高度,或者与视图同高,height:100%。
2、未设置距离多少像素加载在ul标签中加入 infinite-scroll-distance="10" //距离10px加载。
然而对我,仅仅对我来说,没啥用。
后来,我又查了一下v-infinite-scroll的底层逻辑,其实也没有多麻烦,这个组件呢主要是监听滚动条的动态,当滚动条触底,或者达到某个阈值时,就会触发所绑定的方法。上面的方法并没有错误,在使用这个组件时,容器一定要有高度。不然就会无线加载。
而我在做移动端开发时因为业务需求,并没有对下面的数据列表限制高度,而是任由它去把盒子撑大,。对了还有一点很重要,在哪个容器使用v-infinite-scroll组件,哪个容器的滚动条就会被监听。这点很重要。
也就是说页面发送请求之后,所拿到的数据一直在撑大自身的盒子,自身的盒子又一直在撑大body的盒子,所以我们看到的滚动条其实是body的滚动条,而存放数据的盒子也的滚动条一直在触底触发方法。所以就会出现无限触发方法。
知道了问题所在,那我们需要做的无非就是添加v-infinite-scroll的位置,并且给需要使用该组件的盒子一个合适的高度。(如果高度不合适会出现双滚动条哦)。
像我的业务需求,在不影响样式的情况下使用无限滚动,就只能监听全局的滚动条了。