微信小程序触屏事件_上划下划事件

一、微信小程序触屏事件

bindtouchstart：手指触摸动作开始

bindtouchmove：手指触摸后移动

bindend：手指触摸动作结束

Touch 对象

二、自定义实现上划，下划处理

原理：触点从屏幕滑动距离，超过指定像素大小触发处理。

从Y轴方向判断，超出距离，上划下划

从X轴方向判断，超出距离，作划右划

wxml代码：

<view class="block" bind:touchstart="startEvent" bind:touchmove="moveEvent" data-id="10">
  <view class="blue">
    <view>
      X:{{pageX}}
    </view>
    <view>
      Y:{{pageY}}
    </view>
  </view>

  <view class="green">
    <view>
      X:{{pageX2}}
    </view>
    <view>
      Y:{{pageY2}}
    </view>
  </view>
  <!-- <view class="inblock" bind:touchstart="startEvent" data-id="11"></view>
  -->
</view>

js：

  startEvent(e) {
    var touches = e.touches;
    var touch = touches[0];
    var pageX = touch.pageX;
    var pageY = touch.pageY;

    this.setData({
      pageX: pageX,
      pageY
    })
  },
  moveEvent(e) {
    var touches = e.touches;
    var touch = touches[0];
    var pageX2 = touch.pageX;
    var pageY2 = touch.pageY;
    var pageX = this.data.pageX;
    var pageY = this.data.pageY;
    this.setData({
      pageX2,
      pageY2
    })
    //判断是否上划，是否下滑  50像素为参考
    if ((pageY2 - pageY) > 50) {
      console.info('下滑');
    }
    if ((pageY2 - pageY) < -50) {
      console.info('上滑动');
    }


  },

更多：

微信小程序事件绑定

微信小程序实现打分效果代码整理

微信小程序分享、转发朋友、分享朋友圈使用整理