公告列表
公告列表
收藏
回答

关于editor组件聚焦时，ios端无法上推页面

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug editor 微信iOS客户端 7.0.14 2.11.3

我是用uniapp框架开发的小程序，复制此代码到一个Page，运行即可复现Bug。在ios端，点击editor组件聚焦时，键盘弹起但无法上推页面。导致底部的工具栏被键盘遮挡。安卓端可以上推页面，不会遮挡

<template> <view> <view> <view class="sendBar"> <view class="ZTsend" hover-class="bbx" hover-stay-time="90" @click="sendFeatrue()">发布</view> <view class="ZTcancel" hover-class="aax" hover-stay-time="90" @click="Cancel()">取消</view> </view> <view class="xxx"> <view class="yyy"></view> </view> <view class="pf_title"> <text class="Title">专题标题</text> <view class="writeBox"> <input class="write" maxlength="18" v-model="ZTtitle"/> </view> </view> <view class="xxx"> <view class="yyy"></view> </view> <view class="pf_img"> <text class="Title">专题封面</text> <view v-if="ZTcover == ''" class="add_pfimg" @click="choosePFimg()"> <text class="iconfont icon-jiahao" style="font-size: 60rpx;color: #D7D7D7;"></text> </view> <image v-if="ZTcover != ''" :src="ZTcover" mode="aspectFill" class="add_pfimg" @click="choosePFimg()"></image> </view> <view class="xxx"> <view class="yyy"></view> </view> <view class="editorBox"> <editor id="editor" class="ql-container" placeholder="开始创作..." showImgSize showImgToolbar showImgResize @statuschange="onStatusChange" :read-only="readOnly" @ready="onEditorReady" @focus="editorFoucs" @blur="editorBlur"> </editor> </view> <view class="toolBar"> <view class="tools"> <scroll-view class="toolScroll" scroll-with-animation="true" scroll-x="true"> <view class="oneScroll" @tap="format"> <view class="iconfont icon-charutupian" @tap="insertImage" hover-class="clickTool" hover-stay-time="90"></view> <view :class="formats.bold ? 'ql-active' : ''" class="iconfont icon-zitijiacu" data-name="bold" hover-class="clickTool" hover-stay-time="90"></view> <view :class="formats.underline ? 'ql-active' : ''" class="iconfont icon-zitixiahuaxian" data-name="underline" hover-class="clickTool" hover-stay-time="90"></view> <view class="iconfont icon-fengexian" @tap="insertDivider" hover-class="clickTool" hover-stay-time="90"></view> <view :class="formats.header === 3 ? 'ql-active' : ''" class="iconfont icon-biaoti" data-name="header" :data-value="3" style="font-size: 30rpx;" hover-class="clickTool" hover-stay-time="90"></view> <view :class="formats.lineHeight ? 'ql-active' : ''" class="iconfont icon-hangjianju" data-name="lineHeight" data-value="2" hover-class="clickTool" hover-stay-time="90"></view> <view :class="formats.letterSpacing ? 'ql-active' : ''" class="iconfont icon-zijianju1" data-name="letterSpacing" data-value="1em" hover-class="clickTool" hover-stay-time="90"></view> <view :class="formats.backgroundColor === '#f35e5e' ? 'ql-active' : ''" class="iconfont icon-fontbgcolor" data-name="backgroundColor" data-value="#f35e5e" hover-class="clickTool" hover-stay-time="90"></view> <view :class="formats.list === 'ordered' ? 'ql-active' : ''" class="iconfont icon-youxupailie" data-name="list" data-value="ordered" hover-class="clickTool" hover-stay-time="90"></view> <view :class="formats.list === 'bullet' ? 'ql-active' : ''" class="iconfont icon-wuxupailie" data-name="list" data-value="bullet" hover-class="clickTool" hover-stay-time="90"></view> <view class="iconfont icon-shanchu" @tap="clear" hover-class="clickTool" hover-stay-time="90"></view> </view> </scroll-view> </view> <view class="reset"> <view class="resetTool"> <view class="iconfont icon-undo" @tap="undo" hover-class="clickTool" hover-stay-time="90"></view> <view class="iconfont icon-redo" @tap="redo" hover-class="clickTool" hover-stay-time="90"></view> </view> </view> </view> </view> </view> </template> <script> export default { data() { return { contentType: "", ZTcontent: [], ZTcover: "", NoRight:true, ZTtitle: "", readOnly: false, formats: {}, } }, onLoad(option) { uni.loadFontFace({ family: 'Pacifico', source: 'url("https://sungd.github.io/Pacifico.ttf")' }) this.contentType = option.contentType let userLevel = this.$store.state.userInfo.userLevel if(3 >= userLevel) { this.NoRight = false //用户等级大于等于丙级 }else { this.NoRight = true } }, methods: { choosePFimg() { uni.chooseImage({ count: 1, sizeType: ['compressed'], sourceType: ['album'], success: res =>{ this.ZTcover = res.tempFilePaths[0] } }) }, onEditorReady() { uni.createSelectorQuery().select('#editor').context((res) => { this.editorCtx = res.context }).exec() }, undo() { this.editorCtx.undo() }, redo() { this.editorCtx.redo() }, format(e) { let { name, value } = e.target.dataset if (!name) return this.editorCtx.format(name, value) }, onStatusChange(e) { const formats = e.detail this.formats = formats }, insertDivider() { this.editorCtx.insertDivider() }, clear() { this.editorCtx.clear() }, removeFormat() { this.editorCtx.removeFormat() }, insertImage() { uni.chooseImage({ count: 1, success: (res) => { this.editorCtx.insertImage({ src: res.tempFilePaths[0], alt: '图像' }) } }) }, sendFeatrue() { this.editorCtx.getContents({ success: res => { this.ZTcontent = res.delta.ops console.log(res) } }) }, Cancel() { this.ZTcontent = [] this.ZTcover = "" this.ZTtitle = "" this.formats = {} uni.navigateBack({ delta:1 }) }, } } </script> <style scoped> @import "./editor-icon.css"; .clickTool {background-color: #C0C0C0!important;} .resetTool {width: 80%;height: 80rpx;display: flex;align-items: center;justify-content: space-around;} .iconfont {font-size: 40rpx;color: #000000;padding: 14rpx 14rpx;} .ql-active {color: #D21B1B;} .oneScroll {height: 80rpx;width: 1000rpx;display: flex;align-items: center;justify-content: space-around;} .toolScroll {width: 530rpx;height: 80rpx;background-color: #F2F2F2;white-space: nowrap;border-radius: 16rpx;} .reset {flex: 25;height: 100%;position: relative;display: flex;align-items: center;justify-content: center;} .tools {flex: 75;height: 100%;position: relative;display: flex;align-items: center;justify-content: center;} .toolBar {border-top: 4rpx solid #F2F2F2;z-index: 99;background-color: #FFFFFF;width: 100%;height: 110rpx;position: fixed;bottom: 0rpx;display: flex;align-items: center;} .editorBox {width: 100%;min-height: 800rpx;height: auto;display: flex;justify-content: center;align-items: center;} .ql-container {width: 96%;min-height: 900rpx;height: auto;background-color: #F2F2F2;margin-top: 20rpx;border-radius: 16rpx;padding: 24rpx 24rpx;} .aax {background-color: #D69793!important;} .bbx {background-color: #747474!important;} .ZTcancel {position: absolute;left: 20rpx;font-size: 30rpx;width: 100rpx;height: 50rpx;line-height: 50rpx;letter-spacing: 8rpx;border-radius: 14rpx;text-align: center;background-color: #E44438;color: #FFFFFF;} .ZTsend {position: absolute;right: 20rpx;font-size: 30rpx;width: 100rpx;height: 50rpx;line-height: 50rpx;letter-spacing: 8rpx;border-radius: 14rpx;text-align: center;background-color: #212121;color: #FFFFFF;} .sendBar{width: 100%;height: 90rpx;display: flex;align-items: center;position: relative;} .add_pfimg {width: 400rpx;height: 205rpx;border-radius: 14rpx;background-color: #F2F2F2;position: absolute;left: 214rpx;display: flex;justify-content: center;align-items: center;} .pf_img {width: 100%;height: 260rpx;position: relative;display: flex;justify-content: center;align-items: center;} .yyy {width: 90%;height: 4rpx;background-color: #F2F2F2;} .xxx {width: 100%;height: 20rpx;display: flex;justify-content: center;align-items: center;} .writeBox {width: 500rpx;height: 80%;background-color: #F2F2F2;position: absolute;right: 40rpx;display: flex;justify-content: center;align-items: center;} .write {width: 92%;height: 100%;background-color: #F2F2F2;} .Title {font-size: 32rpx;position: absolute;left: 20rpx;letter-spacing: 8rpx;} .pf_title {width: 100%;height: 80rpx;display: flex;align-items: center;position: relative;} </style>
最后一次编辑于  2020-07-16
回答关注问题邀请回答
收藏

1 个回答

  • Garin
    Garin
    2020-07-16

    安卓端是没问题的

    2020-07-16
    有用
    回复 4
请 登录 后发表内容
相关问题
相关文档
问题标签
键盘框架代码pageeditor