uni-app editor scrollIntoView的Bug

uni-app editor scrollIntoView的Bug

开发环境 版本号 项目创建方式
Mac Big Sur HBuilderX

示例代码：

<template>  
    <view>  
        <editor style="height: 1500rpx;" id="editor" showImgSize showImgToolbar showImgResize @ready="onEditorReady"></editor>  
    </view>  
</template>  
<script>  
    export default {  
        methods: {  
            onEditorReady() {  
                uni.createSelectorQuery().select('#editor').context((res) => {  
                    this.editorCtx = res.context  
                    let html = ''  
                    for (let i=1; i<=20; i++) {  
                        html += '<h1>第'+i+'行</h1><br>'  
                    }  
                    this.editorCtx.setContents({  
                        html: html  
                    })  
                }).exec()  
            },  
        },  
        mounted() {  
            uni.onKeyboardHeightChange(res => {  
                this.editorCtx.scrollIntoView({  
                    success: res=> {  
                        console.log(res)  
                    },  
                    fail: (error) => {  
                        console.error(error)  
                    }  
                })  
            })  
        }  
    }  
</script>

更多关于uni-app editor scrollIntoView的Bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

补充：官方的Hellow Uniapp在安卓手机上，Editor示例，文本长度超出1页后有同样的问题

更多关于uni-app editor scrollIntoView的Bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的uni-app editor组件在iOS平台上的兼容性问题。scrollIntoView方法在键盘弹出时无法正确滚动到编辑器焦点位置，主要原因是：

  1. 键盘高度变化监听时机问题：onKeyboardHeightChange触发时，编辑器可能还未完成重新布局
  2. iOS平台差异：iOS的Webview对编辑器的滚动支持不如Android完善

临时解决方案：

mounted() {
    uni.onKeyboardHeightChange(res => {
        // 添加延迟确保布局完成
        setTimeout(() => {
            this.editorCtx.scrollIntoView({
                success: res => {
                    console.log(res)
                },
                fail: (error) => {
                    console.error(error)
                }
            })
        }, 300)
    })
}

替代方案： 如果延迟方案仍不稳定，建议使用editor的@focus事件结合手动计算滚动位置：

methods: {
    onEditorFocus() {
        // 手动计算并设置滚动位置
        uni.pageScrollTo({
            scrollTop: 计算出的位置,
            duration: 300
        })
    }
}
回到顶部