首页 > 编程语言 >微信小程序中滚动事件deltaX值的含义

微信小程序中滚动事件deltaX值的含义

时间:2023-02-28 16:13:59浏览次数:41  
标签:end deltaX 微信 number start 滚动 event

以横向滚动为例,
上代码:
uniapp

<scroll-view class="scroll-box" scroll-x @scroll="scroll" :scroll-with-animation="true" enable-flex >
      <view class="swiper-item content"></view>
</scroll-view>

let start:number,end:number
const scroll = debounce(
  (event: { detail: { deltaX: number; scrollLeft: number } }) => {
    const { scrollLeft: x, deltaX } = event.detail
    if(!start){
      start = x
    }

    console.log(x,end - x, deltaX)
    end = x

  },
  10,
  { maxWait: 1000 }
)

运行代码后你会发现end - x === deltaX,deltaX表示方向同时表示滚动单位时间内的滚动距离,上面的示例是单位时间为10ms,距离/时间=速度,再加上滚动阻尼系数就能确定滚动位置的终点了。

标签:end,deltaX,微信,number,start,滚动,event
From: https://www.cnblogs.com/johnv/p/17164646.html

相关文章