小程序开发 触控事件

效果图

代码

.js

Page({

    /**
     * 页面的初始数据
     */
    data: {
        inputContent:0,
    },

    editText:function(e){
        this.setData({
            inputContent: e.detail.value
        })
    },
    buttontap:function(e){
        // 拿到 data-operation= 传入的值
        const operation = e.currentTarget.dataset.operation
        this.setData({
            inputContent: this.data.inputContent + operation
        })
    },

.wxml

<!--pages/home/home.wxml-->

<input class="inputstyle" bindinput="editText"/>

<view>输入内容 = {{inputContent}}</view>

<button bindtap="buttontap" data-operation="{{1}}" >加</button>

<button bindtap="buttontap" data-operation="{{-1}}" >减</button>

.wxss

.inputstyle{
    /* 红色边框线 */
    border: 1px solid red;
    /* 圆角 */
    border-radius: 10%;
    /* 外边距 */
    margin: 10px;
    /* 内边距 */
    padding: 10px;
    /* 文字颜色 */
    color: brown;
}

函数返回参数的结构

在上面的例子中我们可以外部获悉参数是从 e.currentTarget.dataset.operation 取得的，实际触控事件上的返回参是一个json结构。另外data-operation并不是固定的，你可以写出data-hi，data-xx等等自定义你想要的参数key

json结构如下：

{
  "type":"tap",
  "timeStamp":895,
  "target": {
    "id": "tapTest",
    "dataset":  {
      "hi":"Weixin"
    }
  },
  "currentTarget":  {
    "id": "tapTest",
    "dataset": {
      "hi":"Weixin"
    }
  },
  "detail": {
    "x":53,
    "y":14
  },
  "touches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }],
  "changedTouches":[{
    "identifier":0,
    "pageX":53,
    "pageY":14,
    "clientX":53,
    "clientY":14
  }]
}

触控事件类型

在上面的json，你可以看到type这个值，这就是触控事件的类型，他们一共有如下几种：

touchstart	手指触摸动作开始
touchmove	手指触摸后移动
touchcancel	手指触摸动作被打断，如来电提醒，弹窗
touchend	手指触摸动作结束
tap	手指触摸后马上离开
longpress	手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发	1.5.0
longtap	手指触摸后，超过350ms再离开（推荐使用longpress事件代替）
transitionend	会在 WXSS transition 或 wx.createAnimation 动画结束后触发

监听指定类型事件例子

js

    click(event) {
        const type = event.type
        console.log(type)
        if (type == 'tap') {
            console.log("触摸")

        } else if (type == 'touchstart') {
            console.log("触摸开始")

        } else if (type == 'touchend') {
            console.log("触摸结束")

        }
    },

wxml

在bind的时候需要按类型绑定事件，才会返回对应type的事件

        <view bindtap="click" bindtouchstart="click" bindtouchend="click" class="record-voice-container">

 

 

end