ccab
ccab
  • 发布:2019-02-22 09:56
  • 更新:2020-03-26 11:27
  • 阅读:5942

如何解决iOS弹出键盘时,页面会整体上移且出现黑色背景?

分类:5+ SDK

status bar显示灰色长条未透明显示,manifest.json中设置statusbar: true没效果,若在页面的meta节点content属性值中添加viewport-fit=cover时,当该页面有输入框时,点击输入框弹出键盘时,页面会整体上移且出现黑色背景,请问该问题如何解决。

=====================分割=======================
iPhone 6s 调试

效果图:

2019-02-22 09:56 负责人:无 分享
已邀请:
4***@qq.com

4***@qq.com

这个问题是如何解决的,能不能把过程或代码发一下!谢谢啦!

2***@qq.com

2***@qq.com

有人解决了吗

9***@qq.com

9***@qq.com

解决了吗 项目也遇到这个问题了

DCloud_App_Array

DCloud_App_Array

请提供重现此问题的示例应用。

  • ccab (作者)

    我如何提供示例应用?

    2019-02-22 17:05

  • DCloud_App_Array

    作为附件上传

    2019-02-22 18:22

  • ccab (作者)

    回复 DCloud_App_Array:附件上传了,我使用的是iPhone 6s 调试,离线打包

    2019-02-23 19:28

  • 学习进步

    回复 ccab: 您问题解决了?

    2019-10-20 22:31

  • ccab (作者)

    回复 学习进步: 没了

    2019-10-25 18:03

sharper

sharper - 坐看风云涌起

ios键盘真是个大问题,希望官方好好优化一下键盘

DCloud_iOS_CLP

DCloud_iOS_CLP

你iphone6s系统是多少,其他手机有这个问题吗? 我测试的iphone6s模拟器没有你描述的问题出现,我这没有iphone6s手机没发测试。manifest.json的配置参考文档:http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/94

  • 暮雪骄阳

    我的6S+XS+XSMAX,IOS12+,都有这个问题。影响到窗口的弹跳,偶尔出现Webview的内容容器块都是黑色。这个问题的出现,是在官方升级了适配刘海屏之后。原本我们APP结构是沉浸式,自己适配过刘海屏,增加过viewport-fit=cover,在viewport-fit=cover之下,softinputMode: "adjustResize"失效。假如不使用viewport-fit=cover并且不自主适配刘海屏,这个黑背景块问题就不存在。目前softinputMode: "adjustResize"失效,软键盘弹出整个窗口会上移弹跳然后归位,弹跳过程中出现黑色背景,通常窗口首次激活软键盘,都不能归位,留下大概20PX高度的黑色背景块。体验非常差。

    2019-03-01 13:00

暮雪骄阳

暮雪骄阳

我的6S+XS+XSMAX,IOS12+,都有这个问题。影响到窗口的弹跳,偶尔出现Webview的内容容器块都是黑色。这个问题的出现,是在官方升级了适配刘海屏之后。原本我们APP结构是沉浸式,自己适配过刘海屏,增加过viewport-fit=cover,在viewport-fit=cover之下,softinputMode: "adjustResize"失效。假如不使用viewport-fit=cover并且不自主适配刘海屏,这个黑背景块问题就不存在。目前softinputMode: "adjustResize"失效,软键盘弹出整个窗口会上移弹跳然后归位,弹跳过程中出现黑色背景,通常窗口首次激活软键盘,都不能归位,留下大概20PX高度的黑色背景块。体验非常差。安卓没有这个问题。

设置了沉浸式  
"kernel": { "ios": "Webview"},  
"statusbar" : { "immersed" : true,  "style" : "dark", "background" : "#FFFFFF"},  
修改了meta  
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no,viewport-fit=cover">  
添加了  
mui.plusReady(function() {  
    plus.webview.currentWebview().setStyle({softinputMode: "adjustResize"});  
})  
全局使用了适配刘海屏判断,获取不同的外部CSS  
if(window.plus){  
        //刘海屏适配  
        if(plus.navigator.hasNotchInScreen()){  
            var css = plus.io.convertLocalFileSystemURL("/css/notch.css");  
            var head = document.getElementsByTagName('head')[0];  
            var link = document.createElement('link');  
            link.type='text/css';  
            link.rel = 'stylesheet';  
            link.href = css;  
            head.append(link);  
        }else{  
            //alert('此设备不是刘海屏');  
        };  
}else{// 兼容老版本的plusready事件  
    document.addEventListener('plusready',function () {  
        //刘海屏适配  
        if(plus.navigator.hasNotchInScreen()){  
            var css = plus.io.convertLocalFileSystemURL("/css/notch.css");  
            var head = document.getElementsByTagName('head')[0];  
            var link = document.createElement('link');  
            link.type='text/css';  
            link.rel = 'stylesheet';  
            link.href = css;  
            head.append(link);  
        }else{  
            //alert('此设备不是刘海屏');  
        };  
    },false);  
}

以上情况,除了软键盘弹出改动窗口尺寸时出现半屏的黑色背景块以外。个别窗口页面在首次渲染窗口时,比如首页,在关闭启动页之后,窗口渲染偶尔会出现窗口黑色背景,需要滑动窗口而不是body,才会恢复正常。

现在的解决方法,就是要整个APP500多个页面,把以前自主适配刘海屏的代码删除,不使用viewport-fit=cover,这个黑色背景块就不存在,窗口也不弹跳,但顶部导航是普通的浮动导航,顶部导航在软键盘弹出时会闪现。

优乐美

优乐美 - z

优乐美

优乐美 - z

以前是没有的,我也会出现黑色背景块,导致把header挤上去了

l***@163.com

l***@163.com

文本框失去焦点时执行这个
uni.pageScrollTo({
scrollTop: 0,
duration: 0
})

  • 暮雪骄阳

    这就不是一回事,这是窗口问题adjustResize失效,并不是什么归位问题,而是在窗口挤压问题,在弹出软键盘时就先造成窗口挤压。

    2019-03-02 12:07

l***@163.com

l***@163.com

完美解决

  • seanDaytoy

    请问是怎么解决的啊?

    2019-06-25 09:41

要回复问题请先登录注册