小程序之 swiper高度根据图片高度变化

今天做的是这个效果⬇️  swiper的高度根据图片的高度而改变

 

wxml：
<swiper indicator-dots="{{indicatorDots}}" vertical="{{vertical}}" bindchange="bindchange" style="height:{{imgheights[current]}}rpx;">
　　<block wx:for='{{imgUrls}}' wx:key="{{index}}">
      <swiper-item>
        <image src="{{item}}" data-id='{{index}}' mode="widthFix" bindload="imageLoad"  style='width:100%;' bindtap='imgYu' data-src="{{item}}" data-list="{{item}}"/>
      </swiper-item>
    </block>
</swiper>

data: {
    pl: false,
    inputMB: false,
    zanimg: '../../../images/xin.png',
    classzan: '0',
    nu:false,
    swp:0,
    imgUrls: [
      
    ],
    hd: false,
    hd1: false,
    back:false,
    zz: false,
    hasUserInfo: false,
    canIUse: wx.canIUse('button.open-type.getUserInfo'),
    canIUse1: wx.canIUse('button.open-type.openSetting'),

    //是否采用衔接滑动  
    circular: true,
    //是否显示画板指示点  
    indicatorDots: true,
    //选中点的颜色  
    indicatorcolor: "#000",
    //是否竖直  
    vertical: false,
    //滑动动画时长毫秒  
    duration: 100,
    //所有图片的高度  
    imgheights: [],
    //图片宽度 
    imgwidth: 750,
    //默认  
    current: 0
},
imageLoad: function (e) {//获取图片真实宽度  
    var imgwidth = e.detail.width,
    var imgheight = e.detail.height,
    //宽高比  
    var ratio = imgwidth / imgheight;
    //计算的高度值  
    var viewHeight = 750 / ratio;
    var imgheight = viewHeight;
    var imgheights = this.data.imgheights;
    console.log("imgheights11", imgheights)
    //把每一张图片的对应的高度记录到数组里 +90是因为我给图片了一个width:100% 让图片宽撑满屏幕 如把100%去掉这个+90可去掉
    imgheights[e.target.dataset.id] = imgheight+90;
    console.log("imgheights22", imgheights)
    this.setData({
      imgheights: imgheights
    })
  },
  bindchange: function (e) {
    this.setData({ current: e.detail.current})
  },
　//图片点击事件 点击图片放大
  imgYu: function(event) {
    var src = event.currentTarget.dataset.src; //获取data-src
    var imgList = event.currentTarget.dataset.list; //获取data-list
    wx.previewImage({
      current: src, // 当前显示图片的http链接
      urls: [src]
    })
  },

 

 

代码参考：梦幻飞雪