【温馨提示】:若想了解更多关于本次项目实战内容,可转至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_