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

问题背景

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

解决方法

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

原因分析

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

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

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

  mounted() {
    this.checkListScroll()
  },

//    clientHeight为内容可视区域的高度。
//    scrollTop为滚动条在Y轴上的滚动距离。
//    scrollHeight为内容可视区域的高度加上溢出（滚动）的距离。
//    从这个三个属性的介绍就可以看出来，滚动条到底部的条件即：
//    clientHeight + scrollTop === scrollHeight    

    checkListScroll() {
      const scrollElement = this.$refs.productList.$el
      scrollElement.addEventListener('scroll', () => {
        const clientHeight = scrollElement.clientHeight // 
        const scrollTop = scrollElement.scrollTop
        const scrollHeight = scrollElement.scrollHeight
        console.log(clientHeight + scrollTop, scrollHeight, '距离检验')
        if (clientHeight + scrollTop === scrollHeight) {
          console.log('竖向滚动条已经滚动到底部')
        }
      })
    }

出现异常问题的分辨率下打印的值, 滚动条触底时 '竖向滚动条已经滚动到底部' 未打印, 即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属性; ②设置定时器

参考文章: 

vue-infinite-scroll的使用细节介绍_jincheng_的博客-CSDN博客

vue-infinite-scroll使用笔记_infinitescroll 样式更换_markkr133的博客-CSDN博客