.wxml
<swiper style='height:{{Height}}' indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular='true' previous-margin="0rpx" next-margin="0rpx" indicator-color="#ccc" indicator-active-color="white">
<block wx:for="{{imgUrls}}" wx:key="index">
<swiper-item>
<image src="{{item}}" class="slide-image" bindload='imgheight' style='width:100%' />
</swiper-item>
</block>
</swiper>
.js
data: {
imgUrls: [
'https://images.unsplash.com/photo-1551334787-21e6bd3ab135?w=640',
'https://images.unsplash.com/photo-1551214012-84f95e060dee?w=640',
'https://images.unsplash.com/photo-1551446591-142875a901a1?w=640'
],
indicatorDots: true,
autoplay: true,
interval: 2000,
duration: 500,
Height:''
},
如果我们想设置图片为百分百我们还可以在.js里添加
imgheight(e){
var winWid = wx.getSystemInfoSync().windowWidth;
var imgh = e.detail.height;
var imgw = e.detail.width;
var swiperH = winWid * imgh / imgw + "px";
this.setData({
Height: swiperH
})
},
.wxss
想改变指示点位置
.wx-swiper-dots {
position: relative;
left: unset !important;
right: 0;
}
.wx-swiper-dots.wx-swiper-dots-horizontal {
margin-bottom: -5rpx;
}
