JavaScript でのカスタム スワイパー コンポーネントの詳細な説明

JavaScript でのカスタム スワイパー コンポーネントの詳細な説明

エフェクト表示

ここに画像の説明を挿入

コンポーネント設定

ステップ1

ページディレクトリに新しいフォルダcomponentsを作成します。

ステップ2

コンポーネントの下に新しいフォルダスワイパーを作成します

swiperディレクトリに4つの新しいファイルを作成します。

  • スワイパー。
  • jsswiperさん。
  • jsonswiper.wxml
  • スワイパー

各ファイルの配置図は以下のとおりです。

ここに画像の説明を挿入

注意: この時、コンパイルでエラーが報告されます。エラーは json で表示されます。気にしないでください。後でコードをコピーして貼り付け、コンパイルしてください。

ステップ3

次のコードをswiperディレクトリの4つのファイルにそれぞれコピーします。

スワイパー

ここに画像の説明を挿入

スワイパー

ここに画像の説明を挿入

スワイパー.wxml

ここに画像の説明を挿入

スワイパー

ここに画像の説明を挿入

コンポーネントの使用

ステップ1

スワイパーコンポーネントが必要なページのJSONファイルにコンポーネントを導入します。

{
  "コンポーネントの使用": {
    「カスタムスワイパー」: 「../components/swiper/swiper」
  }
}

注意:…/components/swiper/swiper はコンポーネントの位置を示します。実際に設定した位置関係に応じて置き換えてください。

ステップ2

ページのwxmlページで、コンポーネントコードを使用します。

<カスタムスワイパーimgUrls="{{carouselImgUrls}}" />

カルーセル画像URL

タイプ: 配列 目的: スライドショー画像のアドレス (ネットワーク アドレスまたはローカル アドレス) を格納するために使用されます

ステップ3

ページのjsファイルのデータにcarouselImgUrls変数を追加します

  データ: {
    カルーセルImgUrls: [
    /*
    写真の数はカスタマイズされています。画像ソース:Weibo著者:Girl Rabbit iiilass ​​​​​
 	侵害と削除 */
      「https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixv69f6j20j60j60ui.jpg」、
      「https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixvage4j20j60j6tah.jpg」、
      「https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixvadfnj20j60j60uk.jpg」、
      「https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixvdcswj20j60j6jt6.jpg」、
      「https://wx1.sinaimg.cn/mw2000/7f97a73fly1gsgixv6kmbj20j60j6dhg.jpg」
    ]、
  },

最後に、コードをコンパイルするだけで効果図が得られます。

ここに画像の説明を挿入

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript の矢印関数と通常の関数の違いの詳細な説明
  • JavaScript でカルーセル効果を実装する
  • ボタンをクリックして画像を切り替える JavaScript
  • JavaScriptで配列かどうかを判断するためのさまざまな方法のまとめ
  • 花火効果を実現するJavaScript(オブジェクト指向)
  • JavaScript Canvas で三目並べゲームを実装
  • JavaScriptのループの違いについての詳細な説明
  • JavaScript コードを省略する一般的な方法の概要
  • あなたをエキスパートに見せるための 13 個の JavaScript ワンライナー

<<:  IDEA の Maven プロジェクトで MySQL 8.0 に接続して使用する方法に関するチュートリアル

>>:  MacOS Catalina アップグレード後の VMware ブラック スクリーン問題に対する完璧な解決策の詳細な説明

推薦する

Windows での MySQL5 グリーン バージョンのインストールの概要 (推奨)

1 MySQLをダウンロードするダウンロードアドレス: http://downloads.mysq...

Prometheusコンテナのデプロイメントのための実用的なソリューション

環境ホスト名IPアドレス仕えるプロメテウス192.168.237.137プロメテウス、グラファナノー...

HTMLとリソースがどのように読み込まれるかを理解します

このブログのすべてのコンテンツは、クリエイティブ コモンズ ライセンスの下でライセンスされています。...

Vue 監視属性のグラフィック例の詳細な説明

目次リスナープロパティとは何ですか?リスニングプロパティと計算プロパティの違いは何ですか?監視プロパ...

Linuxターミナルでの一般的なMySQL操作コマンドの詳細な説明

仕える: # chkconfig --list すべてのシステム サービスを一覧表示します # ch...

Mysql のいくつかの複雑な SQL ステートメント (重複行のクエリと削除)

1. 重複行を見つける blog_user_relation a から * を選択 WHERE (...

docker-compose を使用して mongodb と mysql を構築する詳細なプロセス

docker-compose で mongodb と mysql を構築する詳細な方法を見てみましょ...

MySQL のインデックスとビューの使用方法と違いの詳細な説明

序文この記事では主に、MySQL のインデックスとビューの使用方法と違いを紹介し、参考と学習のために...

MySQL 外部キー制約 (FOREIGN KEY) ケースの説明

MySQL 外部キー制約 (FOREIGN KEY) はテーブルの特別なフィールドであり、主キー制約...

mysql5.7 でユーザーの初期パスワードを変更する方法

ユーザーが初めて MySQL データベースをインストールするとき、初期のルート パスワードを変更する...

MySQL の完全なデータベース バックアップからデータベースとテーブルを復元する方法

公式の MySQL ダンプ ツールで、特定のデータベースのみを復元するにはどうすればよいですか?完全...

MySQLでのカスタムパラメータの使用に関する詳細な説明

MySQL 変数には、システム変数とシステム変数が含まれます。今回の学習課題はユーザー定義変数です。...

Vueはシンプルなメモ帳機能を実装します

この記事では、参考までに、簡単なメモ帳機能を実装するためのVueの具体的なコードを紹介します。具体的...

JavaScript の querySelector メソッドと getElementById メソッドの違いを分析する

目次1. 概要1.1 querySelector() と querySelectorAll() の使...