思路,动态监听软件盘的高度,屏幕高度减去软件盘的高度,就是可视区域的高度,让光滚动到可可视区域的范围,调用scrollIntoView
<template>
<view>
<editor id="editor" :style="{height:h+'px'}" @ready="onEditorReady()">
</editor>
<view class="opts row" @touchend.prevent="">
<view class="opt ico-24 ri-bold" @touchend.prevent="toBold()"></view>
<view class="opt ico-24 ri-font-color"></view>
<view class="opt ico-24 ri-font-size"></view>
<view class="opt ico-24 ri-image-2-line"></view>
<view class="opt ico-24 ri-video-line"></view>
<view class="opt ico-24 ri-link-m"></view>
</view>
</view>
</template>
<script>
var the = null;
var si = null;
export default {
data() {
return {
editorCtx: null,
h: 0,
}
},
onLoad() {
the = this;
the.setTitleNView();
},
onReady() {
uni.onKeyboardHeightChange(res => {
the.h = si.windowHeight - res.height - 60; //动态改变编辑器高度(键盘弹出高度就变小)
setTimeout(function() {
the.editorCtx.scrollIntoView(); //光标进入视线
}, 100)
})
},
onNavigationBarButtonTap(e) {
let i = e.index;
if (i == 0) {
the.cls();
}
},
methods: {
setTitleNView() {
si = uni.getSystemInfoSync(); //系统信息
var pages = getCurrentPages();
var page = pages[pages.length - 1];
var wv = page.$getAppWebview(); //当前页面
the.h = si.windowHeight - 60; //初始化编辑器高度
wv.setTitleNViewButtonStyle(1, {
width: (si.windowWidth - 60 * 2) + 'px'
})
},
onEditorReady() {
uni.createSelectorQuery().select('#editor').context((res) => {
the.editorCtx = res.context
}).exec()
},
toBold() {
the.editorCtx.format('bold');
},
}
}
</script>
<style>
#editor {
width: 100%;
background-color: #FFD3B3;
padding: 20px 20px 20px 20px;
}
.opts {
position: fixed;
bottom: 0;
left: 0;
z-index: 1000;
height: 60px;
width: 100%;
background-color: #F7F7F7;
}
.opt {
margin-left: 30px;
}
</style>