微信小程序-添加倒计时模块后页面滑动时抖动问题

找bug最怕方向错误,方向一旦错了,在bug的漩涡之中苦苦挣扎,可能几个小时过去,还是一无所获。

需求:在首页模块添加抢券模块,距离开抢两小时的时候开启倒计时模块

问题: 当页面上开启倒计时后,页面无论向上还是向下滑动,屏幕会快速闪烁

解决: 

1. 第一阶段 开始定位:可能是倒计时写的有问题,因为使用setData不断的对倒计时的timer进行的赋值,难道是不停的赋值使得页面闪烁么,还是每次赋值前没有清空定时器(这时忽略了一个很重要的问题,是滑动的时候才有闪烁和抖动问题),所以一直纠结在这个问题上,不断的调整定时器的写法。

2. 第二阶段:开始考虑到是不是页面滑动的问题,在google的时候使用 微信小程序、倒计时、滑动等关键词,搜索出的主要解决方案都是修改页面的配置 enablePullDownRefresh,disableScroll等,修改页面的onPageScroll等事件,均无效果,并不是方法的问题,根本上是问题定位不准确。

3. 第三阶段:由于耗费了几个小时也没有解决,决定放空一下之后再继续。后来发现第二阶段方法失效的根本原因是页面滚动使用了scroll-view组件(页面和功能之前是同事写的,自己并没有仔细研究,就草草开始了找bug之旅),定位到scroll-view之后,瞬间感觉豁然开朗,经过看文档和在google的帮助下,终于确定是由于每次定时器数据的变化,scroll-view组件在每次内容发生的变化的时候可能会引起抖动问题。

4. 第四阶段: 放弃scroll-view,监听page页面的onPageScroll事件实现页面滚动效果,在onReachBottom中进行接口调用实现页面的上拉加载更多功能。

5. 结束: 小白一枚,在此记录自己的踩坑之旅,如有错误,欢迎随时指正。

原文地址:https://www.cnblogs.com/jjworld/p/14272648.html