美文网首页
小程序scroll-view嵌套swiper高度不能完全展示

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

作者: 雷根儿 | 来源:发表于2020-02-23 11:35 被阅读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
        })
      },
    

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

    相关文章

      网友评论

          本文标题:小程序scroll-view嵌套swiper高度不能完全展示

          本文链接:https://www.haomeiwen.com/subject/hyndqhtx.html