微信小程序动态设置tabs组件的高度

微信小程序的tabs组件真的很d 疼 ，由于采用的是swiper的缘故，所以它的默认高度只有150px;
现在假设有这样的一个需求：点击按钮增加的input 这样页面的高度就增加了 但是tabs
始终都是150px 这个时候我们就需要动态的去计算页面的高度 然后赋值给tabs

先找到componens下的tabs组件(这里可以npm下载构建也可以直接对应的weui组件包引入)
在html中加上这句话：

2020-09-12_225746.png

然后找到index.js里面的properties属性 加上swiperStyle这个属性

2020-09-12_230026.png

wxml部分：

<mp-tabs tabs="{{tabs}}" activeTab="{{activeTab}}" swiperStyle="height: {{tabHeiaght}}px" swiperClass="weui-tabs-swiper"
    bindchange="onChange" activeClass="tab-bar-title__selected">
    <block wx:for="{{tabs}}" wx:key="index">

        <view class="tab-content p2" slot="tab-content-{{index}}" id="tabsSwiper">
            <block wx:for="{{item.contentData}}" wx:for-item="idx" wx:for-index="indexs" wx:key="indexs">
                <card style="width: 100%;" cardData="{{idx}}" bindChangecheckbox="changeCheckbox"></card>

            </block>
            <view bindtap = "download">
                确定下载
            </view>

        </view>
    </block>
</mp-tabs>

js部分

setTableHeight() {
    wx.createSelectorQuery().in(this).select('#tabsSwiper').boundingClientRect(rect => {
      this.setData({
        tabHeiaght: rect.height
      })
    }).exec();
  },

在任何改变页面高度的地方都调用一下这个方法初始化tabs的高度