How to disable page push in uniapp

With the development of mobile Internet, our mobile devices are used more and more widely, and various problems about the use of mobile devices also arise. When using mobile devices, sometimes we need to open the keyboard, such as typing, searching, etc. However, due to the differences between iOS and Android systems, some problems may occur when opening the keyboard. For example, the keyboard under the iOS system will push up the entire page, but under the Android system it will not. This article will introduce how to disable page push in uniapp.

Background

Under iOS, when the keyboard is opened, the entire page will be pushed up so that the user can see what is being entered. However, when there are many input boxes, the height pushed up on the page may affect other elements, causing layout confusion. Under the Android system, the keyboard will cover the input box, but the entire page will not be pushed up. Therefore, in uniapp development, we need to find a way to solve this problem so that the page will not be pushed up due to opening the keyboard.

Solution

In uniapp, we can monitor the opening and closing events of the keyboard and adjust the height of the page to achieve the effect of prohibiting page push up.

Listening to keyboard opening and closing events

In uniapp, we can listen to the keyboard through two methods: uni.onKeyboardShow and uni.onKeyboardHide Open and close events. Using these two methods, we can get information such as the height of the keyboard and the time when the event was triggered. Here, we need to use the uni.createSelectorQuery() method to get the size information of the page elements and operate the page when the keyboard is opened or closed.

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

First, get the page height and the position information of the input box in the mounted() function. Then, in the onKeyboardShow() method, get the height of the keyboard, calculate the push-up distance and perform the page push-up operation. Finally, restore the original state of the page in the onKeyboardHide() method.

Dynamic calculation of page height and input box position information

In the above code, we use two uni.createSelectorQuery() methods to obtain the page height and The location information of the input box. However, this method needs to be executed in the mounted() function. If called before the page is loaded, the information of the page elements will not be correctly obtained. Therefore, we also need to use dynamic calculation methods to obtain information about page elements.

<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>

First, set the height of the page to 100vh in the style, so that the height of the page can be dynamically adjusted according to the screen height of the device. Then, set position: absolute in the style of the input box container, and set bottom: 0 so that the input box is always at the bottom of the page. This way, when the keyboard pops up, the input box will not be affected.

Summary

In this article, we introduced how to disable page push in uniapp. By listening to the opening and closing events of the keyboard and adjusting the height of the page when the event is triggered, we can achieve the effect of preventing the page from being pushed up due to opening the keyboard. When developing mobile applications, it is important to understand the characteristics of mobile devices and solutions to various problems, which will help develop better mobile applications.

The above is the detailed content of How to disable page push in uniapp. For more information, please follow other related articles on the PHP Chinese website!