小程式swiper圖片自適應高度
阿新 • • 發佈:2019-01-10
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 }) }, })