uni-app运行鸿蒙真机时，使用editor首次点击聚焦导致页面变形，position: fixed;定位的盒子能悬浮软键盘上方，但收起后再次点击悬浮失效

发布于 1周前 作者 h691938207 来自 Uni-App

uni-app运行鸿蒙真机时，使用editor首次点击聚焦导致页面变形，position: fixed;定位的盒子能悬浮软键盘上方，但收起后再次点击悬浮失效

鸿蒙真机运行问题

页面中有 input 输入框和 editor，以及使用 position: fixed; 定位的盒子。进入页面时，先点击输入框再点击 editor，此时 fixed 定位的盒子不会悬浮在软键盘上面。首次进入页面时，先点击 editor，软键盘弹起后整个页面被挤压，且 fixed 定位的盒子可以悬浮在软键盘上面，但收起键盘再次点击时，悬浮失效。

预期效果：点击首次点击 editor 时，软键盘弹起不会挤压页面。

代码示例

<template>
    <view class="">
        <view class='input'>
            <input type="text" placeholder="好的标题能吸引更多游戏发烧友哦~(必填)" />
        </view>
        <view id="scroll_box_editor">
            <editor
                id="editor"
                class="editor"
                placeholder="请输入不少于5字的内容，发布内容不可涉嫌色情、政治、辱骂等，一旦发现平台有权依据国家相关法律法规和社区用户行为规范进行追责~(必填)"
                @ready="onEditorReady"
            ></editor>
        </view>
        <view class="cu-bar">使用position: fixed;定位的盒子</view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                editorCtx: null,
            }
        },
        methods: {
            onEditorReady() {
                uni.createSelectorQuery()
                    .select('#editor')
                    .context((res) => {
                        this.editorCtx = res.context;
                        console.log(JSON.stringify(this.editorCtx), 'xxxx')
                    })
                    .exec();
            },
        }
    }
</script>

<style scoped>
    .input {
        width: 100%;
        height: 100rpx;
        border: 1px solid red;
    }

    #scroll_box_editor {
        width: 100%;
        border: 1px solid red;
        height: 70vh;

        .editor {
            width: 100%;
        }
    }

    .cu-bar {
        display: flex;
        flex-direction: column;
        align-items: center;
        box-sizing: border-box;
        line-height: normal;
        min-height: 100rpx;
        position: fixed;
        width: 100%;
        bottom: 0;
        z-index: 2;
        box-shadow: 0 0rpx 1rpx rgba(0, 0, 0, 0.1);
        padding-right: 20rpx;
        background-color: #ffffff;
    }
</style>

更多关于uni-app运行鸿蒙真机时，使用editor首次点击聚焦导致页面变形，position: fixed;定位的盒子能悬浮软键盘上方，但收起后再次点击悬浮失效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
2 回复

感谢反馈，已复现问题，正在查找问题产生的原因

更多关于uni-app运行鸿蒙真机时，使用editor首次点击聚焦导致页面变形，position: fixed;定位的盒子能悬浮软键盘上方，但收起后再次点击悬浮失效的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


在处理uni-app在鸿蒙系统上运行时的编辑框聚焦导致页面变形以及悬浮元素定位问题，我们可以尝试通过调整CSS样式和JavaScript事件监听来解决。以下是一个示例代码，展示了如何处理编辑框聚焦和失焦事件，以及确保悬浮元素在软键盘弹出和收起时能够正确显示。

1. 调整CSS样式

首先，确保你的悬浮元素在软键盘弹出时不会被遮挡。可以使用z-index属性来确保悬浮元素位于软键盘之上。

.fixed-box {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 9999; /* 确保z-index足够高 */
  background-color: rgba(255, 255, 255, 0.9); /* 示例背景色 */
  padding: 10px;
  box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1); /* 示例阴影 */
}

2. JavaScript事件监听

接下来，我们需要监听编辑框的聚焦和失焦事件，以动态调整悬浮元素的位置。在uni-app中，你可以使用@focus和@blur事件。

<template>
  <view>
    <input type="text" @focus="handleFocus" @blur="handleBlur" placeholder="点击输入" />
    <view class="fixed-box">悬浮内容</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      isKeyboardVisible: false,
    };
  },
  methods: {
    handleFocus() {
      this.isKeyboardVisible = true;
      // 根据需要调整悬浮元素的位置，这里假设不需要额外调整
    },
    handleBlur() {
      this.isKeyboardVisible = false;
      // 如果需要重置悬浮元素位置，可以在这里处理
      // 例如，通过设置一个定时器确保软键盘完全收起后再调整
      setTimeout(() => {
        // 重置逻辑，如果需要的话
      }, 300); // 300ms是一个估计值，根据软键盘收起速度调整
    },
  },
};
</script>

3. 页面变形处理

对于页面变形问题，可能是由于软键盘弹出时页面布局重新计算导致的。可以尝试在handleFocus和handleBlur方法中添加代码来锁定或解锁页面的布局调整。

handleFocus() {
  this.isKeyboardVisible = true;
  // 锁定页面布局，防止变形
  document.body.style.overflow = 'hidden';
},
handleBlur() {
  this.isKeyboardVisible = false;
  // 解锁页面布局
  setTimeout(() => {
    document.body.style.overflow = '';
  }, 300); // 确保软键盘完全收起后再恢复
}

上述代码提供了一个基本的框架来处理编辑框聚焦和失焦时的悬浮元素定位以及页面变形问题。根据实际情况，你可能需要调整CSS样式和JavaScript逻辑以满足具体需求。

回到顶部