11-vue移动端项目(小智机器人聊天使用websocket协议使用socket.io客户端第三方包, 让div滚动条自动滚到最底部)

小智同学

01 - 创建组件

• 创建组件 & 创建路由
  
• 设置入口
  

02 - 完成静态页面

头部标题

聊天区域

• 设置内容高度时会出现一个问题：
  • 由于不同的手机型号的高度是不一样的，但是聊天区域的高度必须是整个页面除去头部 & 底部的高度。
• 解决方案：
  • 不给这个盒子设置一个固定高度
  • 给这个盒子设置一个定位（fixed固定定位）
    • 给盒子同时设置 top & bottom 属性
    • 将来盒子的高度就是 top 与 bottom 之间距离

信息发送

03 - 渲染聊天

步骤：

• 1.0 先在页面上创建一个数组 chatArr：用来保存聊天记录

<template>
  <div class="zhi">
      <!-- 头部导航栏 -->
     <van-nav-bar @click-left="$router.back()" left-arrow :fixed="true" class="mytitle" title="小智同学" />