小程序-监听手势滑动

港控/mmm° 2022-05-18 00:54 302阅读 0赞

## 步奏: 添加两个事件(手指按下时,手指松开时) ##

bindtouchstart="touchStart" //开始
    bindtouchend="touchEnd"//结束

即:wxml

<view bindtouchstart="touchStart" bindtouchend="touchEnd" ></view>

wjs:

let touchDotX = 0;//X按下时坐标
    let touchDotY = 0;//y按下时坐标
    let interval;//计时器
    let time = 0;//从按下到松开共多少时间*100
    // 触摸开始事件
      touchStart: function(e) { 
        touchDotX = e.touches[0].pageX; // 获取触摸时的原点
        touchDotY = e.touches[0].pageY;
        // 使用js计时器记录时间 
        interval = setInterval(function() { 
          time++;
        }, 100);
      },
      // 触摸结束事件
      touchEnd: function(e) { 
        let touchMoveX = e.changedTouches[0].pageX;
        let touchMoveY = e.changedTouches[0].pageY;
        let tmX = touchMoveX - touchDotX;
        let tmY = touchMoveY - touchDotY;
        if (time < 20) {
          let absX = Math.abs(tmX);
          let absY = Math.abs(tmY);
          if (absX > 2 * absY) {
            if (tmX<0){
              console.log("左滑=====")
            }else{
              console.log("右滑=====")
            }
          }
          if (absY > absX * 2 && tmY<0) {
            console.log("上滑动=====")
          }
        }
        clearInterval(interval); // 清除setInterval
        time = 0;
      }

发表评论取消回复

表情：

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

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

相关阅读

相关 NestScrollView滑动监听

mNestedScrollView = (NestedScrollView) findViewById(R.id.nested\_scroll\_view); re = (

旧城等待，/ 2024年02月19日 15:42/ 0 赞/ 66 阅读

相关小程序实现标尺滑动

效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3

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

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

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

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

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

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhp

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

相关 Android 手势监听之双击监听

超级简单的自定义view package yesun.app7; import android.content.Context; impor

古城微笑少年丶/ 2022年09月26日 11:48/ 0 赞/ 181 阅读

相关小程序滑动悬浮tab

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

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

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

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

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

相关微信下程序(手势滑动图片缩放)

微信下程序(手势滑动图片缩放)组件先看效果: ![手势缩放图片并移动][20181030131810-8FlDtlpwf7.gif] 1. 下载组件 [手势缩放组

柔光的暖阳◎/ 2022年05月15日 15:14/ 0 赞/ 314 阅读

相关小程序判断滑动方向

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

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

相关了解过微信小程序手势滑动吗？

wxml: <view bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="t

淡淡的烟草味﹌/ 2021年09月30日 15:54/ 0 赞/ 283 阅读