So deaktivieren Sie den Seiten-Push in Uniapp

Mit der Entwicklung des mobilen Internets nimmt die Nutzung mobiler Geräte bei uns immer weiter zu und es sind auch verschiedene Probleme bei der Nutzung mobiler Geräte aufgetreten. Bei der Verwendung mobiler Geräte müssen wir manchmal die Tastatur öffnen, z. B. zum Tippen, Suchen usw. Aufgrund der Unterschiede zwischen iOS- und Android-Systemen können beim Öffnen der Tastatur jedoch einige Probleme auftreten. Beispielsweise schiebt die Tastatur unter dem iOS-System die gesamte Seite nach oben, unter dem Android-System jedoch nicht. In diesem Artikel erfahren Sie, wie Sie den Seiten-Push in Uniapp deaktivieren.

Hintergrund

Unter iOS wird beim Öffnen der Tastatur die gesamte Seite nach oben geschoben, sodass der Benutzer sehen kann, was eingegeben wird. Wenn jedoch viele Eingabefelder vorhanden sind, kann sich die auf der Seite nach oben verschobene Höhe auf andere Elemente auswirken und zu Verwirrung im Layout führen. Unter dem Android-System verdeckt die Tastatur das Eingabefeld, es wird jedoch nicht die gesamte Seite nach oben verschoben. Daher müssen wir bei der Uniapp-Entwicklung einen Weg finden, dieses Problem zu lösen, damit die Seite nicht durch das Öffnen der Tastatur nach oben verschoben wird.

Lösung

In uniapp können wir die Öffnungs- und Schließereignisse der Tastatur abhören und die Höhe der Seite anpassen, um den Effekt zu erzielen, dass das Drücken von Seiten verhindert wird.

Ereignisse zum Öffnen und Schließen der Tastatur abhören

In uniapp können wir uni.onKeyboardShow und uni.onKeyboardHide übergeben Zwei Methoden, um auf Ereignisse zum Öffnen und Schließen der Tastatur zu warten. Mit diesen beiden Methoden können wir Informationen wie die Höhe der Tastatur und den Zeitpunkt der Auslösung des Ereignisses abrufen. Hier müssen wir die Methode uni.createSelectorQuery() verwenden, um die Größeninformationen der Seitenelemente abzurufen und die Seite zu bedienen, wenn die Tastatur geöffnet oder geschlossen wird. uni.onKeyboardShow 和 uni.onKeyboardHide 两个方法来监听键盘的打开和关闭事件。使用这两个方法，我们可以获取键盘的高度和触发事件的时间等信息。在这里，我们需要使用 uni.createSelectorQuery() 方法获取页面元素的尺寸信息，并在键盘打开或关闭时操作页面。

export default {
    data() {
        return {
            // 页面高度
            pageHeight: '',
            // 输入框距离页面底部的距离
            marginTop: '',
            // 页面是否被上推
            isPushed: false
        }
    },
    mounted() {
        this.getPageHeight()
    },
    methods: {
        // 获取页面高度和输入框的位置信息
        getPageHeight() {
            uni.createSelectorQuery().select('.input-box').boundingClientRect((rect) => {
                // 记录输入框距离页面底部的距离
                this.marginTop = this.pageHeight - rect.bottom
            }).exec()
            uni.createSelectorQuery().select('.page').boundingClientRect((rect) => {
                // 记录页面高度
                this.pageHeight = rect.height
            }).exec()
        },
        // 监听键盘打开事件
        onKeyboardShow(e) {
            // 获取键盘高度
            let keyboardHeight = e.height
            // 页面上推
            this.pushPage(keyboardHeight)
        },
        // 监听键盘关闭事件
        onKeyboardHide() {
            // 页面还原
            this.restorePage()
        },
        // 页面上推
        pushPage(keyboardHeight) {
            if (!this.isPushed) {
                this.isPushed = true
                // 计算上推的高度
                let pushHeight = keyboardHeight - this.marginTop
                if (pushHeight > 0) {
                    uni.pageScrollTo({
                        scrollTop: pushHeight,
                        duration: 100
                    })
                }
            }
        },
        // 页面还原
        restorePage() {
            if (this.isPushed) {
                uni.pageScrollTo({
                    scrollTop: 0,
                    duration: 100
                })
                this.isPushed = false
            }
        }
    }
}

