目录
业务场景
本次项目需求是做一套类似于拼多多拼团活动的项目,在活动商品详情页会有一个该商品的快速参团列表,列表必须在一定时间段内无限滚动,由于涉及到了倒计时的原因,故将其抽离出去封装成了一个组件。如图
发现问题
最开始想到的是使用swiper组件,但是后期发现在swiper设置了display-multiple-items属性后,如果当前页的item数小于该值,是不会显示的,当时也没多想就直接用scroll-view代替(其实swiper组件在区分数据长度的情况下也能实现),问题来了,在我使用了scroll-view组建后,运动函数得自定义了,并且在组件隐藏和卸载后都必须将运动函数的定时器给清除掉,不然会造成内存泄漏。
分析解决问题
- 在组件承载页面卸载(组件卸载)后清楚计时器。
组件生命周期:
Component({
lifetimes: {
attached: function() {
// 在组件实例进入页面节点树时执行
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
},
// 以下是旧式的定义方式,可以保持对 <2.2.3 版本基础库的兼容
attached: function() {
// 在组件实例进入页面节点树时执行
},
detached: function() {
// 在组件实例被从页面节点树移除时执行
},
// ...
})
如图只需在detached勾子函数中去清除计时器。
注意:不是包含在lifetimes对象中的detached勾子函数,我当时就在这儿踩坑了。
- 在组件承载页面(组件所在页面)隐藏后清楚计时器。
这个问题就要考虑到组件所在页面的生命周期了:
Component({
pageLifetimes: {
show: function() {
// 页面被展示
},
hide: function() {
// 页面被隐藏
// 在这里进行清除计时器的操作
},
resize: function(size) {
// 页面尺寸变化
}
}
})
页面隐藏后清除计时器,所以我们选择在hide勾子中添加清楚计时器逻辑。
注意:如果遇到跟我类似的场景一定要考虑这两种情况。(我当时只考虑了组件页面被卸载这一种情况)
更多内容请参考官方文档:组件的生命周期
总结
遇到问题,经过思考分析后,查资料最先考虑必须是官方文档,因为看文档能够解决70%的问题,
今天这个问题虽然不复杂但是卡了很久,必须记录一下,希望能够帮到志同道合的朋友,再见!!