显示目录

小程序轮播

微信小程序使用 Swiper 实现图片的轮播,Swiper 的结构如下:

1
2
3
4
5
6
7
8
9
<swiper indicator-dots="{{indicatorDots}}"
circular="{{circular}}"
autoplay="{{autoPlay}}"
interval="{{interval}}"
duration="{{duration}}">
<swiper-item><image src=""/></swiper-item>
...
<swiper-item><image src=""/></swiper-item>
</swiper>

swiper-item 的子标签可以是 image,或者 navigator 中放图片实现点击跳转等。


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!-- 文件名: swiper.wxml -->
<swiper indicator-dots="{{indicatorDots}}"
circular="{{circular}}"
autoplay="{{autoPlay}}"
interval="{{interval}}"
duration="{{duration}}">
<swiper-item wx:for="{{imgUrls}}" wx:for-item="url">
<image src="{{url}}" class="slide-image" mode="widthFix" style="width: 100%;"/>
</swiper-item>
</swiper>
<button bindtap="changeIndicatorDots">indicator-dots</button>
<button bindtap="changeAutoPlay">autoplay</button>
<view class="slider-box">
Interval <slider bindchange="intervalChange" show-value min="500" max="10000"/>
</view>
<view class="slider-box">
Duration <slider bindchange="durationChange" show-value min="1000" max="10000"/>
</view>
<view>
<image style="width: 100%;" mode="widthFix" src="http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg"/>
</view>
  • image 的 mode 设置为 widthFx,这样使得图片的高度通过 CSS 制定,高度自动的通过等比缩放计算得到。
  • 如果 duration 的值比 interval 的小,会有奇怪的问题,估计设计的时候 interval 的值包含了动画的 duration 时间和动画结束后的静止时间
1
2
3
4
5
6
7
8
9
10
11
/* 文件名: swiper.wxss */
slider {
flex: 1;
}
.slider-box {
display: flex;
flex-direction: row;
align-items: center;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// 文件名: swiper.wxss
Page({
data: {
imgUrls: [
'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg',
'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg'
],
indicatorDots: true,
autoPlay: true,
circular: true,
interval: 2000,
duration: 1000
},
changeIndicatorDots: function(e) {
this.setData({
indicatorDots: !this.data.indicatorDots
});
},
changeAutoPlay: function(e) {
this.setData({
autoPlay: !this.data.autoPlay
});
},
intervalChange: function(e) {
this.setData({
interval: e.detail.value
});
},
durationChange: function(e) {
this.setData({
duration: e.detail.value
});
}
});