better-scroll 遇到的问题 3 （transition-group 相关）

今天在使用vue动画 transition-group 和 better-scroll 的时候，出现了下拉列表不能滚动的问题。

• 问题描述：

我写了一个scroll的基础组件，组件接受一个data参数，监听data数据发生变化，就延迟20毫秒，调用scroll 的refresh 方法，从新计算高度，在一般情况下，是没有问题的。 后面，客户说，当给列表添加，或者删除歌曲的时候，太过于生硬，想要些平滑的效果，所以我就使用了 transition-group 给列表的添加动画，结果就出现了添加歌曲的时候，下拉不到底部的情况

 

• 问题出现的原因：

transition-group 动画，我给的时间是200毫秒， 由于动画200毫秒才执行完成，所以200毫秒后，dom才操作完成，不过scroll的基础组件监听到数据变化后20毫秒就执行refresh，此时，dom还没有完成渲染，所以计算错误 

 

• 解决方案：

scroll的基础组件里面的 refresh 方法之前是监听到数据变化后20毫秒就执行，将20毫秒改为 可以接受外部传递过来的 refreshDelay 变量，默认值是20，如果使用了transition-group 动画，那么给scroll 组件传递一个refreshDelay  参数，就可以改变refresh 延后执行的时间 

 

转载于:https://www.cnblogs.com/vs1435/p/7093634.html