## [轮播图swiper](https://docs.alipay.com/mini/component/swiper)  [TOC] ### 1.基本配置 **** **** ### 2.轮播编写 #### index.wxml ``` <swiper indicator-dots="{{indicator-dots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"> <block wx:for="{{imgUrl}}" wx:key="index"> <swiper-item> <image src="{{item.url}}"></image> </swiper-item> </block> </swiper> ``` >1.swiper模板 2.block占位标签，无实际意义，用来包裹for循环 3.for固定格式：wx:for="{{imgUrl}}" wx:key="index" 内包裹标签 swiper-item 在该标签内写轮播图片地址 ***** #### index.wxss ``` swiper{ height: 400rpx; } ``` #### index.js ``` Page({ data: { imgUrl: [ { url: "/images/post/bl.png"}, { url: "/images/post/cat.png" }, { url: "/images/post/sls.png" }, ], indicatorDots: true, autoplay: true, interval: 4000, duration: 1000 }, }); ``` >在data中设置swiper模板中'{{ }}'内的各项参数 如图片地址、是否显示指示点、是否自动播放、间隔和每次停留时长等