uniapp 软键盘将页面往上顶 vue3

场景一：聊天窗口

1.pages.json页面配置   input | uni-app官网

  adjustResize：软键盘弹出时，webview窗体高度挤压
  adjustPan：软键盘弹出时，webview窗体高度不变，但窗体上推

    {
            "path": "pages/chat/chat",
            "style": {
                "app-plus": {
                    "softinputMode": "adjustResize",
                    "softinputNavBar": "none" // App平台iOS端软键盘上方横条去除
                }
            }
        }

 不要使用adjustPan！！！   

使用adjustPan在进行安卓真机调试的时候出现了软键盘闪烁和漏出下层页面内容情况

2. 给input标签添加 :adjust-position="false"

 控制键盘弹起时，是否自动上推页面 input | uni-app官网

<input type="text" name="" id=""   :adjust-position="false">

3.给input的盒子添加绝对定位

<view class="box" :style="{bottom: keyboardHeightPx}">
        <input type="text" name="" id="" :adjust-position="false">
</view>

.box{
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100vw;
    padding: 20rpx;
}

4.获取软键盘高度，动态设置盒子的bottom

onKeyboardHeightChange获取的得到的高度以px为单位

按照我的调试结果，使用rpx和px都能实现，这里使用rpx

     const screenWidth = ref()
     onMounted(() => {
         const systemInfo = uni.getSystemInfoSync();
         screenWidth.value = systemInfo.screenWidth; // 获取屏幕宽度进行，进行单位转换
         uni.onKeyboardHeightChange(handleKeyboardShow); // 监听键盘高度变化
     });

     onUnmounted(() => {
         uni.offKeyboardHeightChange();  // 组件卸载时取消监听

     });

     const keyboardHeightRpx = ref(0);
     const keyboardHeight = ref()

     const handleKeyboardShow = (event) => {

         //keyboardHeightPx.value = event.height;
         const rpxRatio = 750 / screenWidth.value;
         keyboardHeightRpx.value = event.height * rpxRatio; 

         if (event.height == 0) {
             keyboardHeight.value = 0 + 'rpx'
         } else {
             keyboardHeight.value = keyboardHeightRpx.value + 'rpx'
         }

     }

完整例子

<template>
         <view class="bg">
                 <view class="top">顶部标题</view>
                 <view class="box" :style="{ bottom: keyboardHeight }">
                         <input type="text" name="" id="" :adjust-position="false">
                     </view>
             </view>
     </template>

 <script setup>
    import {
        ref,
        onMounted,
        onUnmounted
    } from 'vue';

    const screenWidth = ref()
    onMounted(() => {
        const systemInfo = uni.getSystemInfoSync();
        screenWidth.value = systemInfo.screenWidth;
        uni.onKeyboardHeightChange(handleKeyboardShow);
    });
    const keyboardHeightRpx = ref(0);
    const keyboardHeight = ref()
    const handleKeyboardShow = (event) => {

        //keyboardHeightPx.value = event.height;
        const rpxRatio = 750 / screenWidth.value;
        keyboardHeightRpx.value = event.height * rpxRatio;

        if (event.height == 0) {
            keyboardHeight.value = 0 + 'rpx'
        } else {
            keyboardHeight.value = keyboardHeightRpx.value + 'rpx'
        }

    }

    // 组件卸载时取消监听
    onUnmounted(() => {
        uni.offKeyboardHeightChange();

    });
</script>

 <style scoped>
    .bg {
        position: relative;
    }

    .box {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100vw;
        padding: 20rpx;
    }

    .box input {
        background-color: #ebe4ce;
        margin: 10rpx;
        padding: 10rpx;
    }

    .top {
        position: absolute;
        top: 0rpx;
        height: 150rpx;
        width: 100vw;
        text-align: center;
        line-height: 180rpx;
        background-color: #ebe4ce;
    }

    .bg {
        width: 100vw;
        height: 100vh;
    }
</style>

 {
            "path": "pages/chat/chat",
            "style": {
                "app-plus": {
                    "softinputMode": "adjustResize",
                    "softinputNavBar": "none" // App平台iOS端软键盘上方横条去除
                }
            }
}

场景二：底部弹窗有input或者textarea

添加:adjust-position="false"

<uni-popup ref="orderPopup" type="bottom" :mask="true" :maskClick="false"  >
         <text>请填写</text>
         <textarea maxlength="1000" v-model="data"  :adjust-position="false"></textarea>
</uni-popup>