WeChatアプレットを使用して天井効果を実現する方法の例

1. 実装

スクロールビューはミニプログラムのネイティブコンポーネントです
handleScrollはスライド時にトリガーされるイベントです
scroll-yは垂直方向のスライドが許可されていることを意味します
クラスが fixed の要素は、スクロールビューコンテナーの上部に固定され、現在の日付が表示されます。
動的バインディングクラスメソッドを使用して可視性の表示を制御する
クラス scheduleDay を持つ要素は、各日付のタイトルです。
データ値の値は日付にバインドされます

この関数は、スクロールビューの上部からの各 scheduleDay 要素の距離と現在の日付のデータを処理します。
データは以下のように収集されます
wx.createSelectorQuery() の使用法の詳細 (通常は要素ノードの位置情報を取得するために使用されます)
developer.weixin.qq.com/miniprogram…

スケジュール情報:[
    {
       トップ: 8,
       現在の日付: '2021-08-15'
    },
    {
       トップ: 213,
       現在の日付: '2021-08-14'
    },
    {
       トップ: 555,
       現在の日付: '2021-08-13'
    },
    ...
]

e.detail.scrollTopはスクロールビューコンポーネントのスライド距離です。
スライドの高さが特定の要素ノードとスクロールビューの上部との間の距離以上の場合、現在のスライド日付を設定します。
次に、固定位置にある要素の表示または非表示を制御して、

この記事ではCSSについてあまり詳しく説明しません。論理的思考が正しければ機能的な効果は得られます。

2. 問題点

handleScrollスライドイベントのトリガー頻度のエラーにより、固定要素は上部にスライドしても非表示になりません。
引き上げると、固定要素と元の位置にある日付タイトルのUIエクスペリエンスが悪くなります。
次の図を参照してください

この図はデフォルトのUI表示を示しています

ユーザーが日付の下のリストの位置にスライドしたときのUI表示、または問題の最初のポイントが存在する状況

すると、問題の2番目のポイントに影響します

3. より良い実装方法があるかどうか検討する

最初のアイデアは、各要素ノードの日付タイトルに対応するクラスを動的に追加して、個々のスタイルの変更を制御することでしたが、各要素のクラスは同じであり、この方法では解決できません。

変更は個々の要素ノードのスタイルを制御することによって行われますが、ブラウザの DOM とは異なり、ミニプログラムは dom.style.xxx を通じて個々の要素のスタイルを変更することはできません。

IntersectionObserverさん、この方法も試してみましたが、うまくいきませんでした。機会があればまた試してみます。

要約する

WeChatミニプログラムで天井効果を達成する方法についての記事はこれで終わりです。ミニプログラムによる天井効果に関するその他のコンテンツについては、123WORDPRESS.COMの以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも123WORDPRESS.COMをよろしくお願いいたします。

以下もご興味があるかもしれません: