小程序--swiper輪播圖組件
阿新 • • 發佈:2018-07-18
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輪播圖組件