uni-app 小程序富文本编辑器editor.scrollIntoView 实际测试无法回到光标位置
uni-app 小程序富文本编辑器editor.scrollIntoView 实际测试无法回到光标位置
开发环境 | 版本号 | 项目创建方式 |
---|---|---|
Mac | 10.15.7 | HBuilderX |
### 示例代码:
```javascript
onLoad() {
const platform = uni.getSystemInfoSync().platform
this.isIOS = platform === 'ios'
const that = this
this.updatePosition(0)
let keyboardHeight = 0
uni.onKeyboardHeightChange(res => {
if (res.height === keyboardHeight) return
const duration = res.height > 0 ? res.duration * 1000 : 0
keyboardHeight = res.height
setTimeout(() => {
uni.pageScrollTo({
scrollTop: 0,
success() {
that.updatePosition(keyboardHeight)
that.editorCtx.scrollIntoView()
}
})
}, duration)
},
updatePosition(keyboardHeight) {
const toolbarHeight = 50
const { windowHeight, platform } = uni.getSystemInfoSync()
let editorHeight = keyboardHeight > 0 ? (windowHeight - keyboardHeight - toolbarHeight) : windowHeight
this.editorHeight = editorHeight
this.keyboardHeight = keyboardHeight
},
onEditorReady() {
const that = this
uni.createSelectorQuery().select('#editor').context(function (res) {
that.editorCtx = res.context
}).exec()
},
操作步骤:
按照官网文档提供的原生解决ios上移问题 按照代码方式可复现
预期结果:
预期与官方原生demo一致
实际结果:
无法回退到光标位置
更多关于uni-app 小程序富文本编辑器editor.scrollIntoView 实际测试无法回到光标位置的实战教程也可以访问 https://www.itying.com/category-93-b0.html
4 回复
解决了吗
更多关于uni-app 小程序富文本编辑器editor.scrollIntoView 实际测试无法回到光标位置的实战教程也可以访问 https://www.itying.com/category-93-b0.html
2022都要完了。 这个问题多久可以解决一下呢。
2024此问题,ios依然存在
在uni-app小程序中使用editor.scrollIntoView()
时,确实可能遇到无法准确回到光标位置的问题。这通常与键盘弹起时的页面滚动机制和编辑器内部焦点处理有关。
从你的代码来看,主要问题可能出现在:
pageScrollTo
到顶部后立即调用scrollIntoView
,此时编辑器可能尚未完成布局更新- 键盘高度变化时,编辑器内容区域重新计算需要时间
建议优化方案:
setTimeout(() => {
uni.pageScrollTo({
scrollTop: 0,
success() {
that.updatePosition(keyboardHeight)
// 增加延迟确保布局更新完成
setTimeout(() => {
that.editorCtx.scrollIntoView()
}, 100)
}
})
}, duration)
另外,可以尝试在调用scrollIntoView
前先确保编辑器获得焦点:
that.editorCtx.focus().then(() => {
that.editorCtx.scrollIntoView()
})