図ループの小さなマイクロチャネル・プログラム開発（VI）の製造

私たちはしばしば、この記事で私は、外観を完了するために、この機能を行くことができますアプレットで、円形のスクロールカルーセル画像が含まれ、これはそれを行う方法で、参照してください。

：完成レンダリングで見てみましょう

 

 

レンダリングから、我々はそこにカルーセル図3は、カルーセルの写真、現在のページこともできます応答をクリックしていることがわかります。

最初は、それらの3枚の画像フォルダと準備ができて、プロジェクトのルート・イメージに設立されました。具体的には、図示のように：

 

 特定の参照コード：

JSファイルのコード：

ページ（{ 
  / * * 
   *页面的初始数据
   * / 
  データ：{ 
    imageItems：[{ 
      ID： 1 、
      IMGSRC： "../../images/1.png" 、
      リンク：「のhttp：// WWW。 test.com/id=1" 
    }、{ 
      ID： 2 、
      IMGSRC： "../../images/2.png" 、
      リンク： "http://www.test.com/id=2" 
    }、 { 
      ID： 15 、
      IMGSRC： "../../images/15.png" 、
      リンク： "http://www.test.com/id=15" 
    }]、
    情報： ""
  }、
  / * 画像のイベントハンドラをクリックします* / 
  imgTap：機能（のparams）{
     / * * 
     パラメータのセット*オーバー代わっパスparamsは
     、データを通じて* wxmlページを- **フォーマットが通り過ぎる
     のjsの関数でparams.currentTargetで*。 。データセット**の方法は、取得する
     * / 
    / * リンクパラメータのコンソール出力を超える*デバッガパス* / 
    console.info（params.currentTarget.dataset.linkを）; 
    / * *ヒントで表示されるパラメータID上を通過
     IDは整数であるため、タイトルのみ「に変換するアプローチを」我々は+を使用する必要があるので、文字列型の値を受け入れることができる、ということ*注
     * / 
    wx.showToast（{ 
      ：params.currentTarget.dataset.idタイトル「+」、
    }）
    / * *動的データセットの値がどのように次のコードを示し
     *情報がリンク上を通過するようにパラメータの値を設定する
    * / 
    この.setData（{ 
      情報：params.currentTarget.dataset.link 
    }）
  } 
}）

 

 wxssファイルコード：

.swiperItem { 
    幅：100％ 。
    高さ：500rpx。    
}

 

wxmlファイルコード：

< swiperのクラス= "swiperItem" インジケータドット= "真" インジケータ色= "RGBA（0,0,0、.3）" 自動再生= "true"の 
    間隔= "5000" 期間= "1000" 円形の真」= " > 
    
    < ブロックWXのための：=" {{imageItems}}」WX：キー= "*この" WX：のための項目= "IMG" > 
        < swiper項目> 
            < 画像クラス= "swiperItem" bindtap = "imgTap" データリンク=」{{img.link}}」 データID = "{{img.id}}" SRC= "{{img.imgsrc}}" モード= "aaspectFill" レイジー負荷= "偽" >              
            </ 画像> 
        </ swiper項目> 
    </ ブロック> 
</ swiper > 

< テキストスタイル= "色：赤。幅：100％;高さ：50rpx」> {{先}} </ テキスト>

 

マイクロ手紙アプレットカルーセル画像は、既製の部品が私たちのためにswiper提供します。

メインswiperのプロパティ説明：

インジケータドット：回転するかどうか、すなわち、ドットは以下インジケータ

自動再生：自動再生するかどうかを

間隔：各画像の切り替えの時間間隔（ミリ秒）

期間：スイッチングがミリ秒かかります

他の特定の使用は、文書それ、子供たちを見ます。

https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html 

主な説明：

bindtapがイベントを結合され、imgTapはJSファイルインシデント対応機能で行われます

DATA- *パラメータ名であるイベントに渡されたパラメータ*、本実施形態では、2つの送信パラメータ、リンクIDおよび

OK！カルーセルは、近くに仕上がっています！質問、コメントがあります！

私が懸念しています、あなたはより良い学習体験を取得します！