<view class="page-section page-section-spacing swiper">
<swiper indicator-dots="{{indicatorDots}}" bindchange="swiperChange"
autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}"
style="height:{{imgheights[current]}}rpx;">
<block wx:for="{{background}}" wx:key="*this">
<swiper-item wx:key="*this" style="position: absolute;width: 100%;z-index:1;">
<image src="{{item}}" class="slide-image" class='img' bindload="imgLoad"/>
</swiper-item>
</block>
</swiper>
</view>
Page({
onShareAppMessage() {
return {
title: 'swiper',
path: 'page/component/pages/swiper/swiper'
}
},
data: {
imgwidth: 750,
imgheights: [],
},
imgLoad: 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
})
}
})