序文小規模なプログラムの開発では、リストをスクロールして表示する必要性に遭遇することがよくあります。そのため、アンカー配置を使用すると、より使いやすいインタラクティブなエクスペリエンスを実現できます。プロジェクトで達成された効果を見てみましょう。 機能性ミニプログラムビューコンテナコンポーネントを使用して実装: 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 は、すべてのアンカー ブロックが占めるページの高さの配列の合計です。図で見ると、より明確にわかります。 各アンカーブロックの高さは固定です。データを取得してページをレンダリングしたら、 キーコード: クエリを 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を応援してください。 以下もご興味があるかもしれません:
|
<<: Linux のバックグラウンドで実行するいくつかの方法 (まとめ)
>>: MySQL全文インデックスを使用して検索エンジンのサンプルコードの簡易版を実現する
序文何年も前、私はサーバー側の初心者でしたが、業界の競争が激しくなるにつれて、フロントエンドの初心者...
最近のビジネスでは、オンライン トレーニング システムが特定のオンライン プレビュー ページに対する...
リンク上の点線のボックスを削除しますコードをコピーコードは次のとおりです。 a:アクティブ、a:フォ...
1. 前述の通り数年前、Linux ドライバーのコードを読んでいたときにこのマクロを見ました。長い間...
目次序文コンポーネントの紹介クラスコンポーネントの作成状態についてレンダリングについて関数コンポーネ...
目次1. はじめに2. 実際の事例1. App.vueを変更する2. レイアウトを調整する3. ジャ...
var() の紹介と使用法詳細 (MDN) IEは無効ですが、他の主流のブラウザは有効ですvar()...
HTTP ステータス コードは、Web サーバーの HTTP 応答ステータスを示すために使用される ...
MySQL データをエクスポートする目的は、データベースのバックアップ、テーブル構造のエクスポート、...
1. ダウンロード、例として8.0を取り上げますダウンロードアドレス: https://dev.my...
mysql バッチで大量のデータを削除する1000万件のレコードを持つテーブル(syslogs)があ...
フレームとは、Web ページ画面を複数のフレームに分割したもの(複数の Web ページという形で表示...
問題の説明Qt5.15.0 をインストールした後、テスト ケースを実行するとエラーが表示されます。 ...
メタ タグは、ファイル情報を定義し、検索エンジンによる検索を容易にするために Web ページ ファイ...
序文この記事では主にMySQLのカスタム関数とストアドプロシージャに関する関連コンテンツを紹介し、皆...