小程序判断滑动方向

偏执的太偏执、 2022-05-11 07:40 267阅读 0赞

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][https_www.cnblogs.com_changxue_p_8466836.html]

[https_www.cnblogs.com_changxue_p_8466836.html]: https://www.cnblogs.com/changxue/p/8466836.html

发表评论取消回复

表情：

评论列表（有 0 条评论，267人围观）

还没有评论，来说两句吧...

相关阅读

相关小程序 slider 双向滑动

上效果图，csdn不支持视频，这是手机录屏做成的gif，所以画质有点。。 ![20190920133405935.gif][] 直接上代码，小程序暂时不支持slide...

Love The Way You Lie/ 2024年04月20日 08:24/ 0 赞/ 72 阅读

相关移动端判断用户手指滑动的方向

$(function(){ var startX,startY; var endX,endY; var distance=30;

亦凉/ 2023年07月24日 02:23/ 0 赞/ 9 阅读

相关小程序实现标尺滑动

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

不念不忘少年蓝@/ 2023年06月10日 15:28/ 0 赞/ 192 阅读

相关小程序--微信小程序侧边栏滑动特效(左右滑动)

侧边栏滑动是很常见的功能，但是小程序出来不久，很多特效还没有成熟案例，只能原生重写，所以今天为大家带来4个漂亮的侧边栏特效~~ 侧边栏特效一先看效果： ![d80967

约定不等于承诺〃/ 2022年10月06日 00:58/ 0 赞/ 19 阅读

相关小程序--左侧滑动效果

一、效果图讲什么都不如直接上效果图好，所以我们先来看下实现效果如何。通过滑动屏幕，或者点击左上角的图标按钮，都能实现侧边栏的划出效果。 ![70][]![

「爱情、让人受尽委屈。」/ 2022年10月06日 00:57/ 0 赞/ 182 阅读

相关小程序-左右滑动效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

Dear 丶/ 2022年10月06日 00:57/ 0 赞/ 28 阅读

相关系统最小滑动判断距离打印

大于这个距离滑动才被判定为滑动 Log.d(TAG, "滑动判断距离 = "+ViewConfiguration.get(getBaseContext()).getS

灰太狼/ 2022年06月14日 07:49/ 0 赞/ 192 阅读

相关小程序滑动悬浮tab

效果图： ![SouthEast][] 介绍： 1，首先写一个tab的template组件； 2，自定义一个滑动悬浮的组件flaot-tab； 3，计算滑

素颜马尾好姑娘i/ 2022年06月01日 01:14/ 0 赞/ 253 阅读

相关小程序-监听手势滑动

步奏: 添加两个事件(手指按下时,手指松开时) bindtouchstart="touchStart" //开始 bindtouchend="touchE

港控/mmm°/ 2022年05月18日 00:54/ 0 赞/ 287 阅读

相关小程序判断滑动方向

WXML: <view id="id" bindtouchstart="handletouchtart" bindtouchmove="handletouchm

偏执的太偏执、/ 2022年05月11日 07:40/ 0 赞/ 268 阅读