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 ブラック スクリーン問題に対する完璧な解決策の詳細な説明

推薦する

Vueは、商品の数を制御するためのコンポーネントのパッケージ化と使用を実装します。

Vueのコントロール商品数量コンポーネントのカプセル化と使用は参考までに。具体的な内容は以下のとお...

HTMLドキュメントタイプの詳細な説明

私のは: <!DOCTYPE html>ブログガーデン: <!DOCTYPE HT...

CSS 属性を使用してマウス イベントをブロックする方法 (マウス クリックは上位の要素を貫通する可能性があります)

由来: 数日前、テスターから写真を見るという要件が送られてきました。 この要件を見たとき、私は少し混...

Nginx で 403 forbidden を解決するための完全な手順

ウェブページに403 Forbiddenと表示されるNginx (yum インストール ログは通常 ...

jQueryは、マウスをドラッグしてdivの位置とサイズを変更する方法を実装しています。

Windows フォームと同様の効果を得るには、中央をドラッグして div の位置を変更し、端をド...

MySQL パーティションテーブルの正しい使用方法

MySQL パーティションテーブルの概要数億、あるいは数十億ものレコードを格納するテーブルに遭遇する...

1 つの記事で Node.js の非同期プログラミングを学ぶ

目次 はじめに 同期 非同期とブロッキング JavaScript のノンブロッキング コールバック ...

Docker デプロイメントサービスの落とし穴を登る過程の詳細

初めて書きます。自己紹介させてください...みなさんこんにちは。私はジャスミンです。なぜジャスミンと...

MySql バッチに挿入するときにデータの重複を避ける方法

目次序文1. ignore を挿入2. 重複キーの更新時3. を置き換える要約する序文Mysql は...

W3C 検証に合格するにはどうすればいいですか?

W3C では、さまざまなタグの規定を設定するだけでなく、Web ページの作成者が実際に W3C 規...

フォーム要素の垂直方向の中央揃えに最適なソリューション

コードをコピーコードは次のとおりです。 <!DOCTYPE html PUBLIC "...

Angularコンポーネントライフサイクルの詳細説明(I)

目次概要1. フックの呼び出し順序2. onChangesフック3. 変更検出メカニズムとDoChe...

Dockerコンテナ内でホストDocker操作を呼び出して実行する

まず、この投稿は Docker 初心者向けです。もちろん、ベテランであれば記事中の分割線以降の操作方...

iviewは動的なフォームとカスタム検証期間の重複を実装します

フォーム項目を動的に追加するiview の動的なフォーム追加は非常に簡単です。フォーム項目を配列に設...

MySQL 外部キー制約の例の説明

MySQL の外部キー制約は、2 つのテーブル間のリンクを確立するために使用されます。 1 つのテー...