MUI实现h5即时通讯聊天页面样式

Serena_tz

已于 2024-01-04 15:13:59 修改

阅读量303

点赞数

文章标签： javascript 前端学习开发语言

于 2023-09-05 08:58:12 首次发布

本文链接：https://blog.csdn.net/Serena_tz/article/details/132684047

版权

<!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,viewport-fit=cover" />
		<!-- mui样式 -->
		<link href="../../css/mui.min.css" rel="stylesheet" />
		<style>
			html,
			body {
				height: 100%;
				margin: 0px;
				padding: 0px;
				overflow: hidden;
				-webkit-touch-callout: none;
				-webkit-user-select: none;
			}
			.mui-content {
				height: 100%;
				padding: 44px 0px 50px 0px;
				overflow: auto;
				background-color: #eaeaea;
			}
			#msg-list {
				height: 100%;
				overflow: auto;
				-webkit-overflow-scrolling: touch;
			}
		</style>
	</head>
	<body contextmenu="return false;">
		<!-- <div class="container" id="privateChat"> -->
			<!-- 顶部导航栏 -->
			<header id="header" @doubletap="scrollToTop()" class="mui-bar mui-bar-nav blueNav">
				<a class="mui-action-back mui-icon mui-icon-arrowleft mui-pull-left"></a>
				<h1 class="mui-title">张三</h1>
				<a class="mui-icon mui-icon-right-nav mui-pull-right iconfont icon-gengduo1" href="#topPopover"></a>
			</header>

			<!-- mui的内容区 -->
			<div class="mui-content " id="content">
				<div id="msg-list">
					<div v-for="i in 66">才看到在家吃饭看</div>
					<div>这是什么回事</div>
				</div>
			</div>
		<!-- </div> -->
	</body>

	<script src="../../js/mui.min.js" type="text/javascript"></script>
	<script src="../../js/vue.min.js" type="text/javascript"></script>
	<script>
		let privateChat = new Vue({
			el: "#content", //挂载点
			data: {},
			mounted(){
				let list = document.getElementById("msg-list");
				list.scrollTop = list.scrollHeight + list.offsetHeight;
			},
			methods: {
				
			}
		})
	</script>
</html>