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

一、微信小程序触屏事件

bindtouchstart：手指触摸动作开始

bindtouchmove：手指触摸后移动

bindend：手指触摸动作结束

属性	类型	说明
touches	Array	触摸事件，当前停留在屏幕中的触摸点信息的数组

Touch 对象

属性	类型	说明
identifier	Number	触摸点的标识符
pageX, pageY	Number	距离文档左上角的距离，文档的左上角为原点 ，横向为X轴，纵向为Y轴
clientX, clientY	Number	距离页面可显示区域（屏幕除去导航条）左上角距离，横向为X轴，纵向为Y轴

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

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

从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('上滑动');
    }


  },

更多：

微信小程序事件绑定

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

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