ホームページ > WeChat アプレット > ミニプログラム開発 > スワイパーコンポーネントを使用してミニプログラムにカルーセル機能を実装する方法

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

不言
リリース: 2018-07-14 14:16:48
オリジナル
2790 人が閲覧しました

この記事では、ミニプログラムのカルーセル機能を実現するためのスワイパーコンポーネントの使用方法を主に紹介します。必要な友達はそれを参照できるように共有します。 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 サイトに注目してください。

関連する推奨事項:

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

以上がスワイパーコンポーネントを使用してミニプログラムにカルーセル機能を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート