小程序swiper高度自适应
data: {
//图片
hdimg: [],
//是否采用衔接滑动
circular: true,
//是否显示画板指示点
indicatorDots: false,
//选中点的颜色
indicatorcolor: "#000",
//是否竖直
vertical: false,
//是否自动切换
autoplay: false,
//滑动动画时长毫秒
duration: 100,
//所有图片的高度
imgheights: [],
//图片宽度
imgwidth: 750,
//默认
current:0
},
imageLoad: function (e) {
//获取图片真实宽度
var imgwidth = e.detail.width,
imgheight = e.detail.height,
//宽高比
ratio = imgwidth / imgheight;
console.log(imgwidth, imgheight)
//计算的高度值
var viewHeight = 750 / ratio;
var imgheight = viewHeight
var imgheights = this.data.imgheights
//把每一张图片的高度记录到数组里
imgheights.push(imgheight)
this.setData({
imgheights: imgheights,
})
},
bindchange: function (e) {
console.log(e.detail.current)
this.setData({ current: e.detail.current})
}
<view>
<swiper class="swiper" indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" autoplay="{{autoplay}}" duration="{{duration}}" bindchange="bindchange" circular="{{circular}}" style="height:{{imgheights[current]}}rpx;">
<block wx:for="{{hdimg}}" wx:key="{{index}}">
<swiper-item >
<image src="{{item}}" mode="aspectFit" bindload="imageLoad"
class=".itemimage" style="height:{{imgheights[current]}}rpx;width:{{imgwidth}}rpx;"/>
</swiper-item>
</block>
</swiper>
</view>
.swiper {
width: 100%;
}