微信小程序--顶部轮播图

效果图

市面是手机尺寸有很多，那如何让我们的轮播图根据手机来进行自适应呢？
常见的手机尺寸：

wxml

<view>
    <swiper indicator-dots='true' mode="widthFix" indicator-color='#333' indicator-active-color='#f30' autoplay='true' style="height:{{imgheights}}px;">
      <swiper-item class="banneritem" wx:for="{{bannerUrls}}" wx:key="url">
      <!-- mode="widthFix" 这个属性是图片高度自适应 -->
        <image src='{{item.url}}' mode="widthFix" ></image>
      </swiper-item>
    </swiper>
</view>

WXSS

.banneritem{
  width: 100%;
}
.banneritem image{
  width: 100%;
}

JS

const app = getApp();
var page = 1;
Page({
  data: {
   bannerUrls: [ //轮播图的图片
      {
        url: '/images/banner1.jpeg',
        linkUrl: ''
      },
      {
        url: '/images/banner2.jpeg',
        linkUrl: ''
      },
      {
        url: '/images/banner3.jpeg',
        linkUrl: ''
      }
    ],
 	imgheights:''
  },
 onLoad:function(){
 	var that = this;
    that.imageLoad();
 },
  imageLoad: function () {
    var that = this;
    wx.getSystemInfo({
      success: function (res) {
      //我们设计图片的尺寸是750*388
        var width = res.windowWidth;//获取当前屏幕的宽度
        var rao = 750/width; //图片宽度／屏幕的宽度
        var height = 388/rao; //图片高度／比例
        that.setData({
          'imgheights':height //设置等比缩放的宽度
        })
      },
    })
  }
});