MUI原生开发APP聊天页面

最新推荐文章于 2022-01-17 20:32:50 发布

Star_hui_

最新推荐文章于 2022-01-17 20:32:50 发布

阅读量1.4k

点赞数 3

分类专栏： demo 文章标签： html js javascript css

本文链接：https://blog.csdn.net/weixin_43893363/article/details/104519789

版权

demo 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

模仿微信APP，写聊天界面demo时在网上搜索发消息的定位没有，因此自己写了一个，大家看到我的这篇博客如果有什么问题可以评论或私聊我，我会及时回复
先发一下我写出来的样式
在这里插入图片描述
下面是代码，有点小bug,输入字母和数字发送显示不能自适应宽度，文字可以

<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="../css/main.css"/>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
	</head>
	<style type="text/css">
		#mui-content{
			margin-top: 46px;
		}
		.msg-content{
			width: 100%;
			border: 1px transparent solid;
		}
		.msg-user-img{		
			margin-left: 4px;;
			width: 40px;
			height: 40px;
		}
		.msg-user-imgr{		
			margin-left:320px;
			width: 40px;
			height: 40px;
		}			
		.msg-content-inner{
			width:fit-content;
			width:-webkit-fit-content;
			width:-moz-fit-content;
			height: 30px;
			margin-top: -50px;
			margin-left: 60px;
			background-color: white;
			line-height: 29px;
			border-radius: 4px;
		}
		.msg-content-innerr{
			width:fit-content;
			width:-webkit-fit-content;
			width:-moz-fit-content;
			max-width: 80px;
			margin-top: -50px;
			margin-left: 260px;
			/*background-color: white;*/
			line-height: 29px;
			border-radius: 4px;
		}
		.msg-content-img{
			width: 89px;
			height: 89px;			
			margin-top: -50px;
			/*background-color: white;*/
		}
		.msg-content-imgr{
			width: 89px;
			height: 89px;			
			margin-top: -50px;
			margin-left: -49px;
			/*background-color: white;*/
		}
		.bianjuimg{
			margin-bottom: 54px;
		}
		.bianjutext{
			margin-bottom: 8px;
		}
		.zishiying{
			height: auto;
			background-color: white;
			margin-left: 230px;
		}
	</style>
	<body>
		<header class="mui-bar mui-bar-nav">
		    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" id="title"></a>
		    <!--<h1 class="mui-title">标题</h1>-->
		</header>
		<div id="mui-content">
			<div id="msg-list">
				<!--好友发送图片格式-->
				<div class="msg-item msg-item-self1 msg-type msg-content">
					<img class="msg-user-img bianjuimg" src="../img/1.jpg" alt="" />
					<div class="msg-content">
						<div class="msg-content-inner">
							<img class="msg-content-img" src="../img/4.jpg" style="max-width: 100px;"/>
						</div>
						<div class="msg-content-arrow"></div>
					</div>
					<div class="mui-item-clear"></div>
				</div>
				
				<!--好友文本文本格式-->
				<div class="msg-item msg-item-self1 msg-type msg-content">
					<img class="msg-user-img bianjutext" src="../img/1.jpg" alt="" />
					<div class="msg-content">
						<div class="msg-content-inner">
							你好
						</div>
						<div class="msg-content-arrow"></div>
					</div>
					<div class="mui-item-clear"></div>
				</div>
				
				
				<!--自己发送图片格式-->
				<div class="msg-item msg-item-self1 msg-type msg-content">
					<img class="msg-user-imgr bianjuimg" src="../img/2.jpg" alt="" />
					<div class="msg-content">
						<div class="msg-content-innerr">
							<img class="msg-content-imgr" src="../img/3.jpg" style="max-width: 100px;"/>
						</div>
						<div class="msg-content-arrow"></div>
					</div>
					<div class="mui-item-clear"></div>
				</div>
				<!--自己文本文本格式-->
				<div class="msg-item msg-item-self msg-content">
					<img class="msg-user-imgr bianjutext"  src="../img/2.jpg"/>
					<div class="msg-content">
						<div class="msg-content-innerr zishiying">
							你好
						</div>
						<div class="msg-content-arrow"></div>
					</div>
					<div class="mui-item-clear"></div>
				</div>
				
			</div>
			
		</div>
		
		
		
		<!--底部发送信息-->
		<nav class="mui-bar mui-bar-tab" style="padding-top: 15px;">
			<i id="msg-img" class="mui-icon mui-icon-plus" style="font-size:28px ;float: left;width: 15%;padding-left: 10px;"></i>
			<textarea id="msg-text" type="text" class="input-text" style="float: left;width: 70%;height:50px;border-radius: 10px;padding-left: 10px;"></textarea>
			<i id="msg-type" class="mui-icon mui-icon-paperplane" style="font-size:28px ;float: left;width: 15%;padding-left: 10px;"></i>
		</nav>	
		<script src="../js/jquery-3.3.1.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			//加载事件
			mui.plusReady(function(){
				//1、加载好友名称
				var curView=plus.webview.currentWebview();
				//2、获取参数name
				var name=curView.name;
				//3、将好友名称更新到页面上
				$("#title").html(name);
				
				//获取发送对象
				var sendNode=document.getElementById("msg-type");
				//给节点注册轻击事件
				sendNode.addEventListener("tap",function(){
					//获取信息内容
					var content=$("#msg-text").val();
					//判断消息不为空才发送
					if(content){
						//拼接文本消息
						var html="<div class=\"msg-item msg-item-self msg-content\">"+
									"<img class=\"msg-user-imgr bianjutext\" src=\"../img/2.jpg\"/>"+
									"<div class=\"msg-content\">"+
										"<div class=\"msg-content-innerr zishiying\">"+
											content+
										"</div>"+
										"<div class=\"msg-content-arrow\"></div>"+
									"</div>"+
									"<div class=\"mui-item-clear\"></div>"+
								"</div>";
						//追加消息到消息列表中
						$("#msg-list").append(html);
					}
				});
			});
		</script>
	</body>

</html>