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

1,031 阅读1分钟

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 小程序整体效果看