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

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

.wxhl中的代码：

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的高度值。