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

mui

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



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

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

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

看下微信的效果

跪求帮解决,希望官方重视下。谢谢!



2014-10-13 13:18 添加评论 分享
已邀请:
0

伟子

赞同来自:

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


0

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>
}}}


0

shiwen1114

赞同来自:

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

第一个问题:



\n

第二个问题:


\n

第三个问题:


\n

第四个问题:

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

恳请继续赐教!!


0

DCloud_MUI_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" />
}}}


0

Willene

赞同来自:

两个webview嵌套实现的话,不会出现滚动的时候编辑框也滚动吗


0

html5+css3仿微信聊天模板|仿微信语音即时聊天|仿微信地图定位
https://blog.csdn.net/yanxinyun1990/article/details/85221037


0

m1993@qq.com

赞同来自:

使用css啥都搞定


0

632013207@qq.com - it

赞同来自:

最近我也在做这个功能,有个问题想请教一下。。。
就是发送聊天消息后,消息怎样上推,现在发送消息后页面长度会加,只能下滑才可以看见消息。


要回复问题请先登录注册