最新消息:本站所有跳转向bbs.ykit.cn的附件将全面停止,附件已转移到https://www.qingsj.com

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

JavaScript 有客 415浏览

本方案解决微信小程序幻灯的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标签宽和高度自适应