在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定位,並且寬度和高度都要設為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中文網其他相關文章!