この記事では、主に既存のコンポーネント(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. インストール1.公式サイトからダウンロード2. 構成を作成する3. MySQLを初期化...
1. HTML送信ボタンと下部ボタンの基本構文構造1. HTML送信ボタン入力タグで type=&...
最近、element-ui を統合したプロジェクトで vuethink を使用しました。以前は bo...
データを挿入するとき、以前オフィス システムに取り組んでいたときにはデータベースのパフォーマンスにつ...
この記事では、例を使用して、MySQL アカウント管理の原則と実装方法を説明します。ご参考までに、詳...
1. 設置前の清掃 rpm -qa | grep jdk rpm -qa | grep gcj yu...
1. Nginx ロードバランシングの実装原理1. Nginxはリバースプロキシを通じて負荷分散を実...
01 並列レプリケーションの概念MySQL のマスター スレーブ レプリケーション アーキテクチャで...
1. 単一マシン環境の構築# 1.1 ダウンロードZookeeper の対応するバージョンをダウンロ...
vueモバイル端末は、画面上で指をスライドさせる方向を判断します。具体的な内容は次のとおりです。これ...
目次1. JSONPとは何か2. JSONPクロスドメインリクエスト3. Baidu検索をシミュレー...
VMware で仮想マシンを作成し、Redhat Linux オペレーティング システムをインスト...
span タグは HTML ウェブページを作成するときによく使用されますが、このタグの使い方がよくわ...
Windows リモート デスクトップを使用してサーバーに接続したことがある人なら、リモート デスク...