制作轮播图
swiper 标签
滑块视图容器。其中只可放置swiper-item组件,否则会导致未定义的行为。
轮播图外层容器 swiper
每一个轮播图 swiper-item
swiper标签 默认样式 wigth:100% height:150px
image 默认320*240
- autoplay 是否⾃动切换 默认5000ms
- interval ⾃动切换时间间隔
- circular 是否循环轮播
- duration 滑动动画时长 默认500ms
- indicator-dots 是否显⽰⾯板指⽰点
- indicator-color 指⽰点颜⾊
- indicator-active-color 当前选中的指⽰点颜⾊
更详细的请查阅官网文档:https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
代码示例:
<swiper autoplay interval="6000" circular duration="2500" indicator-dots indicator-color="0094ff" indicator-active-color="#ff0094">
<swiper-item><image
src="../../icon/绿花_1920x1080.png" /></swiper-item>
<swiper-item><image
src="../../icon/美女1.jpg" />
</swiper-item>
<swiper-item><image
src="../../icon/镜子.png" />
</swiper-item>
<swiper-item><image
src="../../icon/麦田.jpg" />
</swiper-item>
</swiper>
效果展示: