列表项按需加载 v-infinite-scroll 滚动条触底无效 解决方案

问题背景

后台返回的分页数据需要实现滚动条触底加载下一页， 用了element-ui 的 v-infinite-scroll 指令来实现。但是发现在某一分辨率下, 滚动条触底时未触发加载方法。

解决方法

在同一标签内将  infinite-scroll-distance 设置为 1 或其他合适的 >0 的数值， 此时滚动条触底可正常触发函数。 如果出现多次回调问题, 解决方法参见"后续优化"部分

原因分析

发现触发失效问题时， 首先检验滚动条触底时 selectedProductLoad 函数是否触发；

排查发现selectedProductLoad并未触发， 说明是 v-infinite-scroll  指令未生效；

此时手写了一个监听滚动条的方法，发现问题所在。

1.  
   mounted() {
2.  
   this.checkListScroll()
3.  
   },

1.  
   // clientHeight为内容可视区域的高度。
2.  
   // scrollTop为滚动条在Y轴上的滚动距离。
3.  
   // scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。
4.  
   // 从这个三个属性的介绍就可以看出来，滚动条到底部的条件即：
5.  
   // clientHeight scrollTop === scrollHeight
6.  
    
7.  
   checkListScroll() {
8.  
   const scrollElement = this.$refs.productList.$el
9.  
   scrollElement.addEventListener('scroll', () => {
10.  
    const clientHeight = scrollElement.clientHeight //
11.  
    const scrollTop = scrollElement.scrollTop
12.  
    const scrollHeight = scrollElement.scrollHeight
13.  
    console.log(clientHeight scrollTop, scrollHeight, '距离检验')
14.  
    if (clientHeight scrollTop === scrollHeight) {
15.  
    console.log('竖向滚动条已经滚动到底部')
16.  
    }
17.  
    })
18.  
    }

出现异常问题的分辨率下打印的值, 滚动条触底时 '竖向滚动条已经滚动到底部' 未打印, 即clientHeight scrollTop === scrollHeight 条件未满足

再来看正常分辨率下打印的值

 对比可知, 问题出在这一分辨率下高度值出现小数点而引发的精度问题, 此时只需要修改判断条件为区间值即可。修改后加载方法可正常触发。

此时问题可以解决了， 此时查阅资料发现，使用 v-infinite-scroll 时给标签添加 infinite-scroll-distance="1" 属性，即设置触发加载的距离阈值，也可解决这一精度带来的失效问题。

属性详见博文：http://t.csdn.cn/QPkSphttp://t.csdn.cn/QPkSp

infinite-scroll-distance 值怎么确定

原本我设置了 infinite-scroll-distance 值为1，此时发现在触底加载了几次之后， 又不生效了。

可见随着数据量的增大， 高度误差越来越大，超过了1，于是按照该列表总的数据量将infinite-scroll-distance 设置为3，此时列表可全部加载。

缺陷

分析可见， 使用 infinite-scroll-distance 属性需将值设置足够大才可以， 无法灵活应对数据量的增大。

后续优化

后续发现在设置滚动距离后, 出现滚动条触底多次触发回调的问题。

 如图， 本该触发一次回调却触发了两次甚至更多。

解决：结合 v-infinite-scroll 属性对代码做如下修改

重点: ① 添加disabled属性; ②设置定时器

参考文章: 

这篇好文章是转载于：学新通技术网