说明: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 //设置高度,此处不能加;
})
},