vue.js项目实战运用篇之抖音视频APP-第十四节： 消息页面功能

【温馨提示】：若想了解更多关于本次项目实战内容，可转至vue.js项目实战运用篇之抖音视频APP-项目规划中进一步了解项目规划。

【项目地址】
项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习，共同完善本项目。
项目地址：GitHub

---

第十四节： 消息页面功能

功能分析

消息页面功能是底部导航中的导航功能页面，包含系统消息、互动消息等内容。

消息功能实现

1.页面布局，代码如下：

<template>
  <!-- 消息模块 -->
  <div class="message">
    <Header title="消息" has-right="true" right-txt="创建群聊 "></Header>
    <div class="msg-wrap">
      <!-- 消息搜索 -->
      <div class="msg_search">
        <!-- 图标 -->
          <div class="search_i"><i class="iconfont icon-icon_search"></i></div>
          <div class="search_input">
            <span>搜索</span>
          </div>
      </div>
      <!-- 消息类型列表 -->
      <div class="msg_type_list">
        <ul>
          <li class="msg_item">
            <!-- 消息图标 -->
            <div class="msg_item_icon fensi">
              <i class="iconfont icon-fensi-01"></i>
            </div>
            <!-- 消息内容 -->
            <div class="msg_item_content">
              <!-- 消息左侧文本内容 -->
              <div class="content_left">
                <span class="content_left_title">粉丝</span>
                <span class="content_left_head">小豆豆关注了你</span>
              </div>
              <!-- 右侧图标 -->
              <div class="content_right">
                <i