首页 > 微信 > 详细

uniapp: 微信小程序editor,IOS不能正常页面上推问题

时间:2021-08-25 12:23:48      阅读:25      评论:0      收藏:0      [点我收藏+]
<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>  

上面跟官方代码的写法,会出现测试Bottom和键盘之间会出现一段空白高度,

技术分享图片

解决方式可以上方不固定高度,自由滚动,既能正常上推,但是还是会有小小的瑕疵。

uniapp: 微信小程序editor,IOS不能正常页面上推问题

原文:https://www.cnblogs.com/Nyan-Workflow-FC/p/15183435.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!