better-scroll 遇到的问题 3 (transition-group 相关)
2024-10-20 03:16:39
今天在使用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 延后执行的时间
最新文章
- Java消息队列--ActiveMq 实战
- java运行jar命令提示没有主清单属性
- id 和 instancetype
- thread_CyclicBarrier回环栅栏
- CentOS 关闭蜂鸣器声音
- C++ delete operator做了什么事
- DTD约束文件
- 无法找到AdbWinApi.dll问题解决 .
- (原)torch和caffe中的BatchNorm层
- USB3.0 和usb 2.0的区别
- 【转】从底层了解ASP.NET体系结构
- ios 开发证书 appids 描述文件关系
- angularjs 水平滚动选中按钮高亮显示 swiper和回到顶部指令的实现ionic
- Spring+SpringMVC+MyBatis集成学习笔记【一】
- 终于知道如何使Tab控件的不出现白边的方法了
- JavaScript 异步编程的前世今生(下)
- [Swift]LeetCode611. 有效三角形的个数 | Valid Triangle Number
- 一张图看懂AI、机器学习和深度学习的区别
- python远程执行dos命令
- 【398】COMP9021 - Polynomial