WeChatミニプログラムタッチイベント詳細紹介

WeChat ミニ プログラムのタッチ イベント:

WeChat ミニ プログラムの「イベント」は非常に興味深いものです。ドキュメントを読んだところ、イベントを親ノードに渡すことができ、このイベントに出力される情報はデバッグに非常に便利であることがわかりました。

次に、ここにドキュメントをコピーします

元のアドレス: https://mp.weixin.qq.com/debug/wxadoc/dev/framework/view/wxml/event.html

》》》イベントとは

イベントは、ビュー層からロジック層への通信方法です。

イベントは、ユーザーの行動をロジック層にフィードバックして処理できます。

イベントはコンポーネントにバインドでき、トリガーイベントに達すると、ロジック層の対応するイベント処理関数が実行されます。

イベント オブジェクトは、ID、データセット、タッチなどの追加情報を運ぶことができます。

イベントの使用方法

コンポーネント内でイベントハンドラー関数をバインドします。

bindtap など、ユーザーがコンポーネントをクリックすると、対応するイベント処理関数がページの対応するページで見つかります。

Click me! 対応するページ定義に対応するイベント処理関数を記述します。 。

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

{   
"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   
}   
}

イベントの詳細説明

イベント分類

イベントはバブリングイベントと非バブリングイベントに分けられます:

バブリングイベント:イベントが発生したときコンポーネントがトリガーされた後、イベントは親ノードに渡されます。

非バブリング イベント: コンポーネント上のイベントがトリガーされると、イベントは親ノードに配信されません。

》》》イベント分類

touchstart 指タッチ

touchmove 指タッチと移動

touchcancel ポップアップや通話リマインダーなど、指タッチ操作が中断される

touchend 指タッチ操作が終了する

tap 指タッチして離れる

ロングタップ 指タッチ後、350ms以上放置

》》》イベントバインディング

イベントバインディングの書き方は、コンポーネントの属性と同じで、キーと値の形式です。

key は、bind または catch で始まり、bindtap、catchtouchstart などのイベントのタイプが続きます。

value は文字列であり、対応するページで同じ名前の関数を定義する必要があります。そうしないと、イベントがトリガーされたときにエラーが報告されます。 binding イベント バインディングはバブリング イベントの上方へのバブリングを妨げませんが、catch イベント バインディングはバブリング イベントの上方へのバブリングを防ぐことができます。

ミニ プログラム イベントの基本は上で簡単に紹介しましたが、ここで「イベント」の力を発揮します:

クリック (タップ)

ダブルクリック (dbtap)

長押し (ロングタップ)

スワイプ

。マルチタッチ

1. クリック

クリックイベントはタッチスタートとタッチエンドで構成され、タップイベントはタッチエンドの後にトリガーされます。

<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. ダブルクリック

2 つのクリック イベント間の間隔が 300 ミリ秒未満の場合、それは WeChat 公式ドキュメントとはみなされません。ダブルクリックイベントがあり、開発者は独自の処理を定義する必要があります。

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

3. 長押し

長押しイベントに指を触れた後、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;)
}

クリック、ダブルクリック、長押しはタッチ イベントで、タッチスタート、タッチエンド、タップ イベントがトリガーされます。タッチキャンセル イベントは実際のデバイスでのみシミュレートできるため、これ以上は説明しません。

4.滑动

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

坐标图：

以屏幕左上角为原点建立直角坐标系。第四象限为手机屏幕，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>

5.多点触控

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

以上就是微信小程序 触控事件详细介绍的内容，更多相关内容请关注PHP中文网（m.sbmmt.com）！