1 安装使用
参考:
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 小程序整体效果看