微信小程序轮播图自适应

wxml中：

<swiper class="banner" indicator-dots="{{indicatorDots}}" indicator-color="{{indicatorColor}}" indicator-active-color="{{indicatorActiveColor}}" autoplay="{{autoplay}}" interval="{{interval}}" circular="{{circular}}" style='height:{{Height}}'>
	<block wx:for="{{imgUrls}}" wx:key="key">
		<swiper-item>
			<image class="tu" src="{{item}}" mode="widthFix" bindload='imgHeight'/>
		</swiper-item>
	</block>
</swiper>

js中：

data: {
	imgUrls: [
		"/images/banner1.jpg",
		"/images/banner2.jpg"
	],
	indicatorDots: true, 							//是否显示面板指示点
	indicatorColor: 'white', 						//指示点颜色
	indicatorActiveColor: '#D75B1B',				//当前选中的指示点颜色
	autoplay: true, 								//是否自动切换
	interval: 5000, 								//自动切换时间间隔
	circular: true, 								//是否采用衔接滑动
	Height: "", 									//这是swiper要动态设置的高度属性
},

// 轮播图宽高自适应
imgHeight: function (e) {
	var winWid = wx.getSystemInfoSync().windowWidth;//获取当前屏幕的宽度
	var imgh = e.detail.height; 					//图片高度
	var imgw = e.detail.width; 						//图片宽度
	//等比设置swiper的高度。即 图片宽度 / 图片高度 = 屏幕宽度 / swiper高度 ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度。此处单位为px，不能是rpx。
	var swiperH = winWid * imgh / imgw + "px"; 
	this.setData({
		Height: swiperH 							//设置高度
	})
},