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

天马3798

已于 2024-03-02 15:38:32 修改

阅读量728

点赞数 5

分类专栏：微信小程序文章标签：微信小程序小程序触屏事件上划下划事件

于 2024-03-02 15:37:55 首次发布

本文链接：https://blog.csdn.net/u011127019/article/details/136416707

版权

微信小程序专栏收录该内容

29 篇文章 5 订阅

订阅专栏

一、微信小程序触屏事件

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


  },