WeChat開発入門 (4) タッチイベント-WeChatの開発-php.cn

WeChat開発入門 (4) タッチイベント

零下一度

リリース： 2017-05-23 15:30:35

オリジナル

2014 人が閲覧しました

》》》イベントとは

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

》》》イベント分類

touchstart 指タッチ
touchmove タッチ後の指の動き
touchcancel ポップアップや通話リマインダーなど、指タッチ操作が中断される
touchend 指touch 動作終了
tap 指に触れたら離れる
longtap 指に触れたら350ms以上離れる

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

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

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

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

クリック(タップ)
ダブルクリック(dbtap)
(ロングタップ)
スライディング
マルチタッチ

1. クリック

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

rree

<view>
  <button type="primary" bindtouchstart="mytouchstart" bindtouchend="mytouchend" bindtap="mytap">点我吧</button>
</view>

ログイン後にコピー

2. ダブルクリック

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

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;)
}

ログイン後にコピー

3.長押し

長押しイベント指をタッチした後、350ms以上放置します。

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

ログイン後にコピー

<view>
  <button type="primary" bindtouchstart="mytouchstart" bindlongtap="mylongtap" 
    bindtouchend="mytouchend" bindtap="mytap">点我吧</button>
</view>

ログイン後にコピー

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

イベント	トリガーシーケンス
クリック	タッチスタート→タッチエンド→タップ
ダブルクリック	タッチスタート→タッチエンド→タップ→タッチスタート→タッチエンド→タップ
	タッチスタート → ロングタップ→タッチエンド→タップ

4. スライド

指が画面に触れて移動します。以下では、簡単のため、水平方向のスライドと垂直方向のスライドを例に挙げます。スライディングイベントは、touchstart、touchmove、touchend で構成されます。

座標図:

画面の左上隅を原点とする直交座標系を確立します。第 4 象限は携帯電話の画面で、Y 軸が低いほど座標値が大きくなります (数学的な象限との違いに注意してください)。
点 A が touchstart イベントのタッチ点であり、座標が A(ax,ay) であると仮定し、指が点 B(bx,by) までスライドすると、条件は < になります。
も同様に満たされます。 cx > ax を満たす C(cx, cy) まで下にスライドします。 dy > E( を満たす) ex, ey)、ex < ax を満たす
Y 軸上の線分 AB の投影された長さを m として計算し、X 軸上の投影された長さを n として計算します
r = m/n、r > 1 の場合、上にスライドするとみなします。
同様に、線分AC、AD、AEのY軸への投影長とX軸への投影長の比を計算し、右、下、左へのスライド量を求めます。

上記はrが1の場合を考慮していません。

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;)
}

ログイン後にコピー