微信小程序-WeUi组件tabs自适应高度

1 安装使用

参考：

tabs | 微信开放文档

2 配置高度自适应

由于扩展组件tabs通过封装swiper切换，高度默认是200px左右，根本不切实际。需要自己修改自适应子元素高度。

• 内容区域采用 <swiper>进行滚动，超出部分将被隐藏，需设置 swiperClass 的高度与子元素一致。
• 内容区域子元素需指定 slot=tab-content-index，其中 index 为选项卡的下标（从0开始）

Step1:新增样式，height设置大点，否则内容过多不显示

.weui-swiper-height {
	height: 12000vh;
	/* overflow-y: auto !important; */
}

Step2:配置swiper-class以及封装一层view

并设置styel:height: calc(150vh - 200rpx) !important;overflow-y: auto !important;

<mp-tabs swiper-class="weui-swiper-height" tabs="{{tabs}}" activeTab="{{activeTab}}" bindtabclick="onTabCLick" bindchange="onChange" activeClass="tab-bar-title__selected">
<view style="height: calc(150vh - 200rpx) !important;overflow-y: auto !important;" slot="tab-content-0">
tab第一页面
</view>
<view style="height: calc(150vh - 200rpx) !important;overflow-y: auto !important;" slot="tab-content-1">
tab第二页面
</view>
</mp-tabs>

3 实现效果

 

4 小程序整体效果看