WXML:
<swiper indicator-dots="{{indicatorDots}}" style="height:{{height}}px"
class="swipe_container" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" circular="true">
<block wx:for="{{imgArray}}">
<swiper-item>
<image src="{{item.filePath+item.fileName}}" mode="widthFix" class="slide-image" bindload="setContainerHeight"/>
</swiper-item>
</block>
</swiper>
WXSS:
.swipe_container{
width:100%;
}
.slide-image{
width:100%;
}
JS:
Page({
data: {
imgArray:[],
indicatorDots: true,
autoplay: true,
interval: 5000,
duration: 1000,
height:0
},
setContainerHeight:function(e){
var imgWidth=e.detail.width; //图片的原始宽度
var imgHeight = e.detail.height; //图片的原始高度
var sysInfo = wx.getSystemInfoSync();//同步获取设备宽度
var screenWidth=sysInfo.screenWidth; //获取屏幕的宽度
var scale = screenWidth / imgWidth; //获取屏幕和原图的比例
this.setData({
height:imgHeight*scale
})
},
})