微信小程序之swiper轮播图中的图片自适应高度的方法

1.结构

<swiper indicator-dots="{{indicatorDots}}" autoplay="{{autoplay}}" interval="{{interval}}" duration="{{duration}}" indicator-active-color="{{bg}}" style='height:{{Height}}'>
   <block wx:for="{{imgUrls}}">
    <swiper-item>
      <image src="{{item}}" class="slide-image" mode="widthFix" bindload='imgHeight'/>  //bindload是绑定图片加载的事件,记得给image加上mode=“widthFix”这个属性哦，还有就是设置这个image 100%宽度哟
    </swiper-item>
   </block>
</swiper>

swiper的各个属性在官方文档中都有，这里就不说明了。最主要的是： style='height:{{Height}}' //动态设置swiper的高度

2.在page里面

Page({
  data: {
    imgUrls: [
      '/pages/images/banner.png',
      '/pages/images/banner.png',
      '/pages/images/banner.png',
    ],
    indicatorDots: true,
    autoplay: true,
    interval: 5000,
    duration: 1000,
    circular: true,
    Height: "",
  },
  //设置图片轮显高度
  imgHeight: function (e) {
    var winWid = wx.getSystemInfoSync().windowWidth; //获取当前屏幕的宽度
    var imgh = e.detail.height; //图片高度
    var imgw = e.detail.width; //图片宽度
    var h = 25;
    //等比设置swiper的高度。 即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度  ==》swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度
    var swiperH = (winWid * imgh / imgw) + "px";
    this.setData({
      Height: swiperH //设置高度
    })
  },
  onLoad: function(options) {
    
  },
 
   onShow: function() {

  },
  onShareAppMessage: function() {

  }
})

总结：获取当前屏幕宽度： wx.getSystemInfoSync().windowWidth 

在小程序里动态设置属性，只有通过setData（{ }）来设置，和js中直接操作css样式有一点类似

注意：image如果外层有个容器装，然后image设置width为100%之后，距离装它的容器底部有一点距离，那是因为image是默认设置的display:inline-block属性，这个属性会产生间隙。如果要撑满容器，设置为display:block就可以了。

原文地址：https://www.jb51.net/article/138776.htm