【微信小程序】---- 监听页面停止滚动
2023-04-18 16:59:03 时间
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}))
}
相关文章
- 一个Java程序员对2011年的回顾
- 大数据发展历程
- Android高级进阶之路【一】Android中View绘制流程浅析
- 可信服务管理(Trusted Service Manager)介绍
- GIS应用|快速开发REST空间分析服务
- 未来十年微软长盛不衰的两项战略
- 领域驱动设计模式的收益与挑战
- cocos 3.0 一键打包android平台应该注意的细节
- 数智化时代,驱动企业转型升级的“三驾马车”是什么?
- 基于MINA构建高性能的NIO应用
- 使用Rainbond实现离线环境软件交付
- 工作流引擎 jBPM 5.2 发布
- 微信小程序Minium自动化测试(三)
- 桌面应用抢先体验,这次有点料!
- 甲骨文Java专利遭拒 起诉Android侵权受挫
- 云计算的应用领域及发展前景
- Java效率真的很低吗?Android为何要采用?
- Android高级进阶之路【二】十分钟彻底弄明白 View 事件分发机制
- 庖丁解牛之-Android平台RTSP|RTMP播放器设计
- 手机直付,超级方便