WeChatアプレット実装アンカー位置決め機能の例

WeChatアプレット実装アンカー位置決め機能の例

序文

小規模なプログラムの開発では、リストをスクロールして表示する必要性に遭遇することがよくあります。そのため、アンカー配置を使用すると、より使いやすいインタラクティブなエクスペリエンスを実現できます。プロジェクトで達成された効果を見てみましょう。

機能性

ミニプログラムビューコンテナコンポーネントを使用して実装: scroll-view

ここで注意すべき点は、垂直方向にスクロールする場合、スクロール ビューで固定の高さを指定する必要があることです。WXML コードを見てみましょう。

<scroll-view style="height:{{autoHeight}};" scroll-y scroll-into-view="{{toView}}" class="scroll-warp" scroll-with-animation="{{true}}" bindscroll="handelScroll">
   <ブロック wx:for="{{dataList}}" wx:key="{{index}}">
      <view class="floorType" id="{{item.floor}}">
     </ビュー>
   </ブロック>
</スクロールビュー>

ここで、autoHeight はさまざまなモデルの高さに基づいて動的に計算されます。scroll-view には重要な属性があります。scroll-into-view は、スクロール位置 (アンカー ポイント) である文字列値を受け取ります。次に、scroll-view 子ノードに対応するアンカー ポイント リストを設定する必要があります。たとえば、上の図の class=floorType ノードの id 属性などです。この方法では、スクロールは 1 対 1 で対応します。フィルター ブロックの床をクリックし、toView 変数を対応するデータに設定すると、リストは対応する位置までスクロールします。
リストをスクロールすると、上部のハイライト表示されたフィルター項目もそれに応じて切り替える必要があります。このとき、何をすればよいでしょうか?

bindscroll イベントを使用して何かを行うことができます。このイベントは、リストがスクロールされたときにトリガーされます。

キーコード:

ハンドルスクロール(e) {
        scrollTop=e.detail.scrollTop とします。
        scrollArr = this.data.anchorArray; とします。
        スクロールトップ>=スクロールアラー[スクロールアラー.長さ-1]-このデータ.自動高さ){
                戻る;
          }それ以外 {
              for(let i=0;i<scrollArr.length;i++){
                    スクロールトップ>=0&&スクロールトップ<スクロールArr[0]){
                    // selectFloorIndex はフィルターブロックのハイライト表示を制御します this.setData({
                            選択フロアインデックス: 0
                        });
                    }それ以外の場合(scrollTop>=scrollArr[i-1]&&scrollTop<scrollArr[i]) {
                        this.setData({
                            選択フロアインデックス: i
                        });
                 }
             }
         }
    }

ここで、anchorArray は、すべてのアンカー ブロックが占めるページの高さの配列の合計です。図で見ると、より明確にわかります。

各アンカーブロックの高さは固定です。データを取得してページをレンダリングしたら、
boundingClientRect メソッドは、クラス名 floorType を持つ各ノードの高さを取得し、これらの高さを anchorArray 配列に格納します。次に、特定のアンカー ポイントの高さを超えてスクロールすると、上部のフィルター項目も次の項目に切り替わります。

キーコード:

            クエリを wx.createSelectorQuery().in(this); にします。
            heightArr = [] とします。
            h = 0 とします。
            クエリ.selectAll('.floorType').boundingClientRect((react)=>{
                react.forEach((res) => {
                    h+=res.height;
                    高さArr.push(h)
                })
                this.setData({
                    アンカー配列:高さ配列
                });
            }).exec();

この時点で、アンカーポイントの配置スクロールは完了です。皆様のお役に立てれば幸いです。ご質問などございましたら、お気軽にご連絡ください。

要約する

WeChatミニプログラムでアンカーポイントの配置を実装する方法についての記事はこれで終わりです。WeChatミニプログラムのアンカーポイントの配置の詳細については、123WORDPRESS.COMの以前の記事を検索するか、次の関連記事を引き続き参照してください。今後も123WORDPRESS.COMを応援してください。

以下もご興味があるかもしれません:
  • WeChatアプレットはアンカーポイントの配置フロアジャンプの例を実装します
  • WeChat アプレットのスクロールビュー実装アンカースライドの例
  • WeChatアプレットがアンカー機能を実装
  • WeChatアプレットのスクロールビューは、左側のナビゲーションバーのアンカーポイントまでスクロールして食べ物を注文する機能を実現します(タイプをクリックしてアンカーポイントまでスクロールします)
  • WeChatアプレットがアンカーポイントジャンプを実現
  • WeChatアプレットのスクロールビューがアンカーポイントジャンプ機能を実装
  • WeChatアプレットのスクロールビューアンカーリンクのスクロールジャンプ機能

<<:  Linux のバックグラウンドで実行するいくつかの方法 (まとめ)

>>:  MySQL全文インデックスを使用して検索エンジンのサンプルコードの簡易版を実現する

推薦する

VUE を使用して Ali Iconfont ライブラリをオンラインで呼び出す方法

序文何年も前、私はサーバー側の初心者でしたが、業界の競争が激しくなるにつれて、フロントエンドの初心者...

Vue ページ監視ユーザープレビュー時間機能実装コード

最近のビジネスでは、オンライン トレーニング システムが特定のオンライン プレビュー ページに対する...

CSS スキル コレクション - 古典の中の古典

リンク上の点線のボックスを削除しますコードをコピーコードは次のとおりです。 a:アクティブ、a:フォ...

Linuxカーネルマクロcontainer_ofの詳細な分析

1. 前述の通り数年前、Linux ドライバーのコードを読んでいたときにこのマクロを見ました。長い間...

Reactでコンポーネントを作成する方法

目次序文コンポーネントの紹介クラスコンポーネントの作成状態についてレンダリングについて関数コンポーネ...

Vue3 (III) ウェブサイトホームページレイアウト開発

目次1. はじめに2. 実際の事例1. App.vueを変更する2. レイアウトを調整する3. ジャ...

CSS3のvar()を使用して実行時にscss変数の値を変更する詳細な説明

var() の紹介と使用法詳細 (MDN) IEは無効ですが、他の主流のブラウザは有効ですvar()...

一般的な HTTP ステータス コード 10 個の詳細な説明

HTTP ステータス コードは、Web サーバーの HTTP 応答ステータスを示すために使用される ...

MySQLでデータをエクスポートするいくつかの方法の詳細な説明

MySQL データをエクスポートする目的は、データベースのバックアップ、テーブル構造のエクスポート、...

MYSQL8.0.13 無料インストール版 設定チュートリアル例 詳細説明

1. ダウンロード、例として8.0を取り上げますダウンロードアドレス: https://dev.my...

mysql バッチで大量のデータを削除する

mysql バッチで大量のデータを削除する1000万件のレコードを持つテーブル(syslogs)があ...

フレームセットの共通プロパティ(フレームとウィンドウの分割)

フレームとは、Web ページ画面を複数のフレームに分割したもの(複数の Web ページという形で表示...

qt.qpa.plugin の問題を解決: Ubuntu 18.04 の Qt で Qt プラットフォーム プラグイン「xcb」をロードできませんでした

問題の説明Qt5.15.0 をインストールした後、テスト ケースを実行するとエラーが表示されます。 ...

HTML のメタタグの簡単な比較

メタ タグは、ファイル情報を定義し、検索エンジンによる検索を容易にするために Web ページ ファイ...

MySQLカスタム関数とストアドプロシージャの詳細な説明

序文この記事では主にMySQLのカスタム関数とストアドプロシージャに関する関連コンテンツを紹介し、皆...