微信小程序swiper高度自适应

说明:swiper默认高度150px,且无法更改。

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

<view class="container">
	<swiper class="banner" indicator-dots="{{indicatorDots}}" indicator-color="{{indicatorColor}}" indicator-active-color="{{indicatorActiveColor}}" autoplay="{{autoplay}}" interval="{{interval}}" 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>
</view>

wxss中:

.tu {
	width: 100%;
}

js中:注意单位是px,不能是rpx

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

猜你喜欢

转载自blog.csdn.net/qq_38882327/article/details/91412211
今日推荐