用vue中的axios 做的小案例模仿QQ

模仿联系人页：

81.png

  html 代码：

        <div class="w">
            <div class="mulu">
               <router-link to="/xiaoxi" class="one">消息</router-link>
               <router-link to="/lianxi" class="two">联系人</router-link>
               <router-link to="/dongtai" class="three">动态</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>
      <script>
        // 创建组件
           var about={
        template:`
        <div class="xiaox">
            <ul class="list">
                <li><router-link to='/lianxi/regist'>好友</router-link></li>
                <li><router-link to='/lianxi/lon'>群聊</router-link></li>
                <span><img src="./img/1.gif"></span>
            </ul>
            <router-view></router-view>
        </div>
        `
    }
//   好友
     var reg={
        template:`
          <div class="pengyou">
           <ul class='concat'>
              <li  @click="chg(index)" v-for="(value,index) in concater">
                 <b><img src="./img/2.gif"></b>
                 <span>{{value.group}}</span>
                 <span>{{value.count}}</span>
                 <ul class="con" v-show="concater[index].flag">
                   <li>
                     <img :src='value.img'>
                    <div class="lis">
                        <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:"contan.json"
         }).then(function(resp){
             console.log(resp.data)
             that.concater=resp.data; 
         }).catch(function(err){
             console.log(err)
         })
       }
   }
 //   群聊
    var gin={
        template:`
           <div class="group">
           <ul class='concat'>
              <li  @click="add(index)" v-for="(v,index) in conca">
                 <b><img src="./img/2.gif"></b>
                 <span>{{v.group}}</span>
        
                      <ul class="main" v-show="conca[index].flag">
                   <li>
                  
                        <img :src='v.imga'>
                        <p>{{v.title}}</p>
                        <p>{{v.txt}}</p>
                   
                   </li>
            
                 </ul>
                </li>
</ul>
           </div>
    `,
       methods:{
       add:function(index){
            
         this.conca[index].flag=!this.conca[index].flag
       }
   },
       data:function(){
           return{
               conca:null
            
           }
       },
       mounted:function(){
          var that=this;
        axios({
             method:"get",
             url:"qun.json"
         }).then(function(resp){
             console.log(resp.data)
             that.conca=resp.data; 
         }).catch(function(err){
             console.log(err)
         })
       }
   }
    
    //  配置路由
       const routes=[
        {path:'/',component:about},
        {path:'/xiaoxi',component:Index},
        {
            path:'/lianxi',
            component:about,
             children:[
                {path:'/',component:reg},
                {path:'regist',component:reg},
                {path:'lon',component:gin}
            ]
        },
        {path:'/dongtai',component:fabiao}
    ]
    
    //  创建路由实例
    const router=new VueRouter({
        routes:routes,
         linkActiveClass:"active"
    })
    
    //  时间
      Vue.filter('date',function(data){
       return data.getHours()+":"+data.getMinutes();
   })
   
  
    new Vue({
        el:'.w',
        router:router
    })
</script>



qun.json:

  [
      {
   "group":"我的群聊",
   "imga":"./img/23.jpg",
    "title":"单纯DE我们",
    "txt":"8:11",
     "flag":true
      }
]

contan.json:
  
  [
    {
    "group":"新朋友",
     "flag":false
    },
   {
    "group":"我的设备",
    "count":"1/2",
    "img":"img/53.jpg",
    "title":"我的Android手机",
    "txt":"上次登录：2018-9-28",
     "flag":false
    },
     {
    "group":"始于颜值",
    "count":"84/115",
    "img":"img/641.jpg",
    "title":"梁萌",
    "txt":"明天放假真开心",
     "flag":true
    }
]

模拟消息页

8fb43b88-1d97-4eb2-ad91-528556abdb83.png

js:

          //  消息

  var yanzhi={
        template:`
         <div class="xiaox">
            <div class="xinxi">
                <ul>
                    <li>
                    <img src:"/img/23">
                    <p class="p1">{{value.name}}</p>
                    <p class="p2">{{value.liao}}</p>
                   
                </li>
                </ul>
            </div>
        </div>
    `
    }

  qq.json：

    [
{
    "img":"./img/14.jpg",
    "name":"纪美",
    "liao":"干嘛呢？"
},
{
    "img":"./img/53.jpg",
    "name":"大梨",
    "liao":"要不要听我的演唱会？"
},
{
    "img":"./img/8.jpg",
    "name":"二哈",
    "liao":"我头像是我，怎么样好不好看"
},
{
    "img":"./img/641.jpg",
    "name":"梁萌",
    "liao":"1111"
},
{
    "img":"./img/23.jpg",
    "name":"你宛如一个智障",
    "liao":"我好像傻了"
}
]

模仿动态页：

0c5c961e-b550-4be7-9317-b002437c5936.png

js:

    var fabiao={
        template:`
        <div class="xiaox">
            <ul class="nav">
                <li>
                    <a href="#">
                        <img src="./img/3.jpg">
                    </a>
                </li>
                <li>
                    <a href="#">
                        <img src="./img/4.jpg">
                    </a>
                </li>
                <li><a href="#"><img src="./img/5.jpg"></a></li>
                <li><a href="#"><img src="./img/6.jpg"></a></li>
            </ul>
        </div>
        `
    }

css 样式：

  *{
margin: 0;
padding: 0;
list-style: none;
}
a{
    text-decoration: none;
}
.active{
     border-bottom: 2px solid #818186;
    color: #585858;
}
.w{
      width:280px;
      height:630px;
      margin: 0 auto;
     background: url(img/1.jpg)no-repeat -15px -102px;
    background-size: 121% 110%;;
    box-shadow: 0px 1px 7px 1px #969595;
  }
  .mulu{
      width: 100%;
      overflow: hidden;
      border-bottom: 1px solid #f4f4f4;
    }
.one,.two,.three{
    width: 65px;
    height: 40px;
    display: block;
    margin-right:20px; 
    float: left;
    color: #818185;
    font-size: 16px;
    text-align: center;
    line-height: 40px;
    padding: 0 4px;
  }

.list{
  margin-top: 10px;
  overflow: hidden;
  }
.list li a{
    float: left;
    font-size: 15px;
    color: #747479;
    padding: 5px 10px;
    margin:0 7px;

}
 .list span{
       float: right;
      margin-right: 10px;
      line-height: 35px;
}
.list span img{
  width: 42px;
  height: 22px;
}
.pengyou ul li{
   padding: 10px;
    width:93%;
}
.pengyou ul li span{
    font-size: 14px;
    color: #000;

}
.pengyou li:hover{
       background: rgba(247, 247, 247, 0.18);
}
.pengyou p span{
    margin-right: 10px;
      margin-left: 10px;
}
.concat{
    width: 100%;
}
.con{
    overflow: hidden;
}
.con li img{
    width:40px;
    height: 40px;
    border-radius: 50%;
    float: left;
}
.lis{
      overflow: hidden;
      float: left;
     margin-left: 15px;
}
.lis p:first-child{
    font-size: 14px;
}
.lis p:nth-child(2){
    font-size: 12px;
    color: #585858;
}
.xiaox{
    width: 100%;
}
.xiaox ul{
    overflow: hidden;
}
.xiaox ul li{
float: left;
}
.nav li a{
    display: block;
     height: 136px;
    width: 140px;
}
.xinxi{
    width:100%;
}
.xinxi ul{
    margin-top: 20px;
  }
.xinxi ul li{
    padding-left: 15px;
    height: 60px;
    width: 265px;
    position: relative;
}

.xinxi ul li img{
    width: 40px;
    height: 40px;
    position: absolute;
    border-radius: 50%;
    top: 10px;
}
.xinxi ul li:hover{
  background: rgba(130, 128, 128, 0.18);
}
.p1{
    color: #000;
    position: absolute;
    left: 70px;
    font-size: 15px;
    font-family: '微软雅黑';
    top: 10px;
}
.xinxi ul li:nth-child(3) .p1{
  color: #ff0000;
}
.xinxi ul li:last-child .p1{
    color: #ff0000;
}
.p2{
    color: #7e7d7d;
    position: absolute;
    left: 70px;
    top:30px;
    font-size: 12px;
    }
    .xinxi ul li span{
    position: absolute;
    right: 10px;
top: 10px;
  font-size: 12px;
color: #7f7f7f;
}

.group{
 margin-top:10px; 
  margin-left:20px;
  margin-right:20px;
}
.group span{
    margin-right:10px;
        font-size:14px; 
      color: #000;
}
.main{
    overflow: hidden;
}
  .concat li{
      width: 100%;
  }
.main li img{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: block;
    float: left;
}
.main li p{
    font-size: 16px;
    float: left;
    margin-left: 10px;
    line-height: 40px;
}
.main li p:last-child{
    font-size: 12px;
    color: #7f7f7f;
    float: right;
}

用vue中的axios 做的小案例 模仿QQ

推荐阅读更多精彩内容

用vue中的axios 做的小案例模仿QQ