相信大家在平常购物的时候都会看到轮播图，轮播图里面播放的是热门商品的信息。在小程序里面我们可以通过swiper滑动视图容器组件来实现，让我们一起来看下swiper组件都有哪些属性：

我们看到可以通过一些属性给视图容器增加一些指示点，这些指示点代表了这些滑块在容器中的位置。我们也可以设置指示点的颜色或者对当前选中的指示点设置颜色，同时我们也可以通过autoplay这个属性来设置自动播放轮播图。现在让我们通过一个实例来看下吧：

从图中我们可以看到，通过<button>组件我们可以设置轮播图的一些功能：

<!--index.wxml-->

<view>swiper组件</view>

<view class="section">

<view class="page-body">

<view class="page-section page-section-spacing swiper">

<swiper

indicator-dots="{{indicatorDots}}"

autoplay="{{autoplay}}"

interval="{{interval}}"

duration="{{duration}}"

bindchange="change"

bindanimationfinish="animationfinish"

>

<block wx:for="{{background}}" wx:key="*this">

<swiper-item>

<view class="swiper-item {{item}}"></view>

</swiper-item>

</block>

</swiper>

</view>

<view class="page-section" style="margin-top: 40rpx;margin-bottom: 0;">

<view class="weui-cells weui-cells_after-title">

<view class="weui-cell weui-cell_switch">

<view class="weui-cell__bd">指示点</view>

<view class="weui-cell__ft">

<switch checked="{{indicatorDots}}" bindchange="changeIndicatorDots" />

</view>

</view>

<view class="weui-cell weui-cell_switch">

<view class="weui-cell__bd">自动播放</view>

<view class="weui-cell__ft">

<switch checked="{{autoplay}}" bindchange="changeAutoplay" />

</view>

</view>

</view>

</view>

<view class="page-section page-section-spacing">

<view class="page-section-title">

<text>幻灯片切换时长(ms)</text>

<text class="info">{{duration}}</text>

</view>

<slider bindchange="durationChange" value="{{duration}}" min="500" max="2000" />

<view class="page-section-title">

<text>自动播放间隔时长(ms)</text>

<text class="info">{{interval}}</text>

</view>

<slider bindchange="intervalChange" value="{{interval}}" min="2000" max="10000" />

</view>

</view>

</view>

/*index.wxss*/

button {

margin-bottom: 30rpx;

}

button:last-child {

margin-bottom: 0;

}

.page-body {

width: 100%;

}

.page-section-title {

padding: 0;

}

.swiper-item {

display: block;

height: 150px;

}

.page-section-title {

margin-top: 60rpx;

position: relative;

}

.info {

position: absolute;

right: 0;

color: #353535;

font-size: 30rpx;

}

.page-foot {

margin-top: 50rpx;

}

.demo-text-1 {

position: relative;

align-items: center; /*居中对齐各项demo-text-1元素*/

justify-content: center; /*居中排列，周围留有空白*/

background-color: #1AAD19;

color: #FFFFFF;

font-size: 36rpx;

}

.demo-text-1:before { /*向demo-text-1元素前加入*/

content: 'A';

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

.demo-text-2 {

position: relative;

align-items: center;

justify-content: center;

background-color: #2782D7;

color: #FFFFFF;

font-size: 36rpx;

}

.demo-text-2:before {

content: 'B';

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%); /*旋转元素*/

}

.demo-text-3 {

position: relative;

align-items: center;

justify-content: center;

background-color: #F1F1F1;

color: #353535;

font-size: 36rpx;

}

.demo-text-3:before {

content: 'C';

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%);

}

//index.js

Page({

data: {

background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],

indicatorDots: true,

vertical: false,

autoplay: false,

interval: 2000,

duration: 300

},

changeIndicatorDots: function (e) {

console.log('切换指示点开关');

this.setData({

indicatorDots: !this.data.indicatorDots /*!在Javascript中是取反的意思*/

})

},

changeAutoplay: function (e) {

console.log('切换自动播放开关');

this.setData({

autoplay: !this.data.autoplay

})

},

intervalChange: function (e) {

console.log(`调整自动播放间隔时长为: ${e.detail.value}ms`);

this.setData({

interval: e.detail.value /*取值*/

})

},

durationChange: function (e) {

console.log(`调整幻灯片切换时长为: ${e.detail.value}ms`);

this.setData({

duration: e.detail.value

})

},

animationfinish: function(e) {

console.log(e);

},

change: function(e) {

console.log(e);

}

})

今天的内容就到这里了，我们明天见。