Comment désactiver le push de page dans Uniapp

Avec le développement de l'Internet mobile, nos appareils mobiles sont de plus en plus utilisés, et divers problèmes liés à l'utilisation des appareils mobiles se posent également. Lorsque nous utilisons des appareils mobiles, nous devons parfois ouvrir le clavier, comme pour taper, rechercher, etc. Cependant, en raison des différences entre les systèmes iOS et Android, certains problèmes peuvent survenir lors de l'ouverture du clavier. Par exemple, le clavier sous le système iOS fera remonter la page entière, mais pas sous le système Android. Cet article explique comment désactiver le push de page dans Uniapp.

Contexte

Sous iOS, l'ouverture du clavier poussera la page entière vers le haut afin que l'utilisateur puisse voir ce qui est saisi. Cependant, lorsqu'il y a de nombreuses zones de saisie, la hauteur augmentée sur la page peut affecter d'autres éléments, provoquant un désordre dans la mise en page. Sous le système Android, le clavier couvrira la zone de saisie, mais la page entière ne sera pas remontée. Par conséquent, dans le développement d'Uniapp, nous devons trouver un moyen de résoudre ce problème afin que la page ne soit pas remontée en raison de l'ouverture du clavier.

Solution

Dans uniapp, nous pouvons écouter les événements d'ouverture et de fermeture du clavier et ajuster la hauteur de la page pour obtenir l'effet d'interdire le poussée de page.

Écouter les événements d'ouverture et de fermeture du clavier

Dans uniapp, nous pouvons écouter les événements d'ouverture et de fermeture du clavier via deux méthodes : uni.onKeyboardShow et uni.onKeyboardHide. Grâce à ces deux méthodes, nous pouvons obtenir des informations telles que la hauteur du clavier et l'heure à laquelle l'événement s'est déclenché. Ici, nous devons utiliser la méthode uni.createSelectorQuery() pour obtenir les informations de taille des éléments de la page et faire fonctionner la page lorsque le clavier est ouvert ou fermé. 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

Tout d'abord, obtenez la hauteur de la page et les informations de position de la zone de saisie dans la fonction Mounted(). Ensuite, dans la méthode onKeyboardShow(), obtenez la hauteur du clavier, calculez la distance de poussée et effectuez l'opération de poussée de la page. Enfin, restaurez l'état d'origine de la page dans la méthode onKeyboardHide().

Calcul dynamique de la hauteur de la page et des informations sur la position de la zone de saisie

Dans le code ci-dessus, nous utilisons deux méthodes uni.createSelectorQuery() pour obtenir les informations sur la hauteur de la page et la position de la zone de saisie. Cependant, cette méthode doit être exécutée dans la fonction Mounted(). Si elle est appelée avant le chargement de la page, les informations des éléments de la page ne seront pas correctement obtenues. Par conséquent, nous devons également utiliser des méthodes de calcul dynamiques pour obtenir des informations sur les éléments de la page. 🎜rrreee🎜Tout d'abord, définissez la hauteur de la page sur 100vh dans le style afin que la hauteur de la page puisse être ajustée dynamiquement en fonction de la hauteur de l'écran de l'appareil. Ensuite, définissez position : absolue dans le style du conteneur de la zone de saisie, et définissez bottom : 0 pour que la zone de saisie soit toujours en bas de la page. De cette façon, lorsque le clavier apparaît, la zone de saisie ne sera pas affectée. 🎜🎜Résumé🎜🎜Dans cet article, nous avons présenté comment désactiver le push de page dans uniapp. En écoutant les événements d'ouverture et de fermeture du clavier et en ajustant la hauteur de la page lorsque l'événement est déclenché, nous pouvons obtenir l'effet d'empêcher la page d'être poussée vers le haut en raison de l'ouverture du clavier. Lors du développement d'applications mobiles, il est important de comprendre les caractéristiques des appareils mobiles et les solutions à divers problèmes, ce qui aidera à développer de meilleures applications mobiles. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!