Bagaimana untuk menyelesaikan masalah bahawa lapisan tetingkap pop timbul dalam uniapp tidak tergelincir dengan bahagian bawah

Dalam Uniapp, kami sering menggunakan tetingkap timbul, seperti tetingkap timbul pengesahan, tetingkap timbul perkongsian, dsb. Apabila lapisan tetingkap timbul muncul, selalunya perlu menetapkan lapisan latar belakang kepada kelabu dan lut sinar untuk menyerlahkan tetingkap timbul. Walau bagaimanapun, jika bar bawah atau bar tab bawah muncul, apabila bahagian bawah slaid, lapisan tetingkap pop timbul juga akan meluncur bersamanya, yang akan menyebabkan beberapa masalah reka bentuk. Dalam artikel ini, kami akan memperkenalkan penyelesaian untuk menghalang lapisan pop timbul daripada tergelincir dengan bahagian bawah.

Penerangan Masalah

Bar tambahan bawah, lapisan pop timbul dan bar tab bawah kami berada pada tahap yang berbeza.

Apabila kami mengklik butang Tambah untuk memunculkan lapisan tetingkap pop timbul, kami berharap lapisan tetingkap timbul boleh menutupi bar tambah bawah, tetapi tidak meluncur dengan bahagian bawah dan kekal pada halaman .

Penyelesaian

Langkah 1: Tambah lapisan kosong

Tambah lapisan kosong antara bar tambah bawah dan bar tab bawah, seperti yang ditunjukkan di bawah:

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

Kemudian, dalam fail css yang sepadan, tetapkan ketinggian lapisan kosong supaya ia menduduki kedudukan bawah:

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

Langkah 2: Tetapkan lapisan pop timbul kepada kedudukan tetap

Seterusnya, kita perlu menetapkan lapisan pop timbul kepada kedudukan tetap, dan tetapkan lebar dan tinggi kepada 100%. Kemudian, untuk memastikan bahawa lapisan pop timbul boleh dipaparkan secara normal, kita perlu menetapkan tahapnya ke tahap tertinggi:

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

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

Selepas menetapkan ini, lapisan pop timbul akan menjadi boleh dipaparkan pada halaman dan tidak akan muncul secara rawak.

Langkah 3: Tetapkan semula ketinggian lapisan pop timbul

Memandangkan kami menambah lapisan kosong pada langkah pertama, ketinggian lapisan pop timbul perlu ditetapkan semula. Kita perlu menetapkan ketinggian lapisan tetingkap pop timbul kepada ketinggian port pandangan tolak ketinggian bar tambahan bawah dan bar tab bawah (kerana ketinggian lapisan kosong ditetapkan), untuk memastikan bahawa pop timbul -lapisan tetingkap atas boleh sama tinggi dengan halaman:

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

Dengan cara ini, kami telah melengkapkan tetapan lapisan tetingkap timbul tidak menggelongsor dengan bahagian bawah.

Ringkasan

Dalam Uniapp, lapisan tetingkap timbul boleh ditetapkan kepada kedudukan tetap dan tahapnya ditetapkan pada tahap tertinggi Ini boleh memastikan bahawa lapisan tetingkap timbul boleh dipaparkan seperti biasa dan tidak akan mengikuti slaid Bawah. Di samping itu, untuk menyelesaikan masalah ketinggian lapisan tetingkap timbul, kami menambah lapisan kosong dan menetapkan semula ketinggian lapisan tetingkap timbul Ini memastikan bahawa lapisan tetingkap timbul boleh sama ketinggian sebagai halaman dan tidak akan meluncur dengan bahagian bawah.

Atas ialah kandungan terperinci Bagaimana untuk menyelesaikan masalah bahawa lapisan tetingkap pop timbul dalam uniapp tidak tergelincir dengan bahagian bawah. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!