小程序判断滑动方向

最新推荐文章于 2024-06-27 09:54:38 发布

Bright2017

最新推荐文章于 2024-06-27 09:54:38 发布

阅读量6.9k

点赞数 3

分类专栏：微信小程序

微信小程序专栏收录该内容

48 篇文章 1 订阅

订阅专栏

WXML:
<view id="id" bindtouchstart="handletouchtart" bindtouchmove="handletouchmove"
style="width:100%px;height:80px;line-height:80px;color:#fff;text-align:center; background:red">
{{text}} 
</view>

index.js

Page({
  data: {
    lastX: 0,
    lastY: 0,
    text: "没有滑动",
  },
  handletouchmove: function (event) {
    // console.log(event)
    let currentX = event.touches[0].pageX
    let currentY = event.touches[0].pageY
    let tx = currentX - this.data.lastX
    let ty = currentY - this.data.lastY
    let text = ""

    if (Math.abs(tx) > Math.abs(ty)) {
      //左右方向滑动
      if (tx < 0)
        text = "向左滑动"
      else if (tx > 0)
        text = "向右滑动"
    }
    else {
      //上下方向滑动
      if (ty < 0)
        text = "向上滑动"
      else if (ty > 0)
        text = "向下滑动"
    }

    //将当前坐标进行保存以进行下一次计算
    this.data.lastX = currentX
    this.data.lastY = currentY
    this.setData({
      text: text,
    });

  },
  handletouchtart: function (event) {
    // console.log(event)
    // 赋值
    this.data.lastX = event.touches[0].pageX
    this.data.lastY = event.touches[0].pageY
  }
})

转载地址:https://www.cnblogs.com/changxue/p/8466836.html