ユーザーが上にスライドしているか下にスライドしているかを判断する方法を教えます
ナレッジコールバック（わからない場合はここを見てください！）
関連しているWeChat アプレット関連する知識については、WeChat アプレットの公式ドキュメントにアクセスして参照してください。！
シーンの繰り返し
前回の記事では、ページスライドを監視する方法を簡単に紹介しましたが、記事の最後に疑問が残りました。ユーザーが上にスワイプしているか下にスワイプしているかをどのように判断すればよいでしょうか? この記事では、2 つの方法 (onPageScroll または touchstart、touchmove、touchend) を使用してこの問題を解決します。
モニタリング効果:
モニタリング後、コンソールを上にスライドすると「up」と表示され、コンソールを下にスライドすると「down」と表示されることがわかります。
コア乾物
onPageScrollとscrollTopの組み合わせ
前回の記事では、onPageScroll の使い方を非常に包括的に紹介しました。ここでは、ロジック層の内容を直接記述するだけです。
まず第一に、ページの変更を監視できる唯一のパラメータはscrollTopなので、scrollTopの変更から始める必要があります。前回の記事では、ページが上にスライドするとscrollTopが増加し、ページが下にスライドするとscrollTopが減少することがわかりました。したがって、scrollTop の変化を判断することでユーザーのアクションを判断できます。
data：{
scrollTopArr:<number[]>[]
}
onPageScroll: function(e) {
var that = this
var scrollTop = e.scrollTop;
var scrollTopArr = that.data.scrollTopArr;
scrollTopArr.push(scrollTop)
var len = scrollTopArr.length;
len > 5 ? scrollTopArr.slice(0,len-4):scrollTopArr;
if(scrollTopArr[len-1] > scrollTopArr[len-2]){
console.log("上滑")
} else if(scrollTopArr[len-1] < scrollTopArr[len-2]) {
console.log("下滑")
}
それではロジックを見てみましょう。onPageScroll はリアルタイムで呼び出されて実行されるため、毎回取得したデータを保存する必要があります。そのため、データ コードの最初の部分では、まず各呼び出しのスクロールトップを保存する配列を定義します。ただし、この関数は非常に頻繁に呼び出されるため、一度に数百、場合によっては数千のデータが存在することを考慮する必要があります。そのため、データ比較を行うときにコードをインターセプトする必要があるため、コードの一部が傍受。
上下スライドの監視を実現します。2番目の方法を簡単に紹介しましょう。
タッチ方法を理解する
WeChat アプレットでは、touchstart、touchmove、イベントを監視することでtouchendユーザーのスライド方向を判断できます。
具体的な方法は以下の通りです。
-
イベント
touchstart内の指のタッチの位置を記録しますstartY。 -
イベント
touchmove中の指の動きの位置を記録しますmoveY。 -
touchendイベント内の合計の大きさをstartY比較しmoveY、moveY比率startYが大きければユーザーは上にスライドし、それ以外の場合は下にスライドします。
サンプルコードは次のとおりです。
let startY = 0;
// 监听touchstart事件
function handleTouchStart(e) {
startY = e.touches[0].clientY;
}
// 监听touchmove事件
function handleTouchMove(e) {
const moveY = e.touches[0].clientY;
const direction = moveY > startY ? 'up' : 'down';
console.log(`用户正在向${
direction}滑动`);
}
// 监听touchend事件
function handleTouchEnd(e) {
const moveY = e.changedTouches[0].clientY;
const direction = moveY > startY ? 'up' : 'down';
console.log(`用户向${
direction}滑动结束`);
}
// 绑定事件
const element = document.querySelector('.scrollable-element');
element.addEventListener('touchstart', handleTouchStart);
element.addEventListener('touchmove', handleTouchMove);
element.addEventListener('touchend', handleTouchEnd);
上記のコードではhandleTouchStart、 、handleTouchMove、のイベントをそれぞれ、 、、の関数でhandleTouchEnd処理し、、 の関数でユーザーのスライド方向を判定しています。最後に、関数を介してこれらのイベントをスクロール可能な要素にバインドします。touchstarttouchmovetouchendhandleTouchMovehandleTouchEndaddEventListener
しかし！！！！このアプローチには欠陥がありますが、大きな問題ではありません。touch メソッドは、ユーザーがタッチした場合にのみ呼び出され、それ以外の場合は無効になります。しかし実際には、ユーザーは触らなければなりません。開発者ツールでは、マウス ホイールを使用してスライドをシミュレートできるため、タッチを使用した後、開発者ツールでデバッグするには、クリックしてタッチしてスライドする必要があります。
以上ですWeChat アプレットはユーザーの上下の行動を監視しますこの記事を読んだ友人はプロジェクト開発にこれらの手法を活用できると思います。もちろん、不備があるかもしれませんので、コメント欄にメッセージを残して修正していただければ幸いです。
