微信小程序 轮播图高度自适应

1.wxml 文件

                <block wx:for="{{data.gallery}}" wx:key="index">
                    <swiper-item>
                        <image class="wh" src="{{item.image_url}}" bindload="setContainerHeight" />
                    swiper-item>
                block>
            swiper>

2. js 文件中的数据绑定

data: {
    height:0,//图片高度这里插入代码片
    }

3. setContainerHeight 函数的实现（代码上有解释，就不多说了）

// 设置轮播图容器的高度
setContainerHeight:function(e){
  console.log(e)
  // 图片的原始宽度
  var imgWidth = e.detail.width
  console.log(imgWidth)//866
  // 图片的原始高度
  var imgHeight = e.detail.height//1440
  // 同步获取设备宽度
  var sysInfo = wx.getSystemInfoSync();// 672 411
  console.log('sysInfo',sysInfo)
// 获取屏幕的宽度
var screenWidth = sysInfo.screenWidth
console.log("scrrrnWidth",screenWidth)//411
// 获取屏幕和原图的比例
var scale = screenWidth / imgWidth
console.log(scale)//0.5
// 设置容器的高度
this.setData({
  height:screenWidth
})
console.log(this.data.height)
},

4.别忘了 wxss 里面的样式哦。少了这个样式，显示不了的。

.wh{
    width:100%;
    height: 100%;
    display: block;
}