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

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

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

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

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

》》》イベントとは

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

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

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

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

イベントの使用方法

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

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

5980c8c1f9be4deb05f4fc274a72a9ff

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

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 指タッチ

1. touchmove タッチ後の指の動き

2. touchcancel ポップアップウィンドウや着信リマインダーなど、指タッチ操作が中断される

3. touchend 指タッチ動作終了

4. tap タッチ後に指が離れる

5. longtap 指がタッチして350ms以上後に離れる

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

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

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

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

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

クリック(タップ)

1. ダブルクリック(dbtap)

2. (ロングタップ)

3. スライディング

4. マルチタッチ

5. 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组成

 

坐标图：

 

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的解析

以上がWeChat ミニ プログラム タッチ イベントの概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。