微信小程序的swiper轮播图中的图片设置自适应高度的一种方法

微信小程序的swiper轮播图中的图片设置自适应高度的一种方法

小程序中的轮播图很简单，但是唯一的缺陷就是 swiper 是固定的150px 高度（320px 宽度），这样如果传入的图片大于这个高度就会被隐藏。那么如何让图片自适应不同分辨率是一个很重要的问题。

一种思路是：获取屏幕宽度，获取图片的宽高，然后等比设置当前屏幕宽度下 swiper 的高度。

1、wxml 结构

<swiper autoplay circular indicator-dots style="height: { 
        { 
        swiperHeight}};">
    <swiper-item wx:for="{
     
     {swiperData}}" wx:key="id">
      // 注意设置 mode="widthFix" 和 style="width: 100%;"
      <image mode="widthFix" src="{
     
     {item.image_src}}" style="width: 100%;" bindload="computeImgHeight"></image>
    </swiper-item>
  </swiper>

2、js 文件

Page({
    
    
    data: {
    
    
        swiperHeight: "",     // swiper的高度
    },
    computeImgHeight(e) {
    
    
    var winWid = wx.getSystemInfoSync().windowWidth;      //获取当前屏幕的宽度
    var imgh=e.detail.height;　　　　　　　　　　　　　　　 //图片高度
    var imgw=e.detail.width;
    var swiperH = winWid * imgh / imgw + "px"　           //等比设置swiper的高度。  
    //即 屏幕宽度 / swiper高度 = 图片宽度 / 图片高度  -->  swiper高度 = 屏幕宽度 * 图片高度 / 图片宽度
    this.setData({
    
    
      swiperHeight: swiperH		//设置swiper高度
    })
  }
})

3、效果