Introduction to WeChat Mini Program Touch Events

This article mainly introduces relevant information about touch events of WeChat mini programs. When developing WeChat mini programs, such functions will inevitably be used. Here, the editor will help you sort out the corresponding knowledge. Friends who need it You can refer to the following

WeChat applet touch events:

The "events" of WeChat applet are quite interesting. After reading the documentation, I found that it has full functions. Events can be passed to the parent node, and the information printed on this event is very transparent. It should be very convenient to debug.
Next, copy the document over here

Original address: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html

》》》What is an event

1. Events are the communication method from the view layer to the logic layer.

2. Events can feed back user behavior to the logic layer for processing.

3. Events can be bound to components. When the trigger event is reached, the corresponding event processing function in the logic layer will be executed.

4. Event objects can carry additional information, such as id, dataset, touches.

How to use events

Bind an event handling function in the component.

For example, bindtap, when the user clicks on the component, the corresponding event processing function will be found in the corresponding Page of the page.

b6aa15a7f7dc64081d41ada51964248f Click me! de5f4c1163741e920c998275338d29b2

Write the corresponding event processing function in the corresponding Page definition, and the parameter is event.

Page({ 
 tapName: function(event) { 
 console.log(event) 
 } 
})

You can see that the log information is roughly as follows:

{ 
"type": "tap", 
"timeStamp": 1252, 
"target": { 
 "id": "tapTest", 
 "offsetLeft": 0, 
 "offsetTop": 0, 
 "dataset": { 
 "hi": "MINA" 
 } 
}, 
"currentTarget": { 
 "id": "tapTest", 
 "offsetLeft": 0, 
 "offsetTop": 0, 
 "dataset": { 
 "hi": "MINA" 
 } 
}, 
"touches": [{ 
 "pageX": 30, 
 "pageY": 12, 
 "clientX": 30, 
 "clientY": 12, 
 "screenX": 112, 
 "screenY": 151 
}], 
"detail": { 
 "x": 30, 
 "y": 12 
} 
}

Event details

Event classification

Events are divided into bubbling events and non-bubbling events:

Bubbling events: When an event on a component is triggered, the event will be passed to the parent node.

Non-bubbling events: When an event on a component is triggered, the event will not be delivered to the parent node.

》》》Event classification

1. touchstart Finger touch

2. touchmove The finger moves after touching it

3. touchcancel The finger touch action is interrupted, such as pop-up windows and incoming call reminders

4. touchend The finger touch action ends

5. tap Leave after touching the finger

6. longtap Leave after touching the finger for more than 350ms

》》》Event binding

Event binding is written in the same way as the component's properties, in the form of key and value.

1. key starts with bind or catch, followed by the type of event, such as bindtap, catchtouchstart

2. value is a string that needs to be A function with the same name is defined in the corresponding Page. Otherwise, an error will be reported when the event is triggered. bind event binding will not prevent bubbling events from bubbling upwards, and catch event binding can prevent bubbling events from bubbling upwards.

The above has briefly introduced the basics of mini program events. It is time to show the power of "events":

1. Click (tap)

2. Double click (dbtap)

3. Long press (longtap)

4. Slide

5. Multi-touch

##1. Click

The click event consists of touchstart, touchend, touchend Then trigger the tap event.

<view>
 <button type="primary" bindtouchstart="mytouchstart" bindtouchend="mytouchend" bindtap="mytap">点我吧</button>
</view>
mytouchstart: function(e){ console.log(e.timeStamp + &#39;- touch start&#39;)
},mytouchend: function(e){ console.log(e.timeStamp + &#39;- touch end&#39;)
},mytap: function(e){ console.log(e.timeStamp + &#39;- tap&#39;)
}

2. Double-click

The double-click event consists of two It consists of two click events. If the interval between two clicks is less than 300ms, it is considered a double click; the WeChat official document does not have a double click event, and the developer needs to define the processing by himself.

<view>
 <button type="primary" bindtap="mytap">点我吧</button>
</view>

3. Long press

Long press event After the finger is touched, leave it for more than 350ms.

<view>
 <button type="primary" bindtouchstart="mytouchstart" bindlongtap="mylongtap" 
 bindtouchend="mytouchend" bindtap="mytap">点我吧</button>
</view>
mytouchstart: function(e){ console.log(e.timeStamp + &#39;- touch start&#39;)
},//长按事件mylongtap: function(e){ console.log(e.timeStamp + &#39;- long tap&#39;)
 },mytouchend: function(e){ console.log(e.timeStamp + &#39;- touch end&#39;)
},mytap: function(e){ console.log(e.timeStamp + &#39;- tap&#39;)
}

Click, double-click, and long press are touch events, which will trigger touchstart, touchend, tap events, and touchcancel The event can only be simulated on a real machine, so I won’t say more.

EventTrigger sequenceClicktouchstart → touchend → tapDouble clicktouchstart → touchend → tap → touchstart → touchend → tapLong presstouchstart → longtap → touchend → tap

4.滑动

手指触摸屏幕并移动，为了简化起见，下面以水平滑动和垂直滑动为例。 滑动事件由touchstart、touchmove、touchend组成

 

坐标图：

 

1. 以屏幕左上角为原点建立直角坐标系。第四象限为手机屏幕，Y轴越往下坐标值越大（注意跟数学象限的区别）。

2. 假设A点为touchstart事件触摸点，坐标为A(ax,ay)，然后手指向上滑动到点B(bx,by)，就满足条件by e1a653441d5235da94caccb65e3da628 ax；向下滑动到D(dx,dy),满足dy > ay；向左移动到E(ex，ey)满足ex d765c9e1bced532353b8ba81423538fe 1,视为向上滑动。

3. 同理计算线段AC,AD,AE在Y轴投影长度与X轴的投影长度之比，得出向右向下向左的滑动。

以上没考虑r为1的情况。

<view>
 <button type="primary" bindtouchstart="mytouchstart" bindtouchmove="mytouchmove">点我吧</button>
</view>

5.多点触控

由于模拟器尚不支持多点触控，内测开放后，继续补充。

以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注PHP中文网！

相关推荐：

微信小程序 监听手势滑动切换页面的实现

微信小程序中的onLoad的解析

The above is the detailed content of Introduction to WeChat Mini Program Touch Events. For more information, please follow other related articles on the PHP Chinese website!