微信小程序swiper轮播图高度自适应

痛定思痛。 2022-01-20 15:07 441阅读 0赞

**说明：swiper默认高度150px，且无法更改。**

**解决办法：**  
**wxml中：注意 style=‘height:\{ \{Height\}\}’、mode="widthFix"和 bindload='imgHeight’**

**wxss中：**

.tu {
    	width: 100%;
    }

**js中：注意单位是px，不能是rpx**

data: {
    	imgUrls: [
    		"/images/banner1.jpg",
    		"/images/banner2.jpg"
    	],
    	indicatorDots: true,
    	indicatorColor: 'white',
    	indicatorActiveColor: '#D75B1B',
    	autoplay: true,
    	circular: true,
    	interval: 5000,
    	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 								//设置高度，此处不能加;
    	})
    },