微信小程序轮播图高度怎样按照比例自适应

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

<swiper indicator-dots="true" indicator-color="#fff" indicator-active-color="#9fc6ff" autoplay="true">
    <swiper-item><image class="banner" src="../static/images/banner1.jpg" alt="轮播1" style="height:{{height_swiper}}px"/></swiper-item>
    <swiper-item><image class="banner" src="../static/images/banner2.jpg" alt="轮播2" style="height:{{height_swiper}}px"/></swiper-item>
    <swiper-item><image class="banner" src="../static/images/banner3.jpg" alt="轮播3" style="height:{{height_swiper}}px"/></swiper-item>
</swiper>

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

var me=0;//代表当前页面的实例
var percent=414/150;//代表指定比例
Page({
  onShareAppMessage() {
    return {
      title: 'swiper',
      path: 'page/component/pages/swiper/swiper'
    }
  },

  data: {
    height_swiper:0,
    background: ['demo-text-1', 'demo-text-2', 'demo-text-3'],
    indicatorDots: true,
    vertical: true,
    autoplay: true,
    interval: 100,
    duration: 500
  },

  changeIndicatorDots() {
    this.setData({
      indicatorDots: !this.data.indicatorDots
    })
  },

  changeAutoplay() {
    this.setData({
      autoplay: !this.data.autoplay
    })
  },

  intervalChange(e) {
    this.setData({
      interval: e.detail.value
    })
  },

  durationChange(e) {
    this.setData({
      duration: e.detail.value
    })
  },

  onLoad:function(options){
    me=this;
    wx.getSystemInfo({
      success: function(result) {
        console.info(result.windowWidth);
        me.data.height_swiper=result.windowWidth/percent;
        me.setData({
          height_swiper:me.data.height_swiper
        })
      },
    })
  },
  selected_class:function(et){
    //console.info(et.currentTarget.dataset.cindex);//取得绑定的cindex，而后赋值
    me.setData({
      cindex:et.currentTarget.dataset.cindex
    });
  },
  onReady:function(){

  }
})