小程序之 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]
    })
  },

 

 

代碼參考：夢幻飛雪