この記事では、主に既存のコンポーネント(WeChatアプレットのスワイパーやh5でよく使われるswiper.jsなど)をベースにスライダースタイルのインジケーターパネルを実装する方法を紹介します。デモはミニプログラムに基づいていますが、ロジックは普遍的です。 背景最近、新しいミニプログラムに取り組んでいます。ホームページにスワイパーモジュールがあります。デザインクラスメイトの素晴らしい仕事のおかげで😭、退屈な開発に喜びを見出すことができました。スワイパーのインジケーターパネルのドットがスライダーに変更されました。正直、ドットを一列に並べてクリックするだけでいいんじゃないでしょうか?ハハハハ。でも私は彼が大好きよ〜 ターゲット効果全体的にシンプルです。主に下部のスライダーに若干の作業が必要です。要件を整理した後、実装する必要がある機能ポイントは次のとおりです。
アイデア整理後の実施計画は次のようになります。
成し遂げるスワイパーは変更を聞きますまず、スワイパーの変更イベントを使用する必要があります。コードは次のとおりです。 <スワイパー クラス="ホットコンテンツスワイパー" インジケータードット="{{indicatorDots}}" vertical="{{vertical}}" バインドチェンジ="スライダーハンドラー"> <block wx:for="{{popular_zone_list}}" wx:key="*this"> <スワイパーアイテム> <view class="hot-list"> これはスワイパー{{index}}です </ビュー> </スワイパーアイテム> </ブロック> </スワイパー> カスタムドットモジュール次に、スライダー領域であるドットの DOM をカスタマイズする必要があります。コードは次のとおりです。 <ビュークラス="dot"> <view class="dot-bar" style="width: {{dotBarWidth}}rpx"></view> </ビュー> これには、スライダーに初期サイズを指定する必要があります。そうしないと、スライド後の幅の変化にジッター (dotBarWidth) が発生します。 スライダーのサイズは、スライドの長さとスワイパー項目の数に基づいて計算されます。この方法で幅を取得したら、スライダー幅の倍数でオフセットするだけです。 ドット幅を100とします。 dotBarWidth = Math.round(dotWidth/popular_zone_list.length); とします。 変更イベントのロジックテンプレートが記述されたので、変更イベントの記述を始めましょう。コードは次のとおりです。 スライダーハンドラ({詳細}) { curPage = detail.current; とします。 自分自身 = this とします。 this.animate('.dot-bar', [ { translateX: self.prePage * 100 + '%', 変換元: 'center'、 }, { translateX: curPage*100 + '%', 変換元: 'center'、 }, ], 100, function () { // アニメーションコールバック self.prePage = curPage; self.clearAnimation('.container', { translateX: 真、 変換元: true }); }); }, // ミニプログラムでない場合は、this.animate を動的にバインドされたスタイルまたはその他の DOM 操作に置き換えることができます。 この機能が実装された今、この機能は非常にシンプルでかなり優れていると思いませんか?😒 最後に正直に言うと、実装の過程で、当時の私の状態と関係があるかもしれないが、いくつか愚かなことをしてしまった。スライダーが左にスライドされたのか、右にスライドされたのかを判断することに集中しすぎて、遠回りをしてしまったのだ。しかし、結果に基づいて、開始位置と終了位置を計算するだけでよく、左スワイプの開始位置は終了位置よりも大きくする必要があることがわかりました。上記のスキームが参考になれば幸いです〜🎉 WeChatミニプログラムのスワイパードットのドットをスライダーに変更する方法についての記事はこれで終わりです。WeChatミニプログラムのスワイパードットのドットをスライダーに変更する方法に関するより関連性の高いコンテンツについては、123WORDPRESS.COMで以前の記事を検索するか、以下の関連記事を引き続き参照してください。今後も123WORDPRESS.COMを応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Mysql SSHトンネル接続を使用するための基本的な手順
1. 最初の方法は、ローカルのTomcatを起動してJSPを表示することです。 tomcatのweb...
目次序文1. DDL 1.1 データベース操作1.2 データテーブルの操作1.3 一般的なデータ型1...
序文MySQL では、server-id を使用してデータベース インスタンスを一意に識別し、それを...
大きなことも小さなことも考えて、方向転換しましょう。 Linux では非常に大きなファイルに遭遇する...
1. 全体的な手順冒頭で、RabbitMQ サービスをインストールして実行する方法を紹介しましたが、...
ミニプログラムデータキャッシュ関連知識データ キャッシュ: データをキャッシュして、アプレットを終了...
目次プレースホルダーの置き換えコンソール印刷テーブル()ログ、情報、警告、エラーグループ()、グルー...
1. MySQLを削除する a. sudo apt-get autoremove --purge m...
MySQL 8.0.20 のインストールおよび設定方法は、参考としてグラフィック チュートリアルにま...
まず、セキュリティ上の理由から、JavaScript はローカル リソース ファイルに直接アクセスで...
準備1. GPUがCUDAをサポートしているかどうかを確認するlspci | grep -i nvi...
Linux では、アプリケーションをダウンロードしてインストールすると、起動時にアプリケーション名...
MySQL binlog は MySQL ログの中で非常に重要なログであり、データベースのすべての ...
進捗バーがスムーズではないフロントエンドを学ぶ学生のほとんどは、オーディオプレーヤーやビデオプレーヤ...
今回はレイアウトを中心に学習しますが、これは基本的なHTMLタグのほとんどにも存在するため、比較的簡...