So lösen Sie das Problem, dass die Popup-Fensterebene in Uniapp nicht mit der Unterseite verschiebt

In Uniapp verwenden wir häufig Popup-Fenster, z. B. Bestätigungs-Popups, Freigabe-Popups usw. Wenn die Popup-Fensterebene angezeigt wird, ist es häufig erforderlich, die Hintergrundebene auf grau und durchscheinend einzustellen, um das Popup-Fenster hervorzuheben. Wenn jedoch eine untere Leiste oder eine untere Tab-Leiste angezeigt wird und die untere Leiste verschoben wird, verschiebt sich auch die Ebene des Popup-Fensters mit, was zu einigen Designproblemen führen kann. In diesem Artikel stellen wir eine Lösung vor, um zu verhindern, dass die Popup-Ebene mit der Unterseite verrutscht.

Problembeschreibung

Unsere untere hinzugefügte Leiste, Popup-Ebene und untere Tab-Leiste befinden sich auf unterschiedlichen Ebenen.

Wenn wir auf die Schaltfläche „Hinzufügen“ klicken, um die Popup-Fensterebene einzublenden, hoffen wir, dass die Popup-Fensterebene die untere Hinzufügungsleiste abdecken kann, aber nicht mit der Unterseite verschiebt und auf der Seite fixiert bleibt.

Lösung

Schritt 1: Fügen Sie eine leere Ebene hinzu

Fügen Sie eine leere Ebene zwischen der unteren Hinzufügen-Leiste und der unteren Tab-Leiste hinzu, wie unten gezeigt:

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

Dann legen Sie in der entsprechenden CSS-Datei die Höhe der leeren Ebene fest der Ebene so, dass sie die unterste Position einnimmt:

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

Schritt 2: Stellen Sie die Popup-Ebene auf eine feste Positionierung ein

Als nächstes müssen wir die Popup-Ebene auf eine feste Positionierung einstellen und die Breite und Höhe auf festlegen 100 %. Um sicherzustellen, dass die Popup-Ebene normal angezeigt werden kann, müssen wir dann ihre Ebene auf die höchste Ebene einstellen:

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

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

Nachdem wir dies festgelegt haben, kann die Popup-Ebene auf der Seite angezeigt werden und wird nicht verschoben mit dem Boden.

Schritt 3: Höhe der Popup-Fensterebene zurücksetzen

Da wir im ersten Schritt eine leere Ebene hinzugefügt haben, muss die Höhe der Popup-Fensterebene zurückgesetzt werden. Wir müssen die Höhe der Popup-Fensterebene auf die Höhe des Ansichtsfensters minus der Höhe der unteren hinzugefügten Leiste und der unteren Tab-Leiste einstellen (da die Höhe der leeren Ebene festgelegt ist), um sicherzustellen, dass das Popup-Fenster angezeigt wird -Up-Fensterebene kann die gleiche Höhe wie die Seite haben:

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

Auf diese Weise haben wir die Einstellung abgeschlossen, dass die Popup-Fensterebene nicht mit der Unterseite verschiebt.

Zusammenfassung

In Uniapp kann die Popup-Fensterebene auf eine feste Positionierung und ihre Ebene auf die höchste Ebene eingestellt werden. Dadurch kann sichergestellt werden, dass die Popup-Fensterebene normal angezeigt werden kann und nicht mit der Unterseite verschiebt . Um das Problem der Höhe der Popup-Fensterebene zu lösen, haben wir außerdem eine leere Ebene hinzugefügt und die Höhe der Popup-Fensterebene zurückgesetzt. Dadurch wird sichergestellt, dass die Popup-Fensterebene dieselbe sein kann Höhe wie die Seite und rutscht nicht mit der Unterseite.

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem, dass die Popup-Fensterebene in Uniapp nicht mit der Unterseite verschiebt. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!