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 のその他のコンテンツにも注目していただければ幸いです。