uni-app android app里,subNvue原生子窗体问题:当input唤起输入法后,设置subNvue的高度,subNvue页面的内容全部被遮挡

uni-app android app里,subNvue原生子窗体问题:当input唤起输入法后,设置subNvue的高度,subNvue页面的内容全部被遮挡

信息类别 信息内容
产品分类 uniapp/App
PC开发环境 Windows
操作系统版本 win10
HBuilderX类型 正式
HBuilderX版本 3.2.3
手机系统 全部
页面类型 nvue
打包方式 离线
项目创建方式 HBuilderX

测试过的手机:

鸿蒙2.0.0

示例代码:

page/index/index.vue 首页代码

<template>  
    <view>  
    </view>  
</template>  

<script>  
    export default {  
    }  
</script>  
<style>  
</style>  

page/index/bottombar/subNvue.nvue subNvue代码

<template>  
    <div class="page">  
        <span class="text">绿色为subNvue区域</span>  
        <input type="text" placeholder="请输入" @focus="focus()" @blur="blur()" />  
    </div>  
</template>  
<script>  
    export default {  
        data() {  
            return {};  
        },  
        onLoad() {},  
        methods: {  
            focus() {  
                uni.getSubNVueById("bottombar").setStyle({ height: "500px" })  
            },  
            blur() {  
                uni.getSubNVueById("bottombar").setStyle({ height: "200px" })  
            }  
        }  
    }  
</script>  
<style lang="scss">  
    .page {  
        background-color: #4CD964;  
    }  
</style>  

pages.json 配置文件

{  
    "pages": [  
        {  
            "path": "pages/index/index",  
            "style": {  
                "navigationBarTitleText": "uni-app",  
                "app-plus": {  
                    "subNVues": [{  
                        "id": "bottombar",   
                        "path": "pages/index/bottombar/bottombar",   
                        "style": {  
                            "position": "dock",  
                            "dock": "bottom",  
                            "bottom:": "100px",  
                            "width": "100%",  
                            "height": "200px"  
                        }  
                    }]  
                }  
            }  
        }, {  
            "path": "pages/test/test",  
            "style": {  
                "navigationBarTitleText": "test"  
            }  
        }  
    ],  
    "globalStyle": {  
        "navigationBarTextStyle": "black",  
        "navigationBarTitleText": "uni-app",  
        "navigationBarBackgroundColor": "#F8F8F8",  
        "backgroundColor": "#F8F8F8"  
    }  
}  

操作步骤:

点击输入框弹出输入法,触发 focus 事件,focus 事件设置 subNvue 高度
input 失去焦点时,还原 subNvue 高度

预期结果:

subNvue 高度正常调整

实际结果:

subNvue调整时,里面的 文本 和 输入框 都消失了

bug描述:

在andoroid app 中,subNvue 原生子窗体中的 input 标签的 cursor-spacing 属性无法使用,即输入法弹出时,输入法无法正常顶起 input 输入框,导致输入框被遮挡。

故采取手动调整 subNvue 高度的策略,方法如下:监听 input 获得焦点事件 focus,调整 subNvue 高度,监听 input 失去焦点事件 blur,还原subNvue高度。但是调用 subNvue 的 setStyle 方法调整 height 高度时,subNvue 的内容被遮挡住了。

另外,当通过输入法返回触发 input 失去焦点 blur 事件,和通过点击主页面(非subNvue)触发 input 失去焦点 blur 事件。页面被遮挡的表现形式也不同。

附件

test.zip


更多关于uni-app android app里,subNvue原生子窗体问题:当input唤起输入法后,设置subNvue的高度,subNvue页面的内容全部被遮挡的实战教程也可以访问 https://www.itying.com/category-93-b0.html

13 回复

管理员能看一下吗

更多关于uni-app android app里,subNvue原生子窗体问题:当input唤起输入法后,设置subNvue的高度,subNvue页面的内容全部被遮挡的实战教程也可以访问 https://www.itying.com/category-93-b0.html


管理员能看一下吗

管理员能看一下吗

