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メソッド

この記事では、ユーザー名が使用可能かどうかを確認するためのVueの具体的なコードを例として紹介します...

Docker Compose ネットワーク設定の説明

基本概念デフォルトでは、Compose はアプリケーション用のネットワークを作成し、サービスの各コン...

MySQL 5.7 MGR シングルマスター決定マスターノード方式の詳細説明

当銀行のMGRは年末に開始されます。公式文書を読んだり、毎日テストを受けたりしなければなりません。毎...

htm 初心者ノート(初心者は必ず読んでください)

1. HTMLとは何かHTML (ハイパーテキスト マークアップ言語): ハイパーテキスト マーク...

フロントエンドセキュリティの詳細な説明: JavaScript の http ハイジャック対策と XSS

目次HTTP ハイジャック、DNS ハイジャック、XSS HTTPハイジャックDNSハイジャックXS...

MySQL ルートパスワードをリセットする方法

目次1. ルートパスワードを忘れてしまい、データベースにアクセスできない: DBA にとって、スーパ...

JavaScript ジグソーパズルゲーム

この記事の例では、ジグソーパズルゲームを実装するためのJavaScriptの具体的なコードを参考まで...

Windows 環境での MYSQL5.7 設定ファイルの場所のグラフィカル分析

1. MYSQLインストールディレクトリ次のようにコードをコピーします。 select @@bas...

Linux周辺ファイルシステムのカスタマイズ方法

序文一般的に、Linux システムについて話すときは、Linux カーネルと GNU プロジェクトに...

史上最も便利な Zookeeper サーバーの構築方法 (推奨)

ZooKeeperとはZooKeeper は、分散アプリケーションに効率的で可用性の高い分散調整サ...

Mysql5.6.36 スクリプトのコンパイル、インストール、初期化のチュートリアル

概要この記事は、centos7.3 上で mysql5.3.6 を自動的にコンパイルしてインストール...

1分でVueが右クリックメニューを実装

目次レンダリングインストールコードの実装カスタムスタイル要約する効率的に要件を満たし、車輪の再発明を...

MYSQL SERVER のログファイルを縮小する方法

トランザクション ログには、関連するデータベースに対する操作が記録され、データベースの回復に関連する...

Vue 組み込みコンポーネントのキープアライブでの LRU アルゴリズムの使用

目次Vue の keep-alive 組み込みコンポーネントの使用でもこのアルゴリズムが使用されます...

VUEはG2チャートを使用した実装を導入します

目次G2チャートについて使用テンプレートで使用される完全なコード (棒グラフ)世界地図を追加するG2...