uniapp中彈跳窗層不隨底部滑動怎麼解決

在Uniapp中，我們常會使用到彈窗層，例如確認彈跳窗、分享彈跳窗等等。在彈跳窗層出現的時候，往往需要將背景層設定為灰色半透明，以突顯彈跳窗。但是，如果出現底部添加欄或底部tab欄的時候，底部滑動時，彈跳窗層也會跟著滑動，這就會引發一些設計上的困擾。在本文中，我們將會介紹一種解決方法，使得彈窗層能夠不隨底部滑動。

問題描述

我們的底部新增欄位、彈跳視窗層和底部tab欄分別處於不同的層級。

當我們點擊新增按鈕，彈出彈跳視窗層時，我們希望彈窗層能夠覆蓋在底部新增欄之上，但不隨底部滑動，保持固定在頁面上。

解決方案

第一步：新增一個空白層

在底部新增欄位和底部tab欄中間新增一個空白層，如下所示：

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

然後，在對應的css檔案中，設定該空白層的高度，使其佔據底部的位置：

.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;
}

第二步：彈跳視窗層設定為fixed定位

#接下來，我們需要將彈跳窗層設定為fixed定位，並且寬度和高度都要設為100%。然後，為了確保彈窗層能夠正常顯示，我們需要將其層級設定為最高：

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

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

這樣設定後，彈窗層就能夠在頁面上呈現，並且不會隨著底部滑動了。

第三個步驟：重置彈跳視窗層高度

由於我們在第一步驟增加了一個空白層，所以彈跳視窗層的高度就需要重新設定了。我們要將彈跳窗層的高度設為視窗高度減去底部添加欄和底部tab欄的高度（因為空白層的高度設定了），就可以確保彈窗層能夠和頁面高度相同：

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

這樣，我們就完成了彈跳窗層不隨底部滑動的設定。

總結

在Uniapp中，彈窗層的設定可以採用fixed定位，並將其層級設定為最高，這樣可以保證彈窗層能夠正常顯示，並且不會隨著底部滑動。另外，為了解決彈跳窗層高度的問題，我們新增一個空白層，重新設定了彈窗層高度，這樣就能夠保證彈窗層能夠和頁面高度相同，並且不會隨著底部滑動了。

以上是uniapp中彈跳窗層不隨底部滑動怎麼解決的詳細內容。更多資訊請關注PHP中文網其他相關文章！