微信小程序幻灯的swiper标签宽和高度自适应

本方案解决微信小程序幻灯的swiper标签宽和高度自适应方案，费话少说直接上代码：

.wxhl中的代码：

<swiper indicator-dots='true' indicator-color='rgba(0,0,0,0.3)' indicator-active-color='#04997C' autoplay='true' interval='5000' class='banner' style='height:{{bannerHeight}}px'>
<block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" mode='{{mod[1]}}' bindload='imageLoad'></image>
    </swiper-item>
  </block>
</swiper>

css代码：
.banner{ width: 100%; height: auto; display: block;}
.slide-image{ width: 100%; display: block;}

js代码：

data: {
imgUrls: [
‘http://域名/images/banner1.jpg’,
‘http://域名/images/banner3.jpg’,
‘http://域名/images/banner2.jpg’
],
mod:[
‘aspectFit’,
‘widthFix’,
]
}
imageLoad: function (e) {
var res = wx.getSystemInfoSync();
var imgwidth = e.detail.width,
imgheight = e.detail.height,
ratio = imgwidth / imgheight;
this.setData({
bannerHeight: res.windowWidth / ratio
})
}

原理：先高所有的宽为100%，图的mode用”widthFix”让图片高度按宽度等比例缩放，再根据微信给的
wx.getSystemInfoSync()
这个函数获取屏幕的宽，然再获取图片的原高和宽，算出比例，用屏幕的宽除上比例就是我所需要现在swiper的高度值。

转载请注明：有客帮 » 微信小程序幻灯的swiper标签宽和高度自适应