uniapp安全区域，键盘挤压与上推

uniapp本身的不具备安全区域的标签和关于键盘的特殊标签

安全区域

safeArea:指定是可视区域

safeAreaInsets：可视区域外的

<template>
    <view :style="SafeStyle">
        <slot name="Content"></slot>
    </view>
</template>
<script setup>
onMounted(()=>{
    const StatusBar=ref()
    const HomeButton=ref()
    const {safeAreaInsets}=uni.getWindowInfo()
    StatusBar.value=safeAreaInsets.top
    HomeButton.value=safeAreaInsets.Bottom
})
const SafeStyle=computed(()=>({
    paddingTop:StatusBar+'rpx',
    paddingBottom:HomeButton+'rpx',
    paddingLeft:"12rpx",
    paddingRight:12rpx
}))
</script>

键盘挤压与上推

我可以说，uniapp在处理键盘可以说是最烂的一种方案，甚至都没有形成标准。和触底加载一样烂到根上了。前端处理长列表一般有这么几种方案，第一种是比例值上拉加载，第二种是可视区域滚动加载，第三种是虚拟列表加载，最后一种是就是uniapp提供的触底加载方式。uniapp的ScrollView可视区域滚动加载，但是uniapp官方明确不推荐长列表加载，这大大限制了ScrollView使用范围。而最后的虚拟列表加载实在是前端被迫选择的一种长列表加载方式之一，它解决了触底加载过渡的问题。 最后我说一下这个uniapp的键盘挤压与推送的问题。

<template>
    <view>
        // 第一个坑，adjust-position设置为true指的是上推页面，false指的是不处理，键盘
        会遮住输入框，而不是挤压页面！！！
        <input type="text" placeholder="请输入文本" adjust-position="true" />
    </view>
</template>

第二个坑，现在不在业务上了，又要去业务配置层面，adjustResize它代表挤压，adjustPan代表上推。这个坑并没有结束，官方明确说部分机型有漏屏的问题。

# page.json
{
    "app-plus":{
        "softinputMode":"adjustResize"
    }
}

第三个坑，当进入页面的时候需要弹出键盘，官方没有给出开关。需要我们手动组装这个问题。

<template>
    <view class="固定屏幕底部CSS样式" :style="keyBoard" >
        <input type="text" placeholder="请输入文本" adjust-position="true" :focus="GetFocus"
        @focus="KeyBoardFocusStyle"
        @Blur="KeyBoardBlurStyle"/>
    </view>
</template>
<script setup>
const onKeyboardHeightChange=ref()
const GetFocus=ref(true)
onLoad(()=>{
    uni.onKeyboardHeightChange((res)=>{
        GetFocus.value=true
        onKeyboardHeightChange.value=res.hight
    })
})

onUnLoad(()=>{
    GetFocus.value=false
    onKeyboardHeightChange.value=0
})
const KeyBoardFocusStyle=(e)=>{
     GetFocus.value=true
    if(onKeyboardHeightChange!=""){
        onKeyboardHeightChange.value=e.detail.height
    }
}

const KeyBoardBlurStyle=()=>{
    GetFocus.value=false
    onKeyboardHeightChange.value=0
}

const keyBoard=computed(()=>({
    height:onKeyboardHeightChange+"rpx"
})
</script>

最后一个坑当我们设置安全区域为组件的时候，此时的键盘和我们的组件又发生了冲突，也好解决，就是组件传值。或者将当前页面层级抬高。