l***@3975.com
l***@3975.com
  • 发布:2024-12-31 10:12
  • 更新:2024-12-31 16:44
  • 阅读:54

运行鸿蒙真机使用editor首次点击聚焦会导致页面变形,position: fixed;定位的盒子可以悬浮软键盘上方,收起再次点击悬浮失效

分类:鸿蒙Next

鸿蒙真机运行
页面中有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 lass='scss' 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>  
2024-12-31 10:12 负责人:无 分享
已邀请:
DCloud_UNI_yuhe

DCloud_UNI_yuhe

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

要回复问题请先登录注册