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

Posted 2022-08-16 铁锤妹妹@

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>