我的思路,用 uni.preload 加载一个页面, 页面里面通过 uni.$on 和 uni.$emit 做数据事件通信。可以规避你这个问题,使用起来和 subnvue 没大区别 。我 app 里面做评论组件的时候,就是这个思路,点击的时候,唤起已经 preload 的页面,把数据传递过去,这种思路可以实现全局弹窗、全局组件等,可以通过 v-if 和 uni.$emit 传递类型控制要显示的组件

用subNvue的起因是,要做一个自定义tabbar,但是页面包含video,

回复 3***@qq.com: 你在自定义tabbar 里面还加了 input 或 textarea ?感觉怪怪的输入框的顶起,如果adjust-size设置无效的话,考虑用 uni.onKeyboardHeight 监听键盘高度,别用 textarea 上的那个高度事件,实际测试2个事件差500ms 左右

回复 青阳_1900: 就算不监视focus、blur事件,不调用 subNvue 的 .setStyle 方法,如果通过点击pages/index/index.vue 页面的任何地方(注意不是subNvue 子窗体) ,subNvue 子窗体内的内容都会被遮挡。

<script> import Vue from 'vue' export default Vue.extend({ mpType: 'app', onLaunch() { uni.preloadPage({ url: '/pages/popup/index' }) } }) </script> <template> <view style="flex:1"> <pop-bind v-if="type === 'bind'" /> <pop-login v-if="type === 'login'" /> <pop-share v-if="type === 'share'" :options="opts" /> <pop-privacy v-if="type === 'privacy'" :options="opts" /> <pop-curtain v-if="type === 'curtain'" :options="opts" /> <pop-splash v-if="type === 'splash'" :options="opts" /> <pop-modal v-if="type === 'modal'" :options="opts" /> <pop-comment v-if="type === 'comment@create'" :options="opts" /> </view> </template> <script> export default { data() { return { type: '', opts: {}, } }, onLoad() { // 非纯nvue项目,在使用 preload 后会导致 this.$scope.eventChannel.on 会报错 // https://ask.dcloud.net.cn/question/126452 uni.$on('popup@show', ({ type, opts }) => { this.type = type this.opts = opts }) uni.$on('popup@hide', (callback) => { uni.hideKeyboard() this.type = '' this.opts = {} uni.navigateBack() setTimeout(() => { callback && callback() }, 50) // 避免关闭中执行 }) }, onUnload() { uni.$off('popup@show') uni.$off('popup@hide') }, onBackPress({ from }) { if (from !== 'navigateBack') return true // 阻止返回 }, } </script>

管理员能看一下吗

没用的 官方根本不回信息 我前几个星期也提了你这个问题 这个问题 就是IOS可以监听软键盘弹出获取高度动态改变input的高度 但是安卓不能用 我提了BUG 到现在没人解决

管理员能看一下吗

这个问题是由于在Android平台,subNvue原生子窗体在输入法弹出时调整高度,触发了系统对输入法窗口的重新布局,导致subNvue内容被遮挡。

核心原因是:Android系统在输入法弹出时,会调整窗口布局,而subNvue作为原生子窗体,其内容区域在高度调整后可能没有正确重绘。

解决方案:

  1. 使用cursor-spacing属性(推荐): 在input标签上添加cursor-spacing属性,设置合适的间距值,让输入法自动顶起输入框:

    <input type="text" placeholder="请输入" cursor-spacing="20" />
    

    这个属性在最新版本的uni-app中应该已经修复,请确保HBuilderX和基座都是最新版本。

  2. 延迟调整高度: 如果必须手动调整高度,可以添加延迟来避免布局冲突:

    focus() {
        setTimeout(() => {
            uni.getSubNVueById("bottombar").setStyle({ height: "500px" })
        }, 100)
    },
    blur() {
        setTimeout(() => {
            uni.getSubNVueById("bottombar").setStyle({ height: "200px" })
        }, 100)
    }
    
  3. 使用resize事件监听: 监听窗口大小变化,在布局稳定后再调整:

    let resizeTimer = null
    focus() {
        if (resizeTimer) clearTimeout(resizeTimer)
        resizeTimer = setTimeout(() => {
            uni.getSubNVueById("bottombar").setStyle({ height: "500px" })
        }, 300)
    }
回到顶部