スワイパーコンポーネントを使用してミニプログラムにカルーセル機能を実装する方法-ミニプログラム開発-php.cn

スワイパーコンポーネントを使用してミニプログラムにカルーセル機能を実装する方法

不言

リリース： 2018-07-14 14:16:48

オリジナル

2797 人が閲覧しました

この記事では、ミニプログラムのカルーセル機能を実現するためのスワイパーコンポーネントの使用方法を主に紹介します。必要な友達はそれを参照できるように共有します。 Android ViewPager では、カルーセルと同様の効果が得られます。Android の ViewPager と比較して、スワイパーは実装がより便利で高速です。

レンダリング:

まず、スワイパーでサポートされている属性を見てみましょう:

カルーセル関数の具体的な実装:

1. カルーセル画像マテリアルを追加します

プロジェクト内画像リソースを保存するための新しいディレクトリをルートディレクトリの下に作成します

プロジェクト内の位置 (キー: コードの赤い太字の部分)

Page({  /**
   * 页面的初始数据   */
  data: {    imgs:["../../images/aaa.jpg","../../images/bbb.jpg","../../images/ccc.jpg"]
  },  /**
   * 生命周期函数--监听页面加载   */
  onLoad: function (options) {
    
  },  /**
   * 生命周期函数--监听页面初次渲染完成   */
  onReady: function () {
    
  },  /**
   * 生命周期函数--监听页面显示   */
  onShow: function () {
    
  },  /**
   * 生命周期函数--监听页面隐藏   */
  onHide: function () {
    
  },  /**
   * 生命周期函数--监听页面卸载   */
  onUnload: function () {
    
  },  /**
   * 页面相关事件处理函数--监听用户下拉动作   */
  onPullDownRefresh: function () {
    
  },  /**
   * 页面上拉触底事件的处理函数   */
  onReachBottom: function () {
    
  },  /**
   * 用户点击右上角分享   */
  onShareAppMessage: function () {
    
  }
})

ログイン後にコピー

3. ファイルの構成を表示する

1. ページディレクトリ内の wxml ファイルにコードを記述する

使用する知識ポイント: リストレンダリング、スワイパーコンポーネント

<view class="container">
  <view >
    <swiper indicator-dots=&#39;true&#39; autoplay=&#39;true&#39; interval=&#39;3000&#39; duration=&#39;200&#39; circular=&#39;true&#39; bindtap=&#39;clickSwiper&#39;>
      <block wx:for="{{imgs}}" wx:key:="*this">
        <swiper-item>
          <image src="{{item}}"  class="slide-image" mode=&#39;aspectFill&#39; data-index="{{index}}"></image>
        </swiper-item>
      </block>
    </swiper>
  </view>
</view>

ログイン後にコピー

4. スワイパーのクリックイベントについて

それぞれをクリックすることで3 番目のステップから、コンポーネントに対して、bindtap 属性が定義されており、その属性値が js に対応していることがわかります。ページの下のメソッド

ページの下の .js ファイルに対応するクリックメソッドを追加します:

アウトスルーアウトスルーアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウトアウト‐‐‐‐ と

がこのページの .js ファイルに含まれる予定です。その他の関連コンテンツについては、PHP 中国語 Web サイトに注目してください。