一、模仿消息页面
body部分：
<div id="itany">
<div class="main">
<router-link to='/message'>消息</router-link>
<router-link to='/contact'>联系人</router-link>
<router-link to='/move'>动态</router-link>
</div>
<router-view></router-view>
</div>
js部分：
// 链接js
<script src="js/vue.js"></script>
<script src="js/vue-router.js"></script>
<script src="js/axios.js"></script>
//创建组件
var Message={
template:`
<div class="header">
<ul>
<li v-for="value in personList">
<img v-bind:src="value.img">
<span>{{ value.uname}}<b>{{new Date()|date}}</b></span>
<p>{{value.say}}</p>
</li>
</ul>
</div>
`,
data:function(){
return{
personList:null
}
},
mounted:function(){
var self=this;
axios({
mthods:'get',//发送数据的方式
url:'person.json'
}).then(function(resp){
console.log(resp.data)
self.personList=resp.data
}).catch(function(err){
// 请求失败
console.log(err)
})
}
}
}
// 3.配置路由
const routes=[
{path:'/',component:Message},
{path:'/message',component:Message},
{
path:'/contact',
component:Contact,
children:[
{path:'/',component:Friend},
{path:'friend',component:Friend},
{path:'group',component:Group}
]
},
{path:'/move',component:Move}
]
// 4.创建路由实例
const router=new VueRouter({
routes:routes,
linkActiveClass:'active'
})
//时间
Vue.filter('date',function(data){
return data.getHours()+':'+data.getMinutes()
})
new Vue({
el:"#itany",
router:router
})
</script>
person.json数据
[
{
"uname":"纪美",
"say":"你们去不去吃饭？",
"img":"imgs/1.jpg"
},
{
"uname":"王颖",
"say":"我想去",
"img":"imgs/2.jpg"
},
{
"uname":"王文丽",
"say":"带上我，我也去",
"img":"imgs/3.jpg"
},
{
"uname":"二哥",
"say":"那就去吧",
"img":"imgs/4.jpg"
} ,
{
"uname":"王箭",
"say":"我们欢迎大力唱首歌",
"img":"imgs/6.jpg"
}
]
效果图：
消息.png
二、模仿联系人页面
好友页面效果图：
联系人好友页面.png
我的好友：
contact.json数据：
[
{
"group":"新朋友",
"count":"(0/0)",
"img":"imgs/2.jpg",
"title":"暂无好友申请",
"txt":"添加好友",
"flag":true
},
{
"group":"我的设备",
"count":"(2/2)",
"img":"imgs/3.jpg",
"title":"发现新设备",
"txt":"玩转智能新设备,发现新生活",
"flag":false
},
{
"group":"我的好友",
"count":"(21/25)",
"img":"imgs/1.jpg",
"title":"纪美",
"txt":"123123",
"flag":false
}
]
js部分：
// 联系人
var Contact={
template:`
<div class="nav">
<ul class="nav-list">
<li><router-link to='/contact/friend'>好友</router-link></li>
<li><router-link to='/contact/group'>群聊</router-link></li>
</ul>
<router-view></router-view>
</div>
`
}
//我的好友
var Friend={
template:`
<div>
<ul class='concat'>
<li v-for="(value,index) in concater">
<b>></b>
<span @click="chg(index)">{{value.group}}</span>
<span>{{value.count}}</span>
<ul class="con_detail" v-show="concater[index].flag">
<li>
<img :src='value.img'>
<div>
<p>{{value.title}}</p>
<p>{{value.txt}}</p>
</div>
</li>
</ul>
</li>
</ul>
</div>
`,
methods:{
chg:function(index){
this.concater[index].flag=!this.concater[index].flag
}
},
data:function(){
return{
concater:null
}
},
mounted:function(){
var that=this;
axios({
method:"get",
url:"contact.json"
}).then(function(resp){
console.log(resp.data)
that.concater=resp.data;
}).catch(function(err){
console.log(err)
})
}
}
//群聊
var Group={
template:`
<div>
<ul class='group'>
<li v-for="(value,index) in grouper">
<b>></b>
<span @click="alt(index)">{{value.groupname}}</span>
<span>{{value.count}}</span>
<ul class="group_title" v-show="grouper[index].flag">
<li>
<img :src='value.img'>
<div>
<p>{{value.title}}</p>
<p>{{value.txt}}</p>
<span>{{new Date()|date}}</span>
</div>
</li>
</ul>
</li>
</ul>
</div>
`,
methods:{
alt:function(index){
this.grouper[index].flag=!this.grouper[index].flag
}
},
data:function(){
return{
grouper:null
}
},
mounted:function(){
var self=this;
axios({
method:"get",
url:"group.json"
}).then(function(resp){
console.log(resp.data)
self.grouper=resp.data;
}).catch(function(err){
console.log(err)
})
}
}
群聊group.json部分：
[
{
"groupname":"我的群聊",
"img":"imgs/8.jpg",
"count":"10/12",
"title":"123",
"txt":"一起去吃饭吧",
"flag":true
},
{
"groupname":"我的多人群聊",
"img":"imgs/9.jpg",
"count":"5/8",
"title":"my family",
"txt":"哈哈",
"flag":false
}
]
群聊页面效果图：
联系人群聊页面.png
三、模仿空间动态页面
js部分：
// 动态
var Move={
template:`
<div class="last">
<div class="last-content">
<ul>
<li><img src="./images/1.jpg"></li>
<li><img src="./images/2.jpg"></li>
<li><img src="./images/3.jpg"></li>
<li><img src="./images/4.jpg"></li>
</ul>
</div>
</div>
`
}
效果图：
动态.png
QQ css样式
*{
margin:0;
padding:0;
list-style: none;
box-sizing: border-box;
}
a{
text-decoration: none;
}
body{
background:#ccc;
}
#itany{
width:320px;
height: 500px;
margin:100px auto;
background-image:url(../imgs/5.jpg);
}
.main{
border-bottom: 1px solid #f0f0f0;
width:320px;
margin:0 auto;
}
.main>a{
width:103px;
text-align: center;
display: inline-block;
color:#c8c6c2;
line-height: 45px;
}
.main>a:hover{
color:#000;
}
.main .active{
border-bottom:2px solid #12b7f5;
color:#12b7f5;
}
/*message消息------------------start------------------------*/
.header{
margin:0 auto;
margin-top:30px;
}
.header>ul>li{
width:250px;
margin-left:20px;
overflow: hidden;
line-height: 32px;
margin-bottom: 8px;
}
.header>ul>li:hover{
background:#f2f2f2;
}
.header>ul>li>img{
width:50px;
height: 50px;
border-radius: 50%;
float:left;
margin-right:20px;
margin-top:8px;
}
.header>ul>li>span{
color:#f96d6d;
display: block;
margin-bottom: -8px;
}
.header>ul>li>span>b{
font-weight: normal;
color:#868686;
font-size: 12px;
float:right;
}
.header>ul>li>p{
color:#868686;
font-size: 14px;
display: block;
width:251px;
}
/*contact联系人---------------start-----------*/
.nav-list{
overflow: hidden;
width:320px;
margin:0 auto;
margin-top:20px;
}
.nav-list>li{
float:left;
width:130px;
text-align: center;
}
.nav-list>li>a{
display:inline-block;
width:75px;
height:25px;
line-height: 25px;
color:#8b847a;
}
.nav-list .active{
background:#ecfaff;
color:#12b7f5;
}
.nav-list>li:hover a{
color:#000;
}
/*friend我的好友------------start------*/
.concat{
margin:15px 43px;
}
.concat>li{
margin-bottom: 30px;
}
.concat>li>b{
color:#ccc;
}
.con_detail>li{
overflow: hidden;
margin:10px 0;
margin-top:30px;
}
.con_detail>li>img{
float:left;
width:15%;
border-radius: 50%;
}
.con_detail>li>div{
float:left;
margin-left:15px;
}
.con_detail>li>div>p:first-child{
color:#000;
font-size: 14px
}
.con_detail>li>div>p:nth-child(2){
color:#999;
font-size: 12px;
}
/*group我的群聊--------------start----------*/
.group{
margin:15px 43px;
}
.group>li{
margin-bottom: 30px;
}
.group>li>b{
color:#ccc;
}
.group_title>li{
overflow: hidden;
margin:10px 0;
margin-top:30px;
}
.group_title>li>img{
float:left;
width:25%;
border-radius: 50%;
}
.group_title>li>div{
float:left;
margin-left:15px;
overflow: hidden;
}
.group_title>li>div>p:first-child{
color:#000;
font-size: 14px;
line-height: 34px;
}
.group_title>li>div>p:nth-child(2){
color:#999;
font-size: 12px;
float:left;
}
.group_title>li>div>span{
font-size: 12px;
float:right;
margin-left:44px;
color:#ccc;
}
/*move空间动态------------start-----------*/
.last-content{
width:320px;
margin:0 auto;
}
.last-content>ul{
overflow: hidden;
}
.last-content>ul>li{
float:left;
width:150px;
height: 146px;
margin-right:10px;
text-align: center;
}
.last-content>ul>li>img{
width:100%;
}
网友评论