轮播图

<swiper>
说明
应用轮播图效果；非常方便；推荐 封装为组件 使用
swiper：轮播容器
swiper-item ：仅可放置在swiper组件中，宽高自动设置为100%
Skyline模式 可以设置更多指示器 indicator 样式
更多信息，请查看 官方文档 - swiper
通用属性 - swiper
属性 说明
indicator-dots 指示器
indicator-color 指示器颜色
indicator-active-color 当前指示器颜色
autoplay 自动播放；false
current 当前项目索引；0
interval 自动切换时间间隔；5000
duration 滑动动画时长；500
circular 是否采用衔接滑动；false
vertical 纵向；false
bindchange current 改变时会触发；可以获取当前项：e.detail.current
bindtransition swiper-item 的位置发生改变时会触发
bindanimationfinish 动画结束时会触发
自动、循环轮播图
在页面的 onLoad() 中从 大树小站 请求图片，或自行准备；imgs是data中的定义的数据
wx.request({
    url: 'https://glpla.github.io/utils/data/swiper.json',
    success: res => {
        console.log('res', res);
        this.setData({
            imgs: res.data.cont
        })
    }
})
使用列表渲染结构；指定循环、自动播放以及指示器的样式
<swiper class="swiper" indicator-dots indicator-color="#fff" indicator-active-color="#f40" autoplay circular>
    <swiper-item class="swiper-item" wx:for="{{imgs}}" wx:key="id">
        <image class="img" src="{{item.url}}" mode="aspectFill" />
    </swiper-item>
</swiper>
指定样式
.swiper{
    height: 30vh;
}
.img{
    width: 100%;
}