uniapp遮罩层遮住tabbar上
时间: 2023-08-29 08:12:45 浏览: 43
可以使用uni-app提供的全局组件`<uni-tabbar>`,将遮罩层放在`<uni-tabbar>`之下,这样就可以遮住除了`<uni-tabbar>`以外的其他内容,而`<uni-tabbar>`不会被遮住。具体实现可以参考以下代码:
```html
<template>
<view>
<view class="content">
<!-- 此处为页面内容 -->
</view>
<uni-tabbar>
<!-- 遮罩层放在uni-tabbar之下 -->
<view class="mask"></view>
<uni-tabbar-item></uni-tabbar-item>
<uni-tabbar-item></uni-tabbar-item>
<uni-tabbar-item></uni-tabbar-item>
</uni-tabbar>
</view>
</template>
<style>
.mask {
position: fixed;
top: 50px; /* 根据实际tabbar高度调整 */
left: 0;
width: 100%;
height: calc(100% - 50px); /* 根据实际tabbar高度调整 */
background-color: rgba(0, 0, 0, 0.5);
z-index: 99;
}
</style>
```
这样就可以实现遮罩层遮住除了`<uni-tabbar>`以外的其他内容,而`<uni-tabbar>`不会被遮住。