uniapp遮罩层遮住tabbar上
时间: 2023-08-04 19:06:43 浏览: 51
uniapp小程序tabbar图标
您好,对于这个问题,您可以将遮罩层的 `z-index` 值设置为大于 `tabbar` 的 `z-index` 值,这样就可以遮住 `tabbar` 了。具体操作可以参考以下示例代码:
```html
<template>
<view>
<!-- tabbar -->
<view class="tabbar">
<view>tab1</view>
<view>tab2</view>
<view>tab3</view>
</view>
<!-- 遮罩层 -->
<view class="mask"></view>
</view>
</template>
<style>
.tabbar {
z-index: 99; /* 设置tabbar的z-index值 */
height: 100px;
background-color: #fff;
display: flex;
justify-content: space-around;
align-items: center;
}
.mask {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 100; /* 设置遮罩层的z-index值 */
}
</style>
```
以上代码中,我将 `tabbar` 的 `z-index` 值设置为 `99`,将遮罩层的 `z-index` 值设置为 `100`,这样遮罩层就可以遮住 `tabbar` 了。
阅读全文