在 uni-app 中要遮挡住 uni-app 自带的 tabbar,可以在页面的根节点添加一个属性 style="height: 100%; overflow: hidden;"
,然后再把内容的高度设置为 height: calc(100% - 50px);
,这样就可以将 tabbar 遮挡住了。
例如:
<template>
<view class="page" style="height: 100%; overflow: hidden;">
<view class="content" style="height: calc(100% - 50px);">
<!-- 页面内容 -->
</view>
</view>
</template>
<style>
.page {
/* 其他样式 */
}
.content {
/* 其他样式 */
}
</style>
注意:这种方式遮挡住 tabbar 之后,tabbar 上的按钮就无法被点击了。如果要保留 tabbar 的功能,可以使用 uni-app 提供的其他方式来实现。