WeChat Mini Program Touch Event Detaillierte Einführung

黄舟
Freigeben: 2017-01-16 15:48:42
Original
3055 Leute haben es durchsucht

Touch-Events des WeChat Mini-Programms:

Die „Events“ des WeChat Mini-Programms sind sehr interessant. Nachdem ich die Dokumentation gelesen hatte, stellte ich fest, dass Ereignisse an den übergeordneten Knoten übergeben werden können und dass die auf diesem Ereignis gedruckten Informationen sehr einfach zu debuggen sind.

Als nächstes kopieren Sie das Dokument über

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

》》》Was ist ein Ereignis?

Ereignisse sind die Kommunikationsmethode von der Ansichtsschicht zur Logikschicht.

Ereignisse können das Benutzerverhalten zur Verarbeitung an die Logikschicht zurückmelden.

Ereignisse können an Komponenten gebunden werden. Wenn das Triggerereignis erreicht ist, wird die entsprechende Ereignisverarbeitungsfunktion in der Logikschicht ausgeführt.

Ereignisobjekte können zusätzliche Informationen wie ID, Datensatz und Berührungen enthalten.

So verwenden Sie Ereignisse

Binden Sie eine Event-Handler-Funktion in die Komponente.

Wenn der Benutzer beispielsweise bei bindtap auf die Komponente klickt, wird die entsprechende Ereignisverarbeitungsfunktion auf der entsprechenden Seite der Seite gefunden.

Klicken Sie auf mich!

Schreiben Sie die entsprechende Seitendefinition ein Ereignisverarbeitungsfunktion, der Parameter ist Ereignis.

Page({   
 tapName: function(event) {   
 console.log(event)   
 }   
})
Nach dem Login kopieren

Sie können sehen, dass die Protokollinformationen ungefähr wie folgt lauten:

{   
"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   
}   
}
Nach dem Login kopieren

Detaillierte Erklärung der Ereignisse

Ereignisklassifizierung

Ereignisse sind unterteilt in Blasenereignisse und Nicht-Blasenereignisse:

Blasenereignisse: Wenn ein Ereignis auf einer Komponente ausgelöst wird, wird das Ereignis an den übergeordneten Knoten übermittelt.

Nicht-Blasen-Ereignis: Wenn ein Ereignis auf einer Komponente ausgelöst wird, wird das Ereignis nicht an den übergeordneten Knoten übermittelt.

》》》Ereignisklassifizierung

touchstart Fingerberührung

touchmove Fingerbewegungen nach der Berührung

touchcancel Fingerberührungsaktion wird unterbrochen, z. B. Popup-Fenster und eingehende Anrufe Erinnerung

Touchend Der Fingerberührungsvorgang endet

Tippen Sie auf Verlassen nach der Fingerberührung

Langtippen Sie Belassen Sie mehr als 350 ms nach der Fingerberührung

》 》》Ereignisbindung

Ereignisbindung wird auf die gleiche Weise wie Komponentenattribute in Form von Schlüssel und Wert geschrieben.

Der Schlüssel beginnt mit „bind“ oder „catch“, gefolgt von der Art des Ereignisses, z. B. „bindtap“, „catchtouchstart“

Wert ist eine Zeichenfolge, und eine Funktion mit demselben Namen muss im entsprechenden definiert werden Seite. Andernfalls wird beim Auslösen des Ereignisses ein Fehler gemeldet. Die Bindung von Bindungsereignissen verhindert nicht, dass Bubbling-Ereignisse nach oben sprudeln, und die Bindung von Catch-Ereignissen kann verhindern, dass Bubbling-Ereignisse nach oben sprudeln.

Das Obige hat die Grundlagen von Miniprogramm-Events kurz vorgestellt. Es ist an der Zeit, die Macht von „Events“ zu zeigen:

Klicken (tippen)

Doppelklicken ( dbtap)

Langes Drücken (Longtap)

Gleiten

Multi-Touch

1. Klicken

Das Klickereignis besteht aus Touchstart , touchend, nach touchend Tap-Ereignis auslösen.

WeChat Mini Program Touch Event Detaillierte Einführung

<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;)
}
Nach dem Login kopieren

2. Doppelklick

Ein Doppelklickereignis besteht aus zwei Klickereignissen und dem Intervall dazwischen Die beiden betragen weniger als 300 ms. Es handelt sich um einen Doppelklick. In offiziellen WeChat-Dokumenten gibt es kein Doppelklick-Ereignis, und Entwickler müssen ihre eigene Verarbeitung definieren.

WeChat Mini Program Touch Event Detaillierte Einführung

<view>
 <button type="primary" bindtap="mytap">点我吧</button>
</view>
Nach dem Login kopieren

WeChat Mini Program Touch Event Detaillierte Einführung

3. Langes Drücken

Langes Drücken-Ereignis Nach der Berührung mit dem Finger wird gewartet für mehr als 350ms belassen.

WeChat Mini Program Touch Event Detaillierte Einführung

<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;)
}
Nach dem Login kopieren

Klicken, Doppelklicken und langes Drücken sind Berührungsereignisse, die Touchstart-, Touchend- und Tap-Ereignisse auslösen. Das Touchcancel-Ereignis kann nur simuliert werden Echte Geräte, nicht viele sagten.

事件触发顺序
单击touchstart → touchend → tap
双击touchstart → touchend → tap → touchstart → touchend → tap
长按touchstart → longtap → touchend → tap

4.滑动

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

WeChat Mini Program Touch Event Detaillierte Einführung

坐标图:

WeChat Mini Program Touch Event Detaillierte Einführung

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

假设A点为touchstart事件触摸点,坐标为A(ax,ay),然后手指向上滑动到点B(bx,by),就满足条件by < ay;

同理,向右滑动到C(cx,cy),满足cx > ax;向下滑动到D(dx,dy),满足dy > ay;向左移动到E(ex,ey)满足ex < ax.

计算线段AB在Y轴上投影长度为m,在X轴上的投影长度为n

计算r = m/n,如果r > 1,视为向上滑动。

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

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

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

WeChat Mini Program Touch Event Detaillierte Einführung

5.多点触控

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

以上就是微信小程序 触控事件详细介绍的内容,更多相关内容请关注PHP中文网(www.php.cn)!


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage
Über uns Haftungsausschluss Sitemap
Chinesische PHP-Website:Online-PHP-Schulung für das Gemeinwohl,Helfen Sie PHP-Lernenden, sich schnell weiterzuentwickeln!