uniapp监听页面滚动结束的解决方法

1. 想实现的效果

防美团外卖滚动时购物车的状态。

页面滚动停止

页面滚动中

2. 遇到的问题

uniapp中监听页面滚动的生命周期函数是onPageScroll()，但是无法判断滚动结束。

3. 解决方案

在data中定义timer变量，用来记录定时器状态，在滚动期间，一直清除延时事件，一旦空了N秒（N根据需求自己调整），就判定为滚动停止。

4. 实现代码

提前定义好移动效果class类名，removeRightX和removeLeftX

<template>
    <view :class="[transformClass?'removeRightX':'removeLeftX','shopCart']">
      <image src="@/static/shopping_cart.png" class="cartIcon" />
      <u-badge max="99" :value="shopValue" shape="horn" :absolute="true" :offset="badgeOffset" bgColor="#E84738"></u-badge>
    </view>
  </template>
  <script>
  export default {
  data() {
    return {
      transformClass: false, //购物车icon是否添加平移效果
      timer: '', //记录定时器状态
    }
  },
  </script>
  onPageScroll(e) {
    this.transformClass = true  //要添加的class类名
    console.log('开始滚动')
    clearTimeout(this.timer) //这里必须要每次滚动前 清除一次
    // 如果停留则表示滚动结束  一旦空了1s就判定为滚动结束
    this.timer = setTimeout(() => {
      console.log('结束滚动')
      this.transformClass = false //滚动结束清除class类名
    }, 1000)
  }
  <style lang="scss" scoped>
   .removeRightX {
    transform: translateX(70upx);
    transition: all 0.5s ease;
  }
  .removeLeftX {
    transform: translateX(0);
    transition: all 0.5s ease;
  }
  </style>