首先，在 mounted() 函数中获取页面高度和输入框的位置信息。然后，在 onKeyboardShow() 方法中获取键盘的高度，计算上推的距离并进行页面上推的操作。最后，在 onKeyboardHide() 方法中恢复页面的原状态。

动态计算页面高度和输入框的位置信息

在上面的代码中，我们使用了两个 uni.createSelectorQuery() 方法来获取页面高度和输入框的位置信息。但是，这种方法需要在 mounted() 函数中执行，如果在页面加载完成之前调用，将无法正确获取页面元素的信息。因此，我们还需要使用动态计算的方法来获取页面元素的信息。

<style>
  .page {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }
  .input-box {
    position: absolute;
    bottom: 0;
    width: 100%;
    height: auto;
    padding: 20px 10px;
    box-sizing: border-box;
    background-color: #fff;
    z-index: 1000;
  }
</style>

首先，在样式中将页面的高度设置为 100vh，这样页面的高度就可以根据设备的屏幕高度动态调整。然后，在输入框容器的样式中设置 position: absolute，并设置 bottom: 0rrreee

Ermitteln Sie zunächst die Seitenhöhe und die Positionsinformationen des Eingabefelds in der Funktion montiert(). Ermitteln Sie dann in der Methode onKeyboardShow() die Höhe der Tastatur, berechnen Sie den Push-Up-Abstand und führen Sie den Seiten-Push-Up-Vorgang durch. Stellen Sie abschließend den ursprünglichen Zustand der Seite in der Methode onKeyboardHide() wieder her.

Dynamische Berechnung der Seitenhöhe und der Positionsinformationen des Eingabefelds

Im obigen Code verwenden wir zwei uni.createSelectorQuery()-Methoden, um die zu erhalten Informationen zur Seitenhöhe und zur Position des Eingabefelds. Diese Methode muss jedoch in der Funktion montiert() ausgeführt werden. Wenn sie vor dem Laden der Seite aufgerufen wird, werden die Informationen der Seitenelemente nicht korrekt abgerufen. Daher müssen wir auch dynamische Berechnungsmethoden verwenden, um Informationen über Seitenelemente zu erhalten. #🎜🎜#rrreee#🎜🎜#Stellen Sie zunächst die Höhe der Seite im Stil auf 100vh ein, damit die Höhe der Seite dynamisch an die Bildschirmhöhe des Geräts angepasst werden kann. Legen Sie dann position: absolute im Stil des Eingabefeldcontainers fest und legen Sie bottom: 0 fest, sodass sich das Eingabefeld immer am unteren Rand der Seite befindet. Auf diese Weise wird das Eingabefeld nicht beeinträchtigt, wenn die Tastatur angezeigt wird. #🎜🎜##🎜🎜#Zusammenfassung#🎜🎜##🎜🎜#In diesem Artikel haben wir vorgestellt, wie man Page Push in Uniapp deaktiviert. Indem wir auf die Öffnungs- und Schließereignisse der Tastatur hören und die Höhe der Seite anpassen, wenn das Ereignis ausgelöst wird, können wir verhindern, dass die Seite durch das Öffnen der Tastatur nach oben gedrückt wird. Bei der Entwicklung mobiler Anwendungen ist es wichtig, die Eigenschaften mobiler Geräte und Lösungen für verschiedene Probleme zu verstehen, um bessere mobile Anwendungen zu entwickeln. #🎜🎜#

Das obige ist der detaillierte Inhalt vonSo deaktivieren Sie den Seiten-Push in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!