[youzan/vant]waterfall 瀑布流无限加载问题

2024-05-22 723 views
7

当页面的列表滑动到距离底部小于阈值的距离时,会触发加载方法,此时有两种情况:

  • 1,当前刷新没有更多数据,如果使waterfall-disabled为true,则不会触发无限加载,因为禁用了瀑布流的触发,但是瀑布流也不能再次下拉了;如果只是当前次刷新没有更多数据呢?下一次可能就有新数据了。
  • 2,无论当前有没有更多数据,如果使waterfall-disabled为false,且如果列表的实际高度没有更改,则会触发无限加载,可能组件只是根据距离底部的阈值进行了判断,理想中应该时获取到了数据,高度肯定会变高,而此时列表高度不变则会被认定为小于阈值,于是无限触发事件。

回答

9

上次试着找了一个别的插件,用着也不理想,大神能不能优化一下啊?

5

@YYQ8023

  1. 如果一段时间后可能会产生新数据,你可以在一定时间后将 disabled 设置成 false
  2. 避免无限加载的方法是每次触发 load 时将 disabled 设置成 true,然后在数据加载完成后再设置成 false

从组件的角度来看,这两种情况都是没法默认覆盖的,需要使用方根据业务需求进行灵活控制

8

@chenjiahan
1.这样做可以勉强解决问题,但是这样就会在一定时间内不能再次下拉刷新了,这就需要去考虑这个“一定事件”设为多少比较合适。还有,如果在“一定时间”之后,设置为可用,那么如果列表还在最下面,又会自动去触发加载事件,如果这一次又没有新数据,那么又得设置为不可用,然后在“一定时间”之后设为可用,循环下去。 2.disabled设置为true其实和第一点差不多,就是在加载的时候禁用下拉,可是加载完之后呢,如果列表的高度和加载前的接近,或者直接就是没有新数据,这个时候设置为false就会继续加载。

总结起来: 每一次触发下拉加载的时候,先禁用下拉,然后去获取数据,接着无论有没有获取到数据,都会取消禁用,这就完成了一次下拉加载。 理想中:此时如果高度变化不大,就不继续触发加载方法了(虽然列表离底部距离小于阈值,且disabled为false)。 我的想法是,触发了一次加载之后,只有当列表向上滑动了一定距离,即列表距离底部的距离大于(或等于)阈值一次之后,才能再次触发下拉刷新。其实如果加载完有更多数据,那肯定没问题,而且此时新的列表离底部的距离一般来说都会大于阈值了,于是就又可以下拉刷新了。而如果加载之后,距离变化不大,那么下拉就禁用了,如果此时往上滑,且滑动之后列表距离底部的距离大于阈值,那么下拉就不再禁用了。

7

@YYQ8023 你的方案理论上可行,不过实现起来比较复杂,我们短期内估计不会支持~ 如果你有这样的需求,建议在业务中自己实现

3

我去研究一下源码,看看能不能提个PR,哈哈哈~~~~

8

估计提不了。。。水平不够。。。

4

滚动盒子需要设置 ul { max-height: 360px; overflow: scroll; } 或者直接修改组件 packages/waterfall/directive.js 123 虽然不算 Bug 但是文档里面没有写 https://www.youzanyun.com/zanui/vant#/zh-CN/component/waterfall 希望官方更新下文档,说明下瀑布流组件需要设置高度和滚动。