better-scroll 遇到的问题 3 (transition-group 相关)
2017-06-29 11:44
405 查看
今天在使用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 延后执行的时间
问题描述:
我写了一个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 延后执行的时间
相关文章推荐
- better-scroll 遇到的问题 2
- vue 中使用better-scroll 遇到的问题
- better-scroll 遇到的问题 1
- 饿了吗第七章better-scroll 中$els 相关问题
- Vue中使用better-scroll所遇到的若干问题
- [项目过程中所遇到的各种问题记录]编辑器篇——FCKeditor相关知识及各种常见使用问题
- WIN7下.Net开发遇到的又一问题:HTTP 错误 500.19 - Internal Server Error,无法访问请求的页面,因为该页的相关配置数据无效。
- 遇到C语言相关的两个问题让我心情压抑
- eVC编程遇到的各种问题之——串口相关
- 在做Asp.Net开发的时候,经常会遇到页面乱码的问题,下面是在网上收集的相关资料,请大家参考:
- 加载源代码到android模拟器中遇到的相关问题
- [项目过程中所遇到的各种问题记录]编辑器篇——FCKeditor相关知识及各种常见使用问题
- C++调用matlab时可能遇到的问题和相关设置
- 关于Extjs中radioGroup、checkBoxGroup、comboBox渲染div的问题,跟DOM相关
- 关于android中多线程相关遇到的问题总结
- 最近遇到了 manifest 的相关问题的记录
- linux+11g R2 ORACLE 安装过程及遇到相关问题解决方案
- 遇到C语言相关的两个问题让我心情压抑
- Apusic1.1.2安装过程中遇到的jdk相关问题解答
- 重新安装系统之后遇到的WK相关的两个问题