微信小程序之轮播图
效果图
实现
<swiper class="banner" indicator-dots="true" indicator-color="rgba(255,255,255,1)" indicator-active-color="#ff0000" autoplay="true" interval="100" circular="true">
<swiper-item >
<image src = "../../images/main.jpg" class="banner"/>
</swiper-item>
<swiper-item>
<image src = "../../images/banner.jpg" class="banner"/>
</swiper-item>
</swiper>属性介绍
| 属性 | 类型 | 默认值 | 必填 | 说明 | ||
|---|---|---|---|---|---|---|
| indicator-dots | boolean | false | 否 | 是否显示面板指示点 | 1.0.0 | |
| indicator-color | color | rgba(0, 0, 0, .3) | 否 | 指示点颜色 | 1.1.0 | |
| indicator-active-color | color | #000000 | 否 | 当前选中的指示点颜色 | 1.1.0 | |
| autoplay | boolean | false | 否 | 是否自动切换 | 1.0.0 | |
| current | number | 0 | 否 | 当前所在滑块的 index | 1.0.0 | |
| interval | number | 5000 | 否 | 自动切换时间间隔 | 1.0.0 | |
| duration | number | 500 | 否 | 滑动动画时长 | 1.0.0 | |
| circular | boolean | false | 否 | 是否采用衔接滑动 | 1.0.0 |
官方文档