WeChat アプレットは、ページを指定した位置までスクロールする効果を実現します

WeChat アプレットは、指定された位置までページをスクロールする効果を実装します。特定のコード例が必要です。

アプレットは、近年非常に人気のあるモバイル アプリケーション開発方法です。そのシンプルさと高いパフォーマンスにより、多くの開発者の最初の選択肢となっています。ミニ プログラムでは、ページ上の指定した位置までスクロールする効果を実現する必要があることがよくありますが、この記事では、この機能をミニ プログラムに実装する方法と具体的なコード例を紹介します。

指定された位置までページをスクロールする効果を実現するには、主に 2 つの作業があります。1 つは指定された位置にある要素の位置情報を取得すること、もう 1 つはスクロールを実現することです。効果。

まず、スクロール先の要素の位置情報を取得する必要があります。アプレットでは、wx.createSelectorQuery()を使用して要素の位置情報を取得できます。以下は、要素の位置情報を取得するサンプル コードです。

// 定义一个全局变量，用于存储要滚动到的元素位置信息 let scrollTarget; // 获取元素位置信息 function getElementPosition() { const query = wx.createSelectorQuery(); query.select('#targetElement').boundingClientRect(function(res) { scrollTarget = res; }).exec(); } // 在页面加载完成时调用获取元素位置信息的函数 Page({ onLoad: function() { getElementPosition(); } });

上記のコードでは、wx.createSelectorQuery() を通じて#targetElement要素の位置情報を取得しています。メソッド を作成し、グローバル変数scrollTargetに保存します。

次に、スクロール効果を実装する必要があります。ミニ プログラムでは、wx.pageScrollTo()メソッドを使用して、指定した位置までスクロールする効果を実現できます。以下は、スクロール効果を実現するサンプル コードです。

// 滚动到指定位置 function scrollToTarget() { wx.pageScrollTo({ scrollTop: scrollTarget.top, duration: 300 }); } // 在页面中点击滚动按钮时调用滚动函数 Page({ scrollToTarget: function() { scrollToTarget(); } });

上記のコードでは、wx.pageScrollTo()メソッドscrollTarget を通じて、指定された位置までページをスクロールします。 .topを選択し、スクロール時間を 300 ミリ秒に設定します。

最後に、ページにスクロール ボタンを追加し、ボタンをクリックすることでスクロール効果をトリガーできます。以下はページのサンプル コードです:

  滚动到指定位置 

上記のコードでは、A を追加しました。#targetElement要素がスクロールする位置として使用され、ボタンが追加され、スクロール関数scrollToTarget()がbindtapイベントを通じてバインドされます。

上記のコード例を通じて、ミニ プログラム内の指定された位置にスクロールする効果を実現できます。同時に、スクロールイベントの監視など、実際のニーズに基づいてコードに適切な変更や最適化を行うことができます。

要約すると、ミニ プログラムで指定した位置までページをスクロールする効果を実現するには、wx.createSelectorQuery() を通じてスクロールされる要素の位置情報を取得する必要があります。メソッドを使用してから、スクロール効果はwx.pageScrollTo()メソッドによって実現されます。この記事で提供されているコード例が、皆さんの理解と実践に役立つことを願っています。

以上がWeChat アプレットは、ページを指定した位置までスクロールする効果を実現しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。