解决Uniapp沉浸式下,input或textarea页面被顶起的问题

设置沉浸式

"app-plus": {
    "statusbar": {
           //可选,字符串类型,沉浸式状态栏样式,可取值none、suggestedDevice、supportedDevice
          "immersed": "none",
    },
}

使用textarea(https://uniapp.dcloud.net.cn/component/textarea.html#)演示:

adjust-position属性:键盘弹起时,是否自动上推页面

fixed属性:如果 textarea 是在一个 position:fixed 的区域,需要显示指定属性 fixed 为 true

小技巧:通过view的动态高度设置,将textarea顶起,达到textarea被顶在软键盘上面的效果

<template>
   <!--设置页面不会被顶起 -->
    <textarea :adjust-position="adjustPosition"></textarea>
   <!--键盘弹出时增高,达到textarea被顶在软键盘上面的效果 -->
    <view v-if="!adjustPosition" :style="[{ 'height':rjpHeight + 'px'}]"></view>
</template>

<script>
export default {
    data() {
            return {
                isIndex: false,
                rjpHeight:0,
                adjustPosition: false,
            }
        },
        mounted() {
            uni.onKeyboardHeightChange(res => {
                this.rjpHeight = res.height;
                if (this.isIndex && res.height > 0) {//isIndex是指在首页有tab的情况,如果在其他页面可忽略
                    this.rjpHeight = res.height - 45; //45=app底部tab的高度
                }
            })
        },
}
</script>

猜你喜欢

转载自blog.csdn.net/csdn_zuirenxiao/article/details/129078297