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

淡淡的烟草味﹌ 2021-09-30 15:54 275阅读 0赞

## wxml: ##

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

## index.js: ##

var touchStartX = 0;//触摸时的原点 
    var touchStartY = 0;//触摸时的原点 
    var time = 0;// 时间记录，用于滑动时且时间小于1s则执行左右滑动 
    var interval = "";// 记录/清理时间记录 
    var touchMoveX = 0; // x轴方向移动的距离
    var touchMoveY = 0; // y轴方向移动的距离
    
    Page({ 
    
    // 触摸开始事件 
      touchStart: function (e) { 
        touchStartX = e.touches[0].pageX; // 获取触摸时的原点 
        touchStartY = e.touches[0].pageY; // 获取触摸时的原点 
        // 使用js计时器记录时间 
        interval = setInterval(function () { 
          time++;
        }, 100);
      },
      // 触摸移动事件 
      touchMove: function (e) { 
        touchMoveX = e.touches[0].pageX;
        touchMoveY = e.touches[0].pageY;
      },
      // 触摸结束事件 
      touchEnd: function (e) { 
        var moveX = touchMoveX - touchStartX
        var moveY = touchMoveY - touchStartY
        if (Math.sign(moveX) == -1) { 
          moveX = moveX * -1
        }
        if (Math.sign(moveY) == -1) { 
          moveY = moveY * -1
        }
        if (moveX <= moveY) { // 上下
          // 向上滑动
          if (touchMoveY - touchStartY <= -30 && time < 10) { 
            console.log("向上滑动")
          }
          // 向下滑动 
          if (touchMoveY - touchStartY >= 30 && time < 10) { 
            console.log('向下滑动 ');
          }
        }else { // 左右
          // 向左滑动
          if (touchMoveX - touchStartX <= -30 && time < 10) { 
            console.log("左滑页面")
          }
          // 向右滑动 
          if (touchMoveX - touchStartX >= 30 && time < 10) { 
            console.log('向右滑动');
          }
        }
        clearInterval(interval); // 清除setInterval 
        time = 0;
      },  
    })

发表评论取消回复

表情：

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

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

相关阅读

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

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

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

相关微信小程序顶部滑动tab

小程序商品展示需要导航栏的商品分类进行滑动效果图： ![SouthEast][] ![SouthEast 1][] 首先是滑动的效果： <scroll

向右看齐/ 2022年06月01日 02:06/ 0 赞/ 397 阅读

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

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

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

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

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

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

相关微信小程序系列 -- 触摸滑动事件

微信小程序通过三个事件共同作用实现了触摸滑动事件，即 `bingtouchstart`、`bindtouchmove` 和 `bindtouchend` 事件。 WXML：

以你之姓@/ 2022年04月03日 16:56/ 0 赞/ 2230 阅读

相关微信小程序---左右滑动（图片列表）

index.wxml: <view class="scroll_box" > <scroll-view class="scroll-view_

谁借莪１个温暖的怀抱￠/ 2022年03月09日 16:26/ 0 赞/ 496 阅读

相关微信小程序横向图片左右滑动

wxml代码 <scroll-view scroll-x="true"> <view class="banner" scroll-x="true

逃离我推掉我的手/ 2021年10月19日 05:56/ 0 赞/ 537 阅读

相关微信小程序swiper禁止手动滑动

做了个中奖的公告栏滚动不小心就点到滑动，如图 ![在这里插入图片描述][20190816181711409.png] 不符合需求，所以需要禁掉，下面是步骤，想看上

待我称王封你为后i/ 2021年10月18日 05:58/ 0 赞/ 465 阅读

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

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

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

相关了解一下微信小程序支付

<view class="container"> <input type="text" bindinput="getOrderCode" style="

落日映苍穹つ/ 2021年09月18日 23:34/ 0 赞/ 324 阅读