小程序scroll-view嵌套swiper高度不能完全展示

2020-02-23  本文已影响0人  雷根儿

前两天写商品详情页功能时,遇到这个问题,在最上面的swiper轮播图设置固定高度,没有问题,下面遇到图文详情,规格参数等需要用到swiper时不能完全展示数据,只能显示swiper默认高度的数据,因为是动态加载数据,所以也不能将高度写死。于是想到了动态计算高度的方法。
展示我要做的页面:

展示.jpg

下面展示代码:

<scroll-view class="detail" scroll-y bindscroll="onScrollChane" scroll-top="{{topNum}}">
  <!-- 轮播图 -->
  ...
  <!-- 介绍 -->
  ...
  <!-- 评价 -->
  ...
  <!-- 详情专区 -->
  <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>
    <!-- 规格参数 -->
    <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>
  <!-- 分享按钮 -->
  ...
  <!-- 头部标题 -->
  ...
</scroll-view>
<!-- 底部按钮 -->
...

主要计算高度js代码

//加载完图片,将图片同比例缩放后计算高度
onImageLoad(e) { //计算图文详情高度
    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;
    //创建节点选择器,获取此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://规格参数高度
        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
    })
  },

因为我也是新手学习,可能办法不是很好,欢迎各路高手指教。

上一篇 下一篇

猜你喜欢

热点阅读