image.png

• 点击v-for出来的元素，跳转页面
• 给元素定义一个click点击事件，跳转页面用到动态路由

• tamplate

@click="toDetailPage(item)"

• methods

toDetailPage(item) {
    this.$router.push("/chatDetail/1")
}

• 新建页面

• 在src/views新建文件夹chatDetail，在chatDetail文件夹下新建index.vue文件

• 配置路由

• 打开src/router/router.config.js，在children数组内配置路由，记得使用动态路由

{
   path: '/chatDetail/:id',
   name: 'ChatDetail',
   component: () => import('@/views/chatDetail/index'),
   meta: { title: '聊天详情', keepAlive: false,showFoot: false }
}

• 配置白名单 ps:暂时跳到一个固定的页面

• 打开src/permission.js，把要跳转的路由填写到白名单内

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

• 现在点击好友列表就可以跳转过去了

image.png

• 下面开始开发聊天详情页面

image.png

• 页面分析：
• 分【上、中、下】 三个板块，第一板块是navbar、第二板块是中心区域，可以上下滚动，第三板块是底部发语音，发信息，发表情的区域，先布局

image.png

• 下面开发静态的聊天记录页面布局

image.png

• 开发一左一右两种样式，然后根据类型type来区分是自己发的消息 还是 对方发来的消息
• 最好还是把中间的聊天记录区域，抽离成组件
• 在src/components文件夹下新建一个组件ChatList.vue

• 在chatDetail页面引入该组件

//引入
import ChatList from '@/components/ChatList.vue'
//注册
components: { ChatList },
//使用

• 下面在ChatList组件内开发

template

image.png

• 下面把聊天记录换成模拟的假数据
• data

data() {
    return {
     list:[
        {
          avatar:"http://erkong.ybc365.com/pic/16671015266174.jpeg",
          timer:"10:23:34",
          message:"我要去和学弟吃饭了～",
          type:1
        },
        {
          avatar:"http://erkong.ybc365.com/pic/16283350133805.gif",
          timer:"10:33:34",
          message:"想去就去吧，不要喝酒就是了",
          type:2
        },
      ]
    }
  },

• template

• 聊天记录部分的静态页面开发完成！！！
• 下面开发底部的发消息区域
• 打开chatDetail/index.vue，在
  我是发言区域

  里面开发

• template

 

      

        
      
      

        
          
        
      
      

        

          
        
        

          发送
        
      
    

• style

.bottom {
    height: 92px;
    // background: red;
    position: fixed;
    bottom: 0;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 0 20px;
    box-sizing: border-box;
    .left {
      display: flex;
    }
    .input {
      flex: 1;
      padding: 0 20px;
      ::v-deep .van-search {
        padding: 0;
      }
    }
    .right{
      display: flex;
      align-items: center;
      .biaoqing{
        display: flex;
      }
      .send{
        font-size: 28px;
        padding:  12px 0 12px 24px;
      }
    }
  }

• 最终效果

image.png

转载请注明：OBA博客 » 基于vue2.x实现的即时通讯程序仿微信聊天4开发聊天详情静态页面