WeChat ミニプログラムタッチイベントの概要-ミニプログラム開発-php.cn

この記事は主にWeChatミニプログラムのタッチイベントに関する情報を紹介します。ここで、エディターは必要な知識を整理するのに役立ちます。

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

WeChat ミニプログラムの「イベント」は非常に興味深いです。ドキュメントを読んだ後、その機能が非常に完成しており、イベントを親ノードに渡すことができ、このイベントに出力される情報が非常に透明なので、デバッグに非常に便利であることがわかりました。
次に、ここにドキュメントをコピーします

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

》》》イベントとは

イベントは、ビュー層からロジック層への通信方法です。
イベントは、ユーザーの行動をロジック層にフィードバックして処理できます。
イベントはコンポーネントにバインドでき、トリガーイベントに達すると、ロジック層の対応するイベント処理関数が実行されます。
Event オブジェクトは、ID、データセット、タッチなどの追加情報を運ぶことができます。

イベントの使用方法

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

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

対応するページ定義に対応するイベントハンドラー関数を記述します。パラメータはイベントです。

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 タッチ後に指が離れる
longtap 指がタッチして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中文网！

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

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