博客

之前做个一个多个tab的列表页，每个tab下的内容对应的就是swiper，而小程序的swiper的高度默认是150px，不能自适应内容高度，最开始我们的列表内容每个卡片的高度都是差不多的，当时做的是把每个卡片高度固定400px，然后用固定的高度*每个tab下卡片的数量来得到每个swiper的高度，具体博客链接：

https://blog.csdn.net/this_ITBoy/article/details/103869457

。但是，后来出了新的需求，如图：

可以看到，第一个卡片加入了物流的信息，而第二个卡片没有物流信息，这样的话，高度肯定不能固定成一样的了，所以需要分别计算出每个tab下的swiper里面的每个卡片的高度然后乘以卡片数量，才能动态得到每个swiper的高度。改动的代码如下：

1、data里面添加一个orderListHeight对象：

  data: {
    ...以前的数据不变,
    orderListHeight:{}//每个swiper的对应高度存放对象
  },

2、请求列表数据的时候，每次加载不同的tab展示出不同的swiper，需要计算不同的高度，并保存到data的orderListHeight对象中：

 //请求列表
  getOrderList: function(cid) {
      var self = this;
      this.setData({
        curListId: cid,
        loadFlag:true
      })
      var orderList = this.data.orderList;
      if (!orderList[cid]) {
        http.fetch(http.ORDER_LIST + `?searchState=${cid}&page=1`).then(res => {
          var obj = {};
          obj.page = res.data.page;
          obj.pageCount = Math.ceil(res.data.total / res.data.rows);
          obj.total = res.data.total;
          obj.data = res.data.orderList;
          //当前列表里卡片的总数
          obj.orderItem_length = res.data.total > res.data.rows * res.data.page ? res.data.rows * res.data.page : res.data.total;
          if (res.data.page * res.data.rows >= res.data.total) {
              obj.endTip = '没有更多了';
              obj.endTipHidden = true;
          } else {
              obj.endTip = '正在加载';
          }
          orderList[cid] = obj;
          self.setData({
            loadFlag:false,
            orderList,
          });
          //计算每个tab的swiper的高度
          self.getEverySwiperHeight(cid,obj);

        }).catch((err) => {
            
        })
      } else {
          if (orderList[cid].page < orderList[cid].pageCount) {
            http.fetch(http.ORDER_LIST + `?searchState=${cid}&page=${orderList[cid].page+1}`,{
              urlType: 'wap'
            }).then(res => {
              var obj = {};
              obj.page = res.data.page;
              obj.pageCount = Math.ceil(res.data.total / res.data.rows);
              obj.total = res.data.total;
              obj.data = orderList[cid].data.concat(res.data.orderList);
              //当前列表里卡片的总数
              obj.orderItem_length = res.data.total > res.data.rows * res.data.page ? res.data.rows * res.data.page : res.data.total;
              if (res.data.page * res.data.rows >= res.data.total) {
                  obj.endTip = '没有更多了';
                  obj.endTipHidden = true;
              } else {
                  obj.endTip = '正在加载';
              }
              orderList[cid] = obj;
              self.setData({
                loadFlag:false,
                orderList
              });
              //计算每个tab的swiper的高度
              self.getEverySwiperHeight(cid,obj);

            }).catch((err) => {
                
            })     
          }
      }
  },
  //计算每个tab的swiper的高度
  getEverySwiperHeight(cid,obj){
    var self = this;
    let orderListHeight = self.data.orderListHeight;
    if(obj.total){
      let query = wx.createSelectorQuery()
      query.selectAll(`.orderItemSum${cid}`).boundingClientRect()
      query.exec(function(rects){
        let sum_heigth = 0;
        let heightObj = {};
        for (let i = 0; i < obj.orderItem_length; i++) {
          sum_heigth += rects[0][i].height + 10;
        }
        heightObj.swiper_height = sum_heigth;
        orderListHeight[cid] = heightObj;
        self.setData({
          orderListHeight
        })
      });
    }else{
      orderListHeight[cid] = 2*self.data.winHeight-170;
      self.setData({
        orderListHeight
      })
    }
  },

可以看到这里是用wx.createSelectorQuery().selectAll()得到每个包含“.orderItemSum”类名的卡片，相应的在wxml文件里也需要在每个卡片加上对应的包含“.orderItemSum”的类名，wxml代码如下：

<swiper class='tabSwiper' style="height:{{orderListHeight[curListId].swiper_height}}px;" duration="300" bindchange='bindchange' current='{{current}}'>
    <block wx:for="{{tabNavList}}" wx:key="index">
        <swiper-item>
            <block wx:if="{{orderList[item.searchState].data.length>0}}">
                <view class='orderItem orderItemSum{{item.searchState}}' wx:for="{{orderList[item.searchState].data}}" wx:for-item="orderItem" wx:key='index'>
    ...原来的代码

这样就可以算出每个不同的swiper，然后使每个页签下的swiper高度自适应了。