![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/6dce143c278443378c366fec42f877da.gif)
<view>
<swiper indicator-dots="true"
autoplay="true" interval="3000" duration="1000">
<block wx:for="{{imgUrls}}">
<swiper-item>
<image mode="aspectFill" src="{{item}}" class="slideimage"/>
</swiper-item>
</block>
</swiper>
</view>
page {
display: block;
min-height: 100%;
background: #eeeeee;
}
swiper{
height:480rpx;
}
.slide-image{
width: 100%;
height:480rpx;
}
page .wx-swiper-dots.wx-swiper-dots-horizontal{
margin-bottom: -4rpx;
}
page .wx-swiper-dot{
width: 40rpx;
display: inline-flex;
height: 18rpx;
vertical-align: sub;
}
page .wx-swiper-dot::before{
content: '';
background: #e5e5e5;
flex-grow: 1;
}
page .wx-swiper-dot-active::before{
content: '';
background:rgba(240,0,0,0.8);
flex-grow: 1;
}
Page({
data: {
imgUrls: [
'http://wx.leadingdo.com/images/image1.jpg',
'http://wx.leadingdo.com/images/image2.jpg',
'http://wx.leadingdo.com/images/image3.jpg'
],
indicatorDots: true,
autoplay: true,
interval: 3000,
duration: 1000,
circular: true
}
})