<template>
<view>
<view class="container" :style="{ height: editorHeight + 'px' }">
<editor
id="editor"
class="ql-container"
placeholder="请输入内容"
@ready="onEditorReady"
>
</editor>
</view>
<view
class="toolbar"
:style="{ bottom: isIOS ? keyboardHeight + 'px' : '0' }"
>
测试Bottom
</view>
</view>
</template>
<script>
export default {
data() {
return {
keyboardHeight: 0,
editorHeight: 0,
isIOS: 0,
};
},
onLoad() {
let self = this;
const toolbarHeight = 50;
const { windowHeight, platform } = uni.getSystemInfoSync();
self.isIOS = platform === "ios";
self.editorHeight = windowHeight - toolbarHeight;
uni.onKeyboardHeightChange((res) => {
if (res.height === self.keyboardHeight) return;
self.keyboardHeight = res.height;
self.editorHeight = windowHeight - toolbarHeight - res.height
});
},
methods: {
onEditorReady() {
const that = this;
uni.createSelectorQuery()
.select("#editor")
.context(function (res) {
that.editorCtx = res.context;
})
.exec();
},
},
};
</script>
<style scoped>
.container {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.ql-container {
box-sizing: border-box;
width: 100%;
height: 100%;
font-size: 16px;
line-height: 1.5;
overflow: auto;
padding: 10px 10px 20px 10px;
border: 1px solid #ececec;
}
.ql-active {
color: #22c704;
}
.iconfont {
display: inline-block;
width: 30px;
height: 30px;
cursor: pointer;
font-size: 20px;
}
.toolbar {
box-sizing: border-box;
padding: 0 10px;
height: 50px;
width: 100%;
position: fixed;
left: 0;
right: 100%;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid #ececec;
border-left: none;
border-right: none;
}
</style>
- 发布:2021-08-23 10:35
- 更新:2021-08-23 10:35
- 阅读:526
产品分类: uniapp/小程序/微信
PC开发环境操作系统: Mac
PC开发环境操作系统版本号: 11.2.2
第三方开发者工具版本号: Stable 1.05.2108130
基础库版本号: 2.15.0
项目创建方式: CLI
CLI版本号: 4.5.3
示例代码:
操作步骤:
使用IOS真机调试,弹出键盘,看测试Bottom与键盘之间是否多出一段高度
使用IOS真机调试,弹出键盘,看测试Bottom与键盘之间是否多出一段高度
预期结果:
测试Bottom与键盘之间不会多出一段高度
测试Bottom与键盘之间不会多出一段高度
实际结果:
测试Bottom与键盘之间多出了一段高度
测试Bottom与键盘之间多出了一段高度
bug描述:
根据微信小程序开发文档使用editor测试弹出页面上推功能,官方代码使用IOS真机调试上推正常,使用uniapp编译后IOS真机调试上推异常,表现为底部测试Bottom是否正常上推,官方代码IOS上推不会出现下面多余的长度即底部测试Bottom与键盘之间没有多出一段高度,截图所示是使用uniapp编译后IOS真机调试上推异常,底部测试Bottom与键盘之间不应该多出一段高度。