小程式中使用swiper 元件 ，實現輪播圖高度自適應效果。

先上最終實現效果圖  

先看一下微信官方文件介紹  swiper 元件

程式碼部分

wxml:

<view class='images'>
  <swiper class='detail-imgs' indicator-dots="{{true}}" autoplay='{{true}}' interval="{{5000}}" duration="{{500}}" circular="{{true}}" bindchange='bindchange' style="height:{{imgheights[current]}}rpx;">
    <block wx:for="{{imgUrls}}">
      <swiper-item style="">
        <image src="{{item}}" class='image-view' style="height:{{imgheights[current]}}rpx;width:{{imgwidth}}rpx;" bindload="imageLoad" data-src='{{item}}'></image>
      </swiper-item>
    </block>
  </swiper>
</view>
 

js:

Page({
  data: {
    imgheights: [],
    current: 0,
    imgwidth: 750,
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'https://img3.doubanio.com/view/photo/l/public/p2494946035.webp',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg',
    ],
  },
  imageLoad: function (e) {
    //獲取圖片真實寬度
    var imgwidth = e.detail.width,
      imgheight = e.detail.height,
      src = [],
      //寬高比
      ratio = imgwidth / imgheight;
    console.log(e.target.dataset['src'])
    src.push(e.target.dataset['src'])
    console.log(src)
    //計算的高度值
    var viewHeight = 750 / ratio;
    var imgheight = viewHeight
    var imgheights = this.data.imgheights
    //把每一張圖片的高度記錄到數組裡
    imgheights.push(imgheight)
    this.setData({
      imgheights: imgheights,
    })
  },
  bindchange: function (e) {
    this.setData({
      current: e.detail.current
    })
  },
})
 

思路是這樣滴，，，在圖片 載入時通過 bindload imageLoad  將每張圖片的 寬高取出，計算好高度，存入陣列。swiper 元件 通過bindchange 監聽圖片切換 將當前圖片的在陣列中的位置（swiper元件中的位置）賦值 current ，以此動態的改變 頁面 圖片和swiper的高度。。。   但是，無意中發現一個問題，imageLoad  中列印 圖片的 src 發現 順序有時和圖片真實的順序是不一致的，把大圖放在陣列前面，但是卻是第三個第四個加載出來的。這就坑了，，導致加載出來計算的圖片高度陣列順序和真實的不一致。bindload 獲取的圖片順序不正確，不知道是不是因為圖片資源大小的緣故，故加了一個引數，嚴謹一點。。如果介面提供的引數裡返回了圖片的原始寬高 也可以不用這麼做。

在imageLoad中列印 index 哇 果然 順序是有誤的。

最終程式碼

<view class='images'>
  <swiper class='detail-imgs' indicator-dots="{{true}}" autoplay='{{true}}' interval="{{5000}}" duration="{{500}}" circular="{{true}}" bindchange='bindchange' style="height:{{imgheights[current]}}rpx;">
    <block wx:for="{{imgUrls}}" wx:key="{{index}}">
      <swiper-item style="">
        <image src="{{item}}" class='image-view' style="height:{{imgheights[current]}}rpx;width:{{imgwidth}}rpx;" bindload="imageLoad" data-src='{{item}}' data-index='{{index}}'></image>
      </swiper-item>
    </block>
  </swiper>
</view>

Page({
  data: {
    imgheights: [],
    current: 0,
    imgwidth: 750,
    imgUrls: [
      'https://img3.doubanio.com/view/photo/l/public/p2494946035.webp',
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg',
    ],
  },
  imageLoad: function (e) {
    //獲取圖片真實寬度
    var imgwidth = e.detail.width,
      imgheight = e.detail.height,
      //寬高比
      ratio = imgwidth / imgheight;
    //計算的高度值
    var viewHeight = 750 / ratio;
    var imgheight = viewHeight
    var imgheights = this.data.imgheights
    //把每一張圖片的高度記錄到數組裡
    imgheights[e.target.dataset['index']] = imgheight;// 改了這裡 賦值給當前 index
    this.setData({
      imgheights: imgheights,
    })
  },
  bindchange: function (e) {
    this.setData({
      current: e.detail.current
    })
  },
})

這次沒什麼問題了 把圖片較大的放在陣列前面，檢驗一下就知道了