广告轮播图几乎每个小程序都会用到的，所以有必要讲解一下，老规矩，先看效果图，其实不看我相信大家也都知道，拿出来讲就是让大家熟悉一下小程序基础控件swiper的属性
效果图.gif
swiper属性介绍
| 属性名 | 作用 | 参数值 |
|---|---|---|
| indicator-dots | 是否显示面板指示点 | true/false 默认是false |
| indicator-color | 指示点颜色 | 默认值rgba(0, 0, 0, .3) |
| indicator-active-color | 当前选中的指示点颜色 | 默认颜色#000000 |
| autoplay | 是否自动切换 | true/false 默认是false |
| interval | 自动切换时间间隔 | number 默认是5000 |
| duration | 滑动动画时长 | number 默认是500 |
| vertical | 滑动方向是否为纵向 | true/false 默认是false |
| bindchange | current 改变时会触发 change 事件，event.detail = {current: current, source: source} |
广告轮播图效果的实现
一、wxml界面的实现
<view class='title-line'>swiper</view>
<!-- banner -->
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" vertical="{{isVertical}}" duration="{{duration}}" circular='false'>
<swiper-item wx:for="{{imgUrls}}">
<image src="{{item}}" />
</swiper-item>
</swiper>
滑动进度条控制滚动过度时间
<slider bindchange="durationChange" show-value min="500" max="2000"/>
<view class='line'></view>
<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" vertical="{{true}}" duration="{{duration}}" circular='true'>
<block wx:for="{{imgUrls}}">
<swiper-item>
<image src="{{item}}" />
</swiper-item>
</block>
</swiper>
界面实现简单，运用小程序封装的控件swipe就可以轻松实现，为了对比效果，我生成了两个广告轮播图，一个是横行滚动，一个是纵向滚动
二、xxx.js属性的控制
Page({
data: {
// banner
imgUrls: [
'http://7xnmrr.com1.z0.glb.clouddn.com/red.png',
'http://7xnmrr.com1.z0.glb.clouddn.com/yellow.png',
'http://7xnmrr.com1.z0.glb.clouddn.com/green.png'
],
indicatorDots: true, //是否显示面板指示点
autoplay: true, //是否自动切换
interval: 3000, //自动切换时间间隔,3s
duration: 1000, // 滑动动画时长1s
},
durationChange:function(e)
{
this.setData({
duration: e.detail.value
})
},
js中的属性我都在代码中注释了，想要更改属性，直接修改对应的值就好，durationChange是用来控制滑动动画时长的，通过滑动进度条即可
三、wxss样式
* 直接设置swiper属性 */
swiper {
height: 400rpx;
}
swiper-item image {
width: 100%;
height: 100%;
}
别小看这几行代码，代码君之前为了设置轮播图从满屏幕，找了好久，才设置成功的，一般使用的时候，把上面代码拷贝进去就行，顶多去设置一下swiper的高度
总结
今天周五，所以讲解的内容也比较少，相信大家看一遍，大概就学的差不多啦，最后祝大家周末愉快~
