WeChatアプレットのスワイパードットのドットをスライダーに変更する方法

この記事では、主に既存のコンポーネント（WeChatアプレットのスワイパーやh5でよく使われるswiper.jsなど）をベースにスライダースタイルのインジケーターパネルを実装する方法を紹介します。デモはミニプログラムに基づいていますが、ロジックは普遍的です。

背景

最近、新しいミニプログラムに取り組んでいます。ホームページにスワイパーモジュールがあります。デザインクラスメイトの素晴らしい仕事のおかげで😭、退屈な開発に喜びを見出すことができました。スワイパーのインジケーターパネルのドットがスライダーに変更されました。正直、ドットを一列に並べてクリックするだけでいいんじゃないでしょうか？ハハハハ。でも私は彼が大好きよ〜

ターゲット効果

全体的にシンプルです。主に下部のスライダーに若干の作業が必要です。要件を整理した後、実装する必要がある機能ポイントは次のとおりです。

スライダーには自然なスライド効果が必要です。
スライダーはスライド方向にスライドする必要があります。

アイデア

整理後の実施計画は次のようになります。

スワイパーのコンテンツをスライドするときに、現在のページの curPage を取得できます (通常、コンポーネントは現在のページを提供します)。その後、スライドが完了したら、前のページの prePage を設定できます。この prePage は、実際には今回の curPage です。このページを通じて、スライダーの開始位置と終了位置を取得できます。
スライドは変換によって実現できます。
transform が使用されるため、アプレットはカスタムスタイルをサポートする必要がありますが、現在、アプレットは this.animate メソッドのセットを提供しています。

成し遂げる

スワイパーは変更を聞きます

まず、スワイパーの変更イベントを使用する必要があります。コードは次のとおりです。

<スワイパー
 クラス="ホットコンテンツスワイパー"
 インジケータードット="{{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を応援していただければ幸いです。

以下もご興味があるかもしれません: