uniapp遮罩层没有遮住tabbar

Uniapp 中的遮罩层默认是覆盖整个页面的，包括 tabbar。如果你想要遮住 tabbar，可以通过设置遮罩层的 z-index 属性来调整它的层级关系，让它处于 tabbar 上方。比如，可以设置遮罩层的 z-index 为 999，让它处于最上层。同时，还需要设置遮罩层的 position 属性为 fixed，这样它才能覆盖整个页面。具体代码如下：

<view class="mask" @tap="closeMask" v-show="showMask"></view>

.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 999;
}

在这个例子中，我设置了一个名为 mask 的遮罩层，它的 z-index 为 999，颜色为半透明的黑色。同时，我还定义了一个 closeMask 方法来关闭遮罩层，以及一个 showMask 变量来控制遮罩层的显示和隐藏。你可以根据自己的需求来修改这段代码。

相关问题

uniapp遮罩层遮住tabbar上

如果你想在uniapp中实现遮罩层遮住tabbar上，可以尝试以下方法：

1. 在tabbar的父元素上添加一个position为relative的样式，然后在遮罩层上添加一个position为absolute的样式。这样遮罩层就会覆盖在tabbar上了。

<template>
  <view class="wrapper">
    <view class="tabbar">
      <!-- tabbar内容 -->
    </view>
    <view class="mask"></view>
  </view>
</template>

<style>
.wrapper {
  position: relative;
}
.mask {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.5);
}
</style>

2. 如果你使用的是uni-ui组件库的tabbar组件，可以通过调用`uni.$emit('hideTabBar')`方法来隐藏tabbar，然后再显示遮罩层。例如：

<template>
  <view>
    <uni-tab-bar>
      <!-- tabbar内容 -->
    </uni-tab-bar>
    <view class="mask"></view>
  </view>
</template>

<script>
export default {
  methods: {
    showMask() {
      uni.$emit('hideTabBar')
      // 显示遮罩层
    },
    hideMask() {
      uni.$emit('showTabBar')
      // 隐藏遮罩层
    }
  }
}
</script>

希望这些方法能够帮助到你。