前兩天寫商品詳情頁功能時(shí)，遇到這個(gè)問題，在最上面的swiper輪播圖設(shè)置固定高度，沒有問題，下面遇到圖文詳情，規(guī)格參數(shù)等需要用到swiper時(shí)不能完全展示數(shù)據(jù)，只能顯示swiper默認(rèn)高度的數(shù)據(jù)，因?yàn)槭莿?dòng)態(tài)加載數(shù)據(jù)，所以也不能將高度寫死。于是想到了動(dòng)態(tài)計(jì)算高度的方法。
展示我要做的頁面：

展示.jpg

下面展示代碼：

<scroll-view class="detail" scroll-y bindscroll="onScrollChane" scroll-top="{{topNum}}">
  <!-- 輪播圖 -->
  ...
  <!-- 介紹 -->
  ...
  <!-- 評價(jià) -->
  ...
  <!-- 詳情專區(qū) -->
  <view class="LocationTitle" id="detailImgs" />
  <w-tab-control titles="{{detailTitles}}" bind:tabclick="tabClick" />
  <swiper style="height:{{swiperItemH}}px" current="{{detailTab}}">
    <!-- 商品介紹 -->
    <swiper-item>
      <block wx:for="{{detailImgsList}}" wx:key="index">
        <image class="detailPicter" wx:if='{{item}}' src="{{item}}" bindload="onImageLoad" mode="widthFix" />
      </block>
    </swiper-item>
    <!-- 規(guī)格參數(shù) -->
    <swiper-item>
      <w-spe-param id="w-spe-param" speParam="{{speParam}}" />
    </swiper-item>
    <!-- 商品咨詢 -->
    <swiper-item>
      <w-consult id="w-consult" consultData="{{consultData}}" haveData="{{consultData.length>0?true:false}}" />
    </swiper-item>
  </swiper>
  <!-- 分享按鈕 -->
  ...
  <!-- 頭部標(biāo)題 -->
  ...
</scroll-view>
<!-- 底部按鈕 -->
...

主要計(jì)算高度js代碼

//加載完圖片，將圖片同比例縮放后計(jì)算高度
onImageLoad(e) { //計(jì)算圖文詳情高度
    let winWid = wx.getSystemInfoSync().windowWidth;
    let imgW = e.detail.width;
    let imgH = e.detail.height;
    let swiperHight = winWid * imgH / imgW;
    let oldH = this.data.swiperH;
    this.setData({
      swiperH: oldH + swiperHight,
      swiperItemH: oldH + swiperHight
    })
  },
tabClick(e) { //切換圖文詳情tab事件
    var itemH = 0;
    //創(chuàng)建節(jié)點(diǎn)選擇器，獲取此view的高度
    var query = wx.createSelectorQuery();
    var that = this;
    switch (e.detail.index) {
      case 0://圖文詳情高度
        itemH = that.data.swiperH;
        that.setData({
          swiperItemH: itemH
        })
        break;
      case 1://規(guī)格參數(shù)高度
        query.select('#w-spe-param').boundingClientRect()
        query.exec(function(res) {
          itemH = res[0].height;
          that.setData({
            swiperItemH: itemH
          })
        })
        break;
      case 2://商品咨詢高度
        query.select('#w-consult').boundingClientRect()
        query.exec(function(res) {
          itemH = res[0].height;
          that.setData({
            swiperItemH: itemH
          })
        })
        break;
    }
    this.setData({
      detailTab: e.detail.index
    })
  },

因?yàn)槲乙彩切率謱W(xué)習(xí)，可能辦法不是很好，歡迎各路高手指教。