一个很紧急的问题，设计微信一样的聊天内页，求解决！

分类：MUI

mui

官方工程师们，务必帮我解决下，这个问题困扰好几天了，试了各种方法没有解决掉。茶不思，饭不进。。。。江湖救急。请看下图问题图示：

...................................................................................................................

我们的头部和消息内容框都被推上去了。。。哭呀哭。。。

...................................................................................................................

看下微信的效果

跪求帮解决，希望官方重视下。谢谢！

2014-10-13 13:18 负责人:无分享

9 个回复

伟子

。。。。。这不是官方重不重视的问题。自己代码改良下就可以了

shiwen1114 (作者)

这个官方应该需要重视呀，像app很多都需要在底部做个input输入框方便回复交流。

2014-10-14 00:00

DCloud_App_Array

可以用两个webview嵌套来实现，如下代码示例（webview_list.html为带编辑框的滚动页面）：
{{{
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
var ws=null,sub1=null,sub2=null;
function plusReady(){
ws=plus.webview.currentWebview();
sub1=plus.webview.create("webview_list.html","list",{top:"100px",bottom:"0px"});
ws.append(sub1);
}
if(window.plus){
plusReady();
}else{
document.addEventListener('plusready',function(){
plusReady();
},false);
}
</script>
</head>
<body>
<button onclick="plus.webview.currentWebview().close()">Close</button>
Header
</body>
</html>
}}}

shiwen1114 (作者)

@Array 感谢您的回复，按照您的方法试了，还是出现一些问题，问题如下四个方面，我都用图示表示出来。

第一个问题：

第二个问题：

第三个问题：

第四个问题：

用webview后，由于头部在上级页面中，头部左侧的返回图标按键无效了，不能返回。

恳请继续赐教！！

DCloud_UNI_CHB

双webview的返回问题应该简单，看下hello mui中示例，下拉刷新的代码都是双webview的；

第二个问题，输入框跑中间的问题，试试修改viewport的meta信息为如下内容：
{{{
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />
}}}