1. 场景需求
页面页脚部分有一面积高300px的浮窗,遮挡页面很严重,但是浮窗的内容又很重要;业务需求,当页面滚动的时候,浮窗隐藏,页面停止滚动的时候浮窗显示!
2. 需求分析
- 监听页面滚动停止动作,没有这类监听的函数,但是我们可以监听页面滚动 onPageScroll;
- 显示和隐藏浮窗,这一步很好操作,直接一 Boolean 变量 false or true,就能解决;
3. 解决思路
- 如何在页面滚动监听的函数中知道页面停止滚动?
1.1 方法一:对比前后两次的滚动变量 scrollTop;
1.2 延迟执行显示方法 setTimeout;
4. 方法实践
- 由于对比 scrollTop 的值前后是否相同,依然需要知道滚动已经停止,所以经过实验发现多余,直接放弃;
- 在页面滚动的时候,获取控制显示和隐藏的变量 show;
- 判断 show 是否为 true,为true 就设置为 false,进行隐藏;【防止粗暴的滚动就设置false,这样就会导致setData调用频繁,消耗性能】
- 如果一直在滚动,就清除上一次的 this.timer;【此处必须清除,防止一直滚动,创建多个倒计时,消耗性能,而且还会显示浮窗,不满足设计需求】
- 当前滚动建立一个200ms的倒计时,200ms没有执行 onPageScroll 函数,说明页面已停止滚动,当然时间可以相对更短,但是浮窗就会出现闪动,体验效果不好,经我测试200ms是体验相对好的节点;【时间可以更具自己需求设置】
- 倒计时执行完成,说明滚动停止,执行显示操作,注意同时清除倒计时。
onPageScroll(){
let { show } = this.data
if(show)this.setData({show: false})
clearTimeout(this.timer)
this.timer = setTimeout(res => {
this.setData({show: true})
clearTimeout(this.timer)
},200)
}
5. 总结
- 解决问题的方法很多,仅提供解决问题的思路;
- 延迟执行的操作,可能在其他时候依然用到,可以封装简化;
6. 最终代码
delayhandler 为封装后的延迟操作函数!
onPageScroll(){
let { show } = this.data
if(show)this.setData({show: false})
this.$api.delayhandler(200).then(res => this.setData({show: true}))
}