vue中使用vant組件出現軟鍵盤頂起頁面——導致事件失效

vue中使用vant地址組件頁面被頂起問題

遇到問題

• IOS設備，當前發現有7Plus、iphone11【測試機有限，更新版本設備未測】

• 在vue頁面中使用vant地址組件， 當操作到詳細地址時，軟鍵盤頂起頁面往上移動。

• 當軟鍵盤關閉時，頁面沒有還原。

• 操作頁面點擊事件時無效，【因頁面移動導致位置不對】

復現效果圖

1. 輸入收貨人時頁面展示正常
2. 當操作詳細地址時會發現，軟鍵盤頂起頁面往上移動， 導致事件失效及操作不準確。

解決方法

在需要使用頁面的created()生命週期中添加以下代碼

import { iosInputHandle } from '@/api/commonApi';

created() {
    iosInputHandle();
}

export const iosInputHandle = () => {
    // 判斷是否是ios
    var ua = navigator.userAgent;
    if (!!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        let flag = false
        let pageBackNormFunc
        document.body.addEventListener('focusin', () => {
            // 軟鍵盤彈起事件
            flag = true
            pageBackNormFunc && clearTimeout(pageBackNormFunc)
        })
        document.body.addEventListener('focusout', () => {
            // 軟鍵盤關閉事件
            if (flag) {
                pageBackNormFunc = setTimeout(function () { 
                    // 當鍵盤收起的時候讓頁面回到原始位置
                    window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }) 
                }, 200)
            }
            flag = false
        })
    }
}

感謝大神們