<!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>
MUI实现h5即时通讯聊天页面样式
猜你喜欢
转载自blog.csdn.net/Serena_tz/article/details/132684047
今日推荐
周排行