【微信小程序】---- 监听页面停止滚动

1. 场景需求

页面页脚部分有一面积高300px的浮窗，遮挡页面很严重，但是浮窗的内容又很重要；业务需求，当页面滚动的时候，浮窗隐藏，页面停止滚动的时候浮窗显示！

2. 需求分析

1. 监听页面滚动停止动作，没有这类监听的函数，但是我们可以监听页面滚动 onPageScroll；
2. 显示和隐藏浮窗，这一步很好操作，直接一 Boolean 变量 false or true，就能解决；

3. 解决思路

1. 如何在页面滚动监听的函数中知道页面停止滚动？ 1.1 方法一：对比前后两次的滚动变量 scrollTop; 1.2 延迟执行显示方法 setTimeout;

4. 方法实践

1. 由于对比 scrollTop 的值前后是否相同，依然需要知道滚动已经停止，所以经过实验发现多余，直接放弃；
2. 在页面滚动的时候，获取控制显示和隐藏的变量 show;
3. 判断 show 是否为 true，为true 就设置为 false，进行隐藏；【防止粗暴的滚动就设置false，这样就会导致setData调用频繁，消耗性能】
4. 如果一直在滚动，就清除上一次的 this.timer；【此处必须清除，防止一直滚动，创建多个倒计时，消耗性能，而且还会显示浮窗，不满足设计需求】
5. 当前滚动建立一个200ms的倒计时，200ms没有执行 onPageScroll 函数，说明页面已停止滚动，当然时间可以相对更短，但是浮窗就会出现闪动，体验效果不好，经我测试200ms是体验相对好的节点；【时间可以更具自己需求设置】
6. 倒计时执行完成，说明滚动停止，执行显示操作，注意同时清除倒计时。

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. 总结

1. 解决问题的方法很多，仅提供解决问题的思路；
2. 延迟执行的操作，可能在其他时候依然用到，可以封装简化；

6. 最终代码

delayhandler 为封装后的延迟操作函数！

onPageScroll(){
    let { show } = this.data
    if(show)this.setData({show: false})
    this.$api.delayhandler(200).then(res => this.setData({show: true}))
  }