How to solve the problem that the pop-up window layer in uniapp does not slide with the bottom

In Uniapp, we often use the pop-up window layer, such as confirmation pop-up windows, sharing pop-up windows, etc. When the pop-up window layer appears, it is often necessary to set the background layer to gray and translucent to highlight the pop-up window. However, if a bottom bar or bottom tab bar appears, when the bottom slides, the pop-up window layer will also slide with it, which will cause some design troubles. In this article, we will introduce a solution to prevent the pop-up layer from sliding with the bottom.

Problem Description

Our bottom added bar, pop-up window layer and bottom tab bar are at different levels.

When we click the add button to pop up the pop-up window layer, we hope that the pop-up window layer can cover the bottom add bar, but not slide with the bottom and remain fixed on the page.

Solution

Step 1: Add a blank layer

Add a blank layer between the bottom add bar and the bottom tab bar, as shown below:

<view class="add-bar"></view>
<view class="blank-area"></view>
<view class="tab-bar"></view>

Then, in the corresponding css file, set the height of the blank layer so that it occupies the bottom position:

.add-bar{
  width:100%;
  height:50px;
  background-color:#ccc;
}
.blank-area{
  width:100%;
  height:calc(100vh - 50px - 100rpx);
  background-color:#fff;
}
.tab-bar{
  width:100%;
  height:100rpx;
  background-color:#ccc;
}

Step 2: Set the pop-up layer to fixed positioning

Next, we need to set the pop-up window layer to fixed positioning, and set the width and height to 100%. Then, in order to ensure that the pop-up layer can be displayed normally, we need to set its level to the highest:

<view class="popup" v-show="showPopup">
  <!--弹窗内容-->
</view>

.popup{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:9999;
}

After setting this, the pop-up layer can be presented on the page and will not slide with the bottom.

Step 3: Reset the height of the pop-up window layer

Since we added a blank layer in the first step, the height of the pop-up window layer needs to be reset. We need to set the height of the pop-up window layer to the height of the viewport minus the height of the bottom added bar and bottom tab bar (because the height of the blank layer is set), so as to ensure that the pop-up window layer can be the same height as the page:

.popup{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  height:calc(100vh - 50px - 100rpx);
  z-index:9999;
}

In this way, we have completed the setting of the pop-up window layer not sliding with the bottom.

Summary

In Uniapp, the setting of the pop-up window layer can be fixed positioning, and its level is set to the highest. This can ensure that the pop-up window layer can be displayed normally and will not follow the Bottom slide. In addition, in order to solve the problem of the height of the pop-up window layer, we added a blank layer and reset the height of the pop-up window layer. This ensures that the pop-up window layer can be the same height as the page and will not slide with the bottom.

The above is the detailed content of How to solve the problem that the pop-up window layer in uniapp does not slide with the bottom. For more information, please follow other related articles on the PHP Chinese website!