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

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

.wxhl中的代码：

   <swiper class="banner" indicator-dots="true" autoplay="true" interval="3000"
     duration="500" indicator-color="{{beforeColor}}" 
     indicator-active-color="{{afterColor}}"  
       style='height:{{Height}}'>
        <block wx:for="{{movies}}" wx:for-index="index" wx:key="index">
            <swiper-item class="headerImg">
                <image bindtap="onProductsItemTap" data-item='{{item}}' 
                src="{{item.top_image}}" class="slide-image"
                 mode="widthFix" 
                  bindload='imgHeight'></image>
            </swiper-item>
        </block>
    </swiper>

css代码：

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

js代码：

data: {
  Height: ""
  }

// 轮播图宽高自适应

imgHeight: function (e) {

var that =this

var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度

var imgh = e.detail.height;//图片高度

var imgw = e.detail.width;//图片宽度

var swiperH = winWid * imgh / imgw + "px"//等比设置swiper的高度。 即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度 ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度

that.setData({

Height: swiperH//设置高度

})

},

原理：先高所有的宽为100%，图的mode用"widthFix"让图片高度按宽度等比例缩放，再根据微信给的

wx.getSystemInfoSync()

这个函数获取屏幕的宽，然再获取图片的原高和宽，算出比例，用屏幕的宽除上比例就是我所需要现在swiper的高度值。