鸿蒙真机运行
页面中有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>
1 个回复
DCloud_UNI_yuhe
感谢反馈,已复现问题,正在查找问题产生的原因