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

图片自适应在网站上是内置好的，只需要设置宽度即可，但在微信小程序非要做一个封装，高度不是随宽度自适应，真是操蛋，不过谁叫在人家的平台的搞呢，还是不得不屈服于小马哥的淫威啊。。

在微信小程序上实现图片自适应需要配合javascript脚本，也就是需要动态计算才能实现，具体修改如下：

先看下view层是什么样的

因为设置了导航样式为自定义，所以需要给轮播图加个margin-top值 ，不然会被小程序功能按钮遮挡

{
  "usingComponents": {},
  "navigationStyle": "custom"
}

下面看下数据是如何计算的（注释很详细），如果不想细看的话，直接对着撸就行了

Page({
  data: {
    list: [],
    carouselList: [
      {image: '../../images/img-wx-gzh.png'},
    ],
    carouselMarginTop: 0, // 这两个初始值必须要设置
    carouselHeight: 0
  },
  onLoad: function() {
    this.adaptCarouselMarginTop(); // 适配轮播图外间距
  },
  // 适配轮播图外间距
  adaptCarouselMarginTop() {
    let systemInfo = wx.getSystemInfoSync(),
      pxToRpxScale = 750 / systemInfo.windowWidth, // px转换到rpx的比例
      ktxStatusHeight = systemInfo.statusBarHeight * pxToRpxScale, // 状态栏高度
      navigationHeight = 44 * pxToRpxScale; // 导航高度，44是大概估值
    this.setData({
      carouselMarginTop: navigationHeight + ktxStatusHeight + 10 // 10是一个预估值，可根据呈现效果修改
    });
  },
  // 适应轮播图高度
  adaptCarouselHeight(e) {
    let imgWidth = e.detail.width, // 原图宽高
      imgHeight = e.detail.height,
      screenWidth = wx.getSystemInfoSync().screenWidth; // 手机屏幕宽度
    let ratio = (screenWidth - screenWidth/750*60) / imgWidth;
    this.setData({
      carouselHeight: imgHeight * ratio
    });
  }
}

欢迎关注：https://www.fenxianglu.cn/