s***@126.com
s***@126.com
  • 发布:2021-08-23 10:35
  • 更新:2021-08-23 10:35
  • 阅读:526

【报Bug】uniapp微信小程序editor,IOS不能正常页面上推问题

分类:uni-app

产品分类: uniapp/小程序/微信

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 11.2.2

第三方开发者工具版本号: Stable 1.05.2108130

基础库版本号: 2.15.0

项目创建方式: CLI

CLI版本号: 4.5.3

示例代码:
<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>  

操作步骤:

使用IOS真机调试,弹出键盘,看测试Bottom与键盘之间是否多出一段高度

预期结果:

测试Bottom与键盘之间不会多出一段高度

实际结果:

测试Bottom与键盘之间多出了一段高度

bug描述:

根据微信小程序开发文档使用editor测试弹出页面上推功能,官方代码使用IOS真机调试上推正常,使用uniapp编译后IOS真机调试上推异常,表现为底部测试Bottom是否正常上推,官方代码IOS上推不会出现下面多余的长度即底部测试Bottom与键盘之间没有多出一段高度,截图所示是使用uniapp编译后IOS真机调试上推异常,底部测试Bottom与键盘之间不应该多出一段高度。

2021-08-23 10:35 负责人:无 分享
已邀请:

该问题目前已经被锁定, 无法添加新回复