``` //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模板中'{{ }}'内的各项参数 如图片地址、是否显示指示点、是否自动播放、间隔和每次停留时长等 ## **[查看具体属性参数](https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html)**