MUI使用header头部导航和input输入框后的问题

亦凉 2021-10-19 07:28 239阅读 0赞

### 概述 ###

我的情况是：

大体类似微信的聊天面板

定义了一个header，有标题和返回按钮

中间是可滑动的消息列表

footer是消息输入框和发送按钮

出现的问题是：

点击输入框弹出软键盘

此时header的位置会瞬间下滑一段距离后恢复，有点闪屏的感觉

无论header是否设置pisition:fixed;都会出现这个问题

### 解决方案 ###

不再使用header

打开窗口时使用 titleNView ，即带标题栏的新窗口

详情见h5+文档：[http://www.html5plus.org/doc/zh\_cn/webview.html\#plus.webview.WebviewTitleNViewStyles][http_www.html5plus.org_doc_zh_cn_webview.html_plus.webview.WebviewTitleNViewStyles]

不过我认为其中窗口的显示好像有些问题，下面是我的代码

webview = plus.webview.create('chatting.html', 'chatting', {
    		'titleNView': {
    		'backgroundColor': '#efeff4',
    		'titleText': friendNickname,
    		'titleColor': 'black',
    		'autoBackButton': 'true'
    		}},
    		{
    			friendUserId: friendUserId,
    			friendNickname: friendNickname,
    			friendFaceImage: friendFaceImage
    		});
    webview.addEventListener('close', function() {
    	plus.webview.close('chatting-'+friendUserId);
    });
    webview.addEventListener('hide', function() {
    	plus.webview.close('chatting-'+friendUserId);
    });
    					
    plus.webview.show('chatting','slide-in-right');

[http_www.html5plus.org_doc_zh_cn_webview.html_plus.webview.WebviewTitleNViewStyles]: http://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewTitleNViewStyles

发表评论取消回复

表情：

评论列表（有 0 条评论，239人围观）

还没有评论，来说两句吧...

相关阅读

相关文本输入框＜input＞

(1)创建文本输入框文本输入框是获取用户输入的一种方便的方法。 `<input>` 标签规定用户可输入数据的输入字段。根据不同的 type 属性，输入字段有多种

小咪咪/ 2024年03月29日 15:46/ 0 赞/ 180 阅读

相关 input输入框输入数值后，设置背景颜色为透明

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:f

灰太狼/ 2022年12月29日 14:14/ 0 赞/ 223 阅读

相关解决input输入后背景图片变形的问题和mui背景图片全屏方法

mui背景图片全屏方法： .mui-content{ position: absolute; width: 100%; heig

叁歲伎倆/ 2022年11月20日 08:09/ 0 赞/ 196 阅读

相关 input输入框输入数值检测只能输入数字，非数字离开输入框后会清除

input输入框输入数值检测只能输入数字，非数字离开输入框后会清除 // blur 事件 Blur(nums) { thi

爱被打了一巴掌/ 2022年09月10日 10:10/ 0 赞/ 328 阅读

相关输入框input

input输入框在ie下高度显示不正常，并且里面的文字内容不居中显示解决方法：可以具体看百度首页这里简单说下： <span> <i

深藏阁楼爱情的钟/ 2022年07月16日 01:47/ 0 赞/ 407 阅读

相关 Bootstrap输入框和导航组件

输入框组件 > 文本输入框就是可以在input元素前后加上文字或按钮，可以实现对表单控件的扩展  <div class="i

我就是我/ 2022年06月12日 04:46/ 0 赞/ 246 阅读

相关 Form-input输入框

1、基本使用 v-model：绑定的值，string / number size：指定输入框的尺寸，除了默认的medium大小外，还提供了 large、small 和 mi

你的名字/ 2022年03月31日 19:11/ 0 赞/ 541 阅读

相关 input输入框只能输入数字

<input type="number" class="input-control input-l" id="oldcard" oninput = "value=val

骑猪看日落/ 2022年02月01日 13:09/ 0 赞/ 497 阅读

相关 input 输入框限制

只能输入数字和一个小数点转自： https://www.jianshu.com/p/c26bfb0dfd8d <label> 　　<input id="t

红太狼/ 2021年12月23日 00:23/ 0 赞/ 511 阅读

相关 MUI使用header头部导航和input输入框后的问题

概述我的情况是：大体类似微信的聊天面板定义了一个header，有标题和返回按钮中间是可滑动的消息列表 footer是消息输入框和发送按钮出现的问题是：

亦凉/ 2021年10月19日 07:28/ 0 赞/ 240 阅读