swiper 组件无法自适应高
内容是图片 图片的mode 设置了 widthFix 属性
<swiper indicator-dots= "{{indicatorDots}}" autoplay= "{{autoplay}}" interval= "{{interval}}" duration= "{{duration}}" > <block wx: for = "{{imgUrls}}" wx:key= "{{index}}" > <swiper-item> <image src= "{{item}}" class = "slide-image" style= "width:100%" mode= "widthFix" /> </swiper-item> </block> </swiper> <button bindtap= "changeIndicatorDots" > indicator-dots </button> <button bindtap= "changeAutoplay" > autoplay </button> <slider bindchange= "intervalChange" show-value min= "500" max= "2000" /> interval <slider bindchange= "durationChange" show-value min= "1000" max= "10000" /> duration |
< swiper wx:for='{{array}}' style = 'height:{{ heights[index] || 50 }}px' >
< swiper-item >
< view class = 'getThisHeight' >
...这里放自适应内容
</ view >
</ swiper-item >
</ swiper >
justifyHeight: function () {
let that = this
let hs = []
wx.createSelectorQuery().selectAll( '. getThisHeight ' ).boundingClientRect( function (rects) {
rects.forEach((v, i) => {
hs[i] = v.height
})
that.setData({
heights: hs,
})
}).exec()
},
啊,找了半天swiper-item高度自适应的方法,你这个才是正解啊,太感谢了~~~
.slide-image,swiper-item,swiper{
width:100%;
height:400rpx;
}
使用rpx