zoukankan      html  css  js  c++  java
  • uniapp: 微信小程序editor,IOS不能正常页面上推问题

    <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和键盘之间会出现一段空白高度,

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

  • 相关阅读:
    Java实现字符串的包含
    Java实现字符串的包含
    Java实现字符串的包含
    Java实现字符串的包含
    Java实现字符串的包含
    穷文富理撑死工,得先学门能挣钱的手艺
    Windows更新清理工具 (winsxs 清理工具)
    SQLite实现内存键值存储
    Qt5.7.0移植到4412
    罗辑思维2014 第11集 迷茫时代的明白人(慢慢来,能做一点是一点),有书卖
  • 原文地址:https://www.cnblogs.com/Nyan-Workflow-FC/p/15183435.html
Copyright © 2011-2022 走看看