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

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を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • WeChatアプレットがフォーム検証を実装
  • WeChat アプレット スライダー機能を自分で記述するための 12 行の js コード (推奨)
  • WeChatアプレットスライダー検証方法

<<:  Mysql SSHトンネル接続を使用するための基本的な手順

>>:  Dockerデータ管理とネットワーク通信の使用

推薦する

HBuilderX で Tomcat 外部サーバーを設定して、JSP インターフェイスを表示および編集する方法の詳細な説明

1. 最初の方法は、ローカルのTomcatを起動してJSPを表示することです。 tomcatのweb...

MySQL の DDL と DML についての簡単な説明

目次序文1. DDL 1.1 データベース操作1.2 データテーブルの操作1.3 一般的なデータ型1...

MySQLで一意のサーバーIDを生成する方法

序文MySQL では、server-id を使用してデータベース インスタンスを一意に識別し、それを...

Linux で大きなファイルの指定された内容を見つける方法

大きなことも小さなことも考えて、方向転換しましょう。 Linux では非常に大きなファイルに遭遇する...

Linux RabbitMQ クラスタ構築プロセス図

1. 全体的な手順冒頭で、RabbitMQ サービスをインストールして実行する方法を紹介しましたが、...

小規模プログラムへのデータキャッシュ機構の応用と実装

ミニプログラムデータキャッシュ関連知識データ キャッシュ: データをキャッシュして、アプレットを終了...

Web 開発 js 文字列連結プレースホルダーと conlose オブジェクト API の詳細な説明

目次プレースホルダーの置き換えコンソール印刷テーブル()ログ、情報、警告、エラーグループ()、グルー...

Ubuntu 18.0.4 MySQL 8.0.20 のインストールと設定方法のグラフィックチュートリアル

MySQL 8.0.20 のインストールおよび設定方法は、参考としてグラフィック チュートリアルにま...

HTML と JavaScript を使用してローカル メディア (ビデオとオーディオ) ファイルを再生する方法

まず、セキュリティ上の理由から、JavaScript はローカル リソース ファイルに直接アクセスで...

Ubuntu 16.04 に nvidia ドライバー + CUDA + cuDNN をインストールする詳細なチュートリアル

準備1. GPUがCUDAをサポートしているかどうかを確認するlspci | grep -i nvi...

Linux 環境変数の設定方法のまとめ (.bash_profile と .bashrc の違い)

Linux では、アプリケーションをダウンロードしてインストールすると、起動時にアプリケーション名...

MySQLはデータ復旧を実装するためにbinlogログを使用する

MySQL binlog は MySQL ログの中で非常に重要なログであり、データベースのすべての ...

JSはプログレスバーのスムーズバージョンの詳細な計画を実装します

進捗バーがスムーズではないフロントエンドを学ぶ学生のほとんどは、オーディオプレーヤーやビデオプレーヤ...

Bootstrap 3.0 学習ノートのページレイアウト

今回はレイアウトを中心に学習しますが、これは基本的なHTMLタグのほとんどにも存在するため、比較的簡...