微信小程序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}}" circular="{{circular}}" 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,
	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 								//设置高度,此处不能加;
	})
},
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值