uni-app Android 特有bug：手写tab 进入新页面并弹出键盘，返回tab页就会导致tab消失

uni-app Android 特有bug：手写tab 进入新页面并弹出键盘，返回tab页就会导致tab消失

项目 信息
产品分类 uniapp/App
PC开发环境操作系统 Windows
PC开发环境操作系统版本号 2004
HBuilderX类型 Alpha
HBuilderX版本号 3.1.3
手机系统 Android
手机系统版本号 Android 10
手机厂商 华为
手机机型 荣耀30 和 红米手机
页面类型 vue
打包方式 云端
项目创建方式 HBuilderX

示例代码：

RT 都在描述哪里写清楚啦

操作步骤：

RT 都在描述哪里写清楚啦

预期结果：

RT 都在描述哪里写清楚啦

实际结果：

RT 都在描述哪里写清楚啦

bug描述：

以下都是安卓特有的bug , ios端运行良好 , 但是用redirectTo跳转到新页面后 , 点击input还是会小卡顿一下 , 设备iphone12

1问题一

配合视频使用更佳 !!!

  1. 使用navigateTo跳转 , 新页面打开输入框 , 不隐藏键盘 , 直接点左上角返回 会导致手写的tab栏消失
    • 实测进入进新页面后 , 只要弹出了输入法 , 返回后手写的tab栏必定消失
    • 消失的原因 , 我给tab加上了border-top: 100px测试后发现 , tab被下压了 , 边框还是能显示部分
//跳转页面  
uni.redirectTo({  
    url: '../chatroom/chatroom?type=main&username=' + JSON.stringify(nameList)  
})  
// 跳转后的页面  
// 视频点击返回的页面  
onBackPress() {  
    uni.hideKeyboard() // 加入了返回前隐藏键盘 , 以为能抢救一下 , 但是并没有什么用  
    return false  
}

问题一的视频链接, 请全屏查看!!! 视频链接

问题二

你说既然用navigateTo跳转不行, 那我就曲线救国用redirectTo, 再通过返回拦截使用redirectTo跳转回到上一个页面 , 页面重新加载了就不存在问题一的tab消失的问题了 , 结果问题二来了

通过redirectTo跳转 input加入了 cursor-spacing:60 在navigateTo下有用, 但redirectTo下无效 , 键盘弹出遮挡input输入框 , 并且隐藏输入法后整块input都被下压下去了 , 有解决思路吗?

//跳转页面  
tab_chat() {  
    uni.redirectTo({url: '../chat/chat'})  
},  

// 跳转后的页面  
// 视频点击返回的页面  
onBackPress() {  
    uni.hideKeyboard() // 还是想抢救一下  
    if(this.type == 'main') uni.redirectTo({url:'../main/main'})  
    else uni.reLaunch({url:'../chat/chat'}) //  redirectTo / reLaunch 都试过了  
    return true  
}

问题二的视频链接, 请全屏查看!!! 视频链接2

求解决思路

以上问题 , ios端使用体验良好 , 等修复好估计要点时间 , 各位大神大显神通一下呗


更多关于uni-app Android 特有bug：手写tab 进入新页面并弹出键盘，返回tab页就会导致tab消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

请提供一个完整示例demo我们检测看看

更多关于uni-app Android 特有bug：手写tab 进入新页面并弹出键盘，返回tab页就会导致tab消失的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这个怎么提供呀 , 从整个项目里面提取出来不很费时间吗

能提供页面代码和样式吗?

回复 eachann: 这您看吧 最好提供示例demo。验证问题的优先级会高一些。

这是一个典型的Android键盘弹起导致的布局问题。针对你描述的两个问题，我给出以下解决方案：

问题1（tab栏消失）：

  1. 在页面onShow生命周期中手动重置布局：
onShow() {
    setTimeout(() => {
        window.scrollTo(0, 0)
    }, 100)
}
  1. 或者在manifest.json中配置softinputMode为"adjustPan"：
"app-plus": {
    "softinputMode": "adjustPan"
}

问题2（redirectTo跳转后cursor-spacing失效）：

  1. 改用navigateTo跳转，并在页面onUnload中强制隐藏键盘：
onUnload() {
    uni.hideKeyboard()
}
  1. 或者手动调整页面滚动位置：
onReady() {
    uni.pageScrollTo({
        scrollTop: 0,
        duration: 0
    })
}

临时解决方案： 可以尝试在tab栏的样式中添加：

position: fixed;
bottom: 0;
z-index: 999;
回到顶部