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

uni-app中实现沉浸式状态栏与textarea交互优化

最新推荐文章于 2024-07-10 11:04:38 发布

原创最新推荐文章于 2024-07-10 11:04:38 发布 · 2.9k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app

uniapp 专栏收录该内容

5 篇文章

订阅专栏

文章介绍了如何在uni-app中配置沉浸式状态栏，并使用textarea组件，特别是在键盘弹起时如何通过调整页面和textarea的位置，确保textarea能被顶在软键盘上方，提供更好的用户体验。同时，利用uni.onKeyboardHeightChange监听键盘高度变化，动态调整页面元素高度。

设置沉浸式

"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>