uniappでページプッシュを無効にする方法

モバイルインターネットの発展に伴い、モバイル端末の利用がますます広がり、モバイル端末の利用に関するさまざまな問題も生じています。モバイルデバイスを使用しているとき、入力や検索など、キーボードを開く必要がある場合があります。ただし、iOS と Android システムの違いにより、iOS システムではキーボードを開くとページ全体が押し上げられますが、Android システムではキーボードが押し上げられないなど、キーボードを開くときに問題が発生する場合があります。この記事では、uniappでページプッシュを無効にする方法を紹介します。

背景

iOS では、キーボードを開くとページ全体が押し上げられ、ユーザーが入力内容を確認できるようになります。ただし、入力ボックスの数が多い場合、ページ上で押し上げられた高さが他の要素に影響を及ぼし、レイアウトが混乱する可能性があります。 Android システムでは、キーボードが入力ボックスを覆いますが、ページ全体が押し上げられることはありません。したがって、ユニアプリ開発では、キーボードを開くことによってページが押し上げられないように、この問題を解決する方法を見つける必要があります。

解決策

uniappでは、キーボードの開閉イベントを監視し、ページの高さを調整してページの押し上げを禁止する効果を実現できます。

キーボードの開閉イベントをリッスンする

uniapp では、uni.onKeyboardShow と uni.onKeyboardHide## の 2 つのメソッドを通じてキーボードをリッスンできます。 # イベントを開いたり閉じたりします。これら 2 つの方法を使用すると、キーボードの高さやイベントがトリガーされた時刻などの情報を取得できます。ここでは、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() メソッドでページの元の状態を復元します。

ページの高さと入力ボックスの位置情報の動的計算

上記のコードでは、2 つの

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: 0 を設定します。こうすることで、キーボードがポップアップしても入力ボックスは影響を受けません。

まとめ

この記事では、uniapp でページプッシュを無効にする方法を紹介しました。キーボードの開閉イベントをリッスンし、イベントがトリガーされたときにページの高さを調整することで、キーボードが開くことによるページの押し上げを防ぐ効果を得ることができます。モバイル アプリケーションを開発する場合、モバイル デバイスの特性とさまざまな問題の解決策を理解し、より良いモバイル アプリケーションを開発することが重要です。

以上がuniappでページプッシュを無効にする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。