基于vue2.x实现的即时通讯程序仿微信聊天3配置tabbar以及开发通讯录页面

• 打开permission.js，将首页的页面path填写到白名单whiteList里

const whiteList = ['/login','/home'] // no redirect whitelist

• 然后访问首页路径

http://localhost:9020/#/home

• 下面配置tabbar，打开src/views/layouts/index.vue，修改tabbars数组

 tabbars: [
        {
          title: '通讯录',
          to: {
            name: 'Home'
          },
          icon: 'chat-o'
        },
        {
          title: '群聊',
          to: {
            name: 'GroupChat'
          },
          icon: 'friends-o'
        },
        {
          title: '我的',
          to: {
            name: 'About'
          },
          icon: 'user-o'
        }
      ]

• tabbar配置好了，下面删除src/views/home/index.vue中的代码

• 先来开发顶部的navbar和搜索框和滚动通告，需要用到vant组件库的NavBar 导航栏和Search 搜索和NoticeBar 通知栏

image.png

• 首先先引入NavBar 导航栏和Search 搜索
• 打开src/plugins/vant.js，引入这三个组件

import { NavBar, Search, NoticeBar } from 'vant';

Vue.use(NavBar);
Vue.use(Search);
Vue.use(NoticeBar);

• 开始编码开发这三个模块

• 开发完成

image.png

• 下面开发好友列表页面

image.png

• 需要用到Image 图片，自行去引入
• html

      

        

          

            
          
          

            

              钱多多 
              
              12:00
            
            
你好啊，小朋友你好啊，小朋友你好啊，小朋友你好啊，小朋友你好啊，小朋友你好啊，小朋友你好啊，小朋友你好啊，小朋友你好啊，小朋友你好啊，小朋友你好啊，小朋友你好啊，小朋友你好啊，小朋友
          
        
      
    

• css

.cell {
  padding-top: 10px;
  background: #fff;
  ul {
    li {
      display: flex;
      font-size: 24px;
      padding: 20px 12px;
      border-bottom: 2px solid #eee;
      margin-bottom: 12px;
      .left {
        width: 92px;
        height: 92px;
        margin-right: 12px;
        ::v-deep .van-image{
          width: 100%;
          height: 100%;
        }
      }
      .right{
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .top{
          display: flex;
          justify-content: space-between;
          span{
            &:first-child{
              font-size: 28px;
            }
          }
        }
        .bottom{
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          width: calc(100vw - 150px);
          color: #999;
        }
      }
    }
  }
}

• 编码完成

image.png