首頁  >  文章  >  web前端  >  uniapp中彈跳窗層不隨底部滑動怎麼解決

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

PHPz
PHPz原創
2023-04-14 19:39:011826瀏覽

在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中文網其他相關文章!

陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn