1. 程式人生 > >小程序--swiper輪播圖組件

小程序--swiper輪播圖組件

query light developer 控制 url per size 有一個 weixin

效果圖展示:

技術分享圖片

先了解下swiper組件參數配置

技術分享圖片

輪播實現的具體步驟如下:

第一步:添加圖片素材,我這邊是放到images下,文件以及圖片名字自定義即可。

技術分享圖片

第二步:在wxml中進行頁面布局

在這裏呢,用到了列表渲染、 swiper組件,三元運算符(註:由於小程序不能操作dom,三元運算符還有一個常用的使用場景是控件class樣式輸出,達到jQuery.addClass()的效果)

 <view class="swiper-container">
  <swiper autoplay="auto" interval="5000" duration="500" current="{{swiperCurrent}}" bindchange="swiperChange" class="swiper">
    <block wx:for="{{slider}}" wx:key="unique">
      <swiper-item>
        <image src="{{item.picUrl}}" class="img" data-index="{{index}}"></image>
      </swiper-item>
    </block>
  </swiper>
  <view class="dots">
    <block wx:for="{{slider}}" wx:key="unique">
      <view class="dot {{index == swiperCurrent ? ‘ active‘ : ‘‘
}}"></view> </block> </view> </view>

第三步:在js中創建圖片列表,以便於進入頁面的時候就會渲染圖片。

      紅色標註為,swiperChange方法中傳入的參數用於三木運算符控制輪播圖下面的圓點樣式。

/**
   * 頁面的初始數據
   */
  data: {
    slider:[
      {picUrl:‘../images/1.jpg‘},
      { picUrl: ‘../images/2.jpg‘ },
      { picUrl: ‘../images/3.jpg‘ }
    ],
    swiperCurrent:0,
  },
  //輪播 組件控制
  swiperChange:function(e){
    this.setData({
      swiperCurrent
:e.detail.current
}) },

小程序--swiper輪播圖組件