1.png
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title></title>
<style type="text/css">
*{margin: 0;padding: 0;}
html,body,#page{width: 100%;height: 100%;}
#page{position: relative;}
#page header{width: 100%;height: 45px;color: white;font-size: 15px;position: relative;text-align: center;background: #40a2fe;line-height: 45px;}
#page header .logo{position: absolute;width: 33px;height: 33px;border-radius: 50%;left: 10px;top: 6px;}
#page header .logo img{width: 100%;height: 100%;display: block;border-radius: 50%;}
#page .msg-box{position: absolute;top: 45px;left: 0;right: 0;bottom: 38px;overflow: auto;}
#page .msg-box ul{}
#page .msg-box ul li{font-size: 12px;list-style: none;overflow: auto;}
#page .msg-box ul .all-list{}
#page .msg-box ul .all-list img{width: 45px;height: 45px;border-radius: 50%;display: block;margin: 8px;float: left;}
#page .msg-box ul .all-list p{max-width: 239px;padding: 12px;float: left;background: #a2d6f3;color: white;border: 1px solid #91c9e9;border-radius: 5px;box-shadow: 2px 2px #369bdb;margin-top: 15px;word-wrap:break-word; word-break:normal;}
/*#page .msg-box ul .all-list:after{content: "";clear: both;visibility: hidden;height: 0;}*/
#page .msg-box ul .muchlist{padding: 10px;text-align: center;}
#page .msg-box ul li a{padding: 5px 10px;background: #e2e2e2;text-decoration: none;font-size: 12px;border-radius: 5px;color: #666;}
#page .msg-box ul li a:hover{text-decoration: none;}
#page .msg-box ul .right p{box-shadow: -2px 2px #369bdb;float: right;}
#page .msg-box ul .right img{float: right;}
#page .send-box{position: absolute;left: 0;width: 100%;bottom: 0;background: #CECECE;height: 38px;text-align: center;}
#page .send-box input{width: 298px;height: 30px;font-size: 12px;border: 1px solid #fff;border-radius: 5px;margin-top: 3px;}
#page .send-box button{height: 30px;padding: 0 10px;border:1px solid #cecece;color: white;}
</style>
</head>
<body>
<div id="page">
<header>
<div class="logo">
</div>
于永豪
</header>
<div class="msg-box">
<ul id="box" style="height: 100%;overflow: auto;">
<li class="muchlist" >
<a href="javascript:void(0)" v-on:click="historymsn()">查看更多历史消息</a>
</li>
<li v-for="item in items" :class="{right:item.right}" class="all-list">
<p>{{item.text}}</p>
</li>
</ul>
</div>
<div class="send-box">
<input type="text" name="" id="" value="" v-model="msgs" v-on:keyup.13="send()"/>
<button>发送</button>
</div>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.js"></script>
<script src="https://cdn.bootcss.com/vue/2.4.2/vue.js"></script>
<script type="text/javascript">
var datamsn = [
{
text:"你好1",
right:0
},
{
text:"finethanks",
right:1
},
{
text:"finethanks",
right:1
},
{
text:"finethanks",
right:1
},
{
text:"finethanks",
right:1
},
{
text:"finethanks",
right:1
},
{
text:"finethanksfinethanksfinethanksfinethanksfinethanksfinethanksfinethanksfinethanksfinethanksfinethanksfinethanks",
right:1
},
{
text:"finethanks",
right:1
},
{
text:"finethanks",
right:1
},
{
text:"finethanks",
right:1
},
{
text:"finethanks",
right:1
},
]
var cc = datamsn.reverse()
var dataIm = [
{
text:"数据已",
right:0
},
{
text:"数据已",
right:0
},
{
text:"数据已",
right:1
},
{
text:"数据已",
right:0
},
{
text:"数据已",
right:0
},
{
text:"数据已",
right:0
},
{
text:"数据已",
right:0
},
{
text:"数据已",
right:0
},
{
text:"数据已",
right:0
},
{
text:"数据已",
right:0
},
{
text:"数据已",
right:0
},
{
text:"数据已",
right:0
}
]
var vm = new Vue({
el:"#page",
data:{
items:dataIm,
msgs:'',
historymsg:true
},
computed:{
sendbox:function(){
return document.getElementById("box");
}
},
methods:{
send:function(){
this.items.push({
text:this.msgs,
right:1
})
this.msgs=''
},
historymsn: function(){
this.historymsg = false;
for(var i=0;i<datamsn.length;i++){
this.items.unshift(cc[i]);
}
}
},
updated:function(){
if(this.historymsg){
document.getElementById("box").scrollTop=document.getElementById("box").scrollHeight
}else{
this.historymsg = true;
var li = document.getElementById('box').getElementsByTagName('li');
var liheight = 0;
for(var i=0;i<datamsn.length;i++){
liheight += li[i].offsetHeight;
}
console.log(liheight);
document.getElementById("box").scrollTop = liheight;
}
}
})
</script>
</body>
</html>
