轮播图

简介 Introduction

• 应用轮播图效果；非常方便
• swiper：轮播容器
• swiper-item ：仅可放置在 swiper 组件中，宽高自动设置为100%
• Skyline模式 可以设置更多指示器 indicator 样式
• 更多信息，请访问 <swiper>

• 在页面的 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%;
}