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データ管理とネットワーク通信の使用

推薦する

JavaScript関数の詳細な紹介

任意の数のステートメントを関数を通じてカプセル化することができ、いつでもどこでも呼び出して実行できま...

MySQL 8.0.26 のインストールとアンインストールの完全なステップバイステップの記録

目次序文1. インストール1.公式サイトからダウンロード2. 構成を作成する3. MySQLを初期化...

CSS を使用して HTML フォーム コントロールを美しくする詳細な例 (フォームの美化)

1. HTML送信ボタンと下部ボタンの基本構文構造1. HTML送信ボタン入力タグで type=&...

element-uiのアップロードコンポーネントでファイルやその他のパラメータを転送する際の問題を分析する

最近、element-ui を統合したプロジェクトで vuethink を使用しました。以前は bo...

MySQL データ挿入効率の比較

データを挿入するとき、以前オフィス システムに取り組んでいたときにはデータベースのパフォーマンスにつ...

Mysqlアカウント管理の原理と実装方法の詳細な説明

この記事では、例を使用して、MySQL アカウント管理の原則と実装方法を説明します。ご参考までに、詳...

Linux に JDK1.8 をインストールするための詳細なチュートリアル

1. 設置前の清掃 rpm -qa | grep jdk rpm -qa | grep gcj yu...

負荷分散と動的・静的分離を実現するNginx+Tomcatの原理の分析

1. Nginx ロードバランシングの実装原理1. Nginxはリバースプロキシを通じて負荷分散を実...

MySQL 並列レプリケーションの簡単な分析

01 並列レプリケーションの概念MySQL のマスター スレーブ レプリケーション アーキテクチャで...

Zookeeperスタンドアロン環境とクラスタ環境の構築

1. 単一マシン環境の構築# 1.1 ダウンロードZookeeper の対応するバージョンをダウンロ...

Vueモバイル端末は画面上で指をスライドさせる方向を判定する

vueモバイル端末は、画面上で指をスライドさせる方向を判断します。具体的な内容は次のとおりです。これ...

JSONP クロスドメインシミュレーション Baidu 検索

目次1. JSONPとは何か2. JSONPクロスドメインリクエスト3. Baidu検索をシミュレー...

仮想マシンを作成し、VMware に Redhat Linux オペレーティング システムをインストールする (グラフィック チュートリアル)

VMware で仮想マシンを作成し、Redhat Linux オペレーティング システムをインスト...

スパンの最小高さを定義するソリューションは効果がありません

span タグは HTML ウェブページを作成するときによく使用されますが、このタグの使い方がよくわ...

Windows はリモート デスクトップが長時間自動的に切断されるのを防ぎます

Windows リモート デスクトップを使用してサーバーに接続したことがある人なら、リモート デスク...