uniapp에서 페이지 푸시를 비활성화하는 방법

모바일 인터넷의 발달과 함께 우리가 사용하는 모바일 기기의 사용 범위는 점점 더 광범위해지고 있으며, 모바일 기기 사용에 관한 다양한 문제도 발생하고 있습니다. 모바일 기기를 사용하다 보면 타이핑, 검색 등 키보드를 열어야 할 때가 있습니다. 그러나 iOS와 Android 시스템의 차이로 인해 키보드를 열 때 일부 문제가 발생할 수 있습니다. 예를 들어 iOS 시스템에서는 키보드가 전체 페이지를 위로 밀어 올리지만 Android 시스템에서는 그렇지 않습니다. 이 글에서는 uniapp에서 페이지 푸시를 비활성화하는 방법을 소개합니다.

Background

iOS에서는 키보드를 열면 전체 페이지가 위로 올라가므로 사용자는 입력 내용을 볼 수 있습니다. 그러나 입력 상자가 많은 경우 페이지에서 높이가 올라오면 다른 요소에 영향을 주어 레이아웃 혼란을 일으킬 수 있습니다. 안드로이드 시스템에서는 키보드가 입력창을 덮지만 페이지 전체가 위로 올라가지는 않습니다. 따라서 유니앱 개발에서는 키보드를 열어도 페이지가 위로 올라가지 않도록 이 문제를 해결할 수 있는 방법을 찾아야 한다.

Solution

uniapp에서는 키보드의 열기 및 닫기 이벤트를 듣고 페이지 높이를 조정하여 페이지 푸시를 금지하는 효과를 얻을 수 있습니다.

키보드 열기 및 닫기 이벤트 듣기

uniapp에서는 uni.onKeyboardShow 및 uni.onKeyboardHide 두 가지 메서드를 통해 키보드 열기 및 닫기 이벤트를 들을 수 있습니다. 이 두 가지 방법을 사용하면 키보드 높이, 이벤트가 발생한 시간 등의 정보를 얻을 수 있습니다. 여기서는 uni.createSelectorQuery() 메소드를 사용하여 페이지 요소의 크기 정보를 얻어오고, 키보드를 열거나 닫을 때 페이지를 조작해야 합니다. 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

먼저 mounted() 함수에서 입력 상자의 페이지 높이와 위치 정보를 가져옵니다. 그런 다음 onKeyboardShow() 메서드에서 키보드 높이를 가져와서 푸시업 거리를 계산하고 페이지 푸시업 작업을 수행합니다. 마지막으로 onKeyboardHide() 메서드에서 페이지의 원래 상태를 복원합니다.

페이지 높이와 입력 상자 위치 정보의 동적 계산

위 코드에서는 두 개의 uni.createSelectorQuery() 메서드를 사용하여 페이지 높이와 입력 상자 위치 정보를 가져옵니다. 그러나 이 메소드는 mounted() 함수에서 실행되어야 합니다. 페이지가 로드되기 전에 호출되면 페이지 요소의 정보를 올바르게 얻을 수 없습니다. 따라서 페이지 요소에 대한 정보를 얻으려면 동적 계산 방법도 사용해야 합니다. 🎜rrreee🎜먼저 스타일에서 페이지 높이를 100vh로 설정하면 기기의 화면 높이에 따라 페이지 높이가 동적으로 조정될 수 있습니다. 그런 다음 입력 상자 컨테이너 스타일에 position:absolute를 설정하고 입력 상자가 항상 페이지 하단에 있도록 bottom: 0을 설정합니다. 이렇게 하면 키보드가 팝업될 때 입력 상자가 영향을 받지 않습니다. 🎜🎜요약🎜🎜이 글에서는 유니앱에서 페이지 푸시를 비활성화하는 방법을 소개했습니다. 키보드의 열림, 닫힘 이벤트를 듣고 이벤트 발생 시 페이지 높이를 조정함으로써 키보드 열림으로 인해 페이지가 밀려 올라가는 것을 방지하는 효과를 얻을 수 있습니다. 모바일 애플리케이션을 개발할 때 모바일 장치의 특성과 다양한 문제에 대한 솔루션을 이해하는 것이 중요하며, 이는 더 나은 모바일 애플리케이션을 개발하는 데 도움이 됩니다. 🎜

위 내용은 uniapp에서 페이지 푸시를 비활성화하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!