vue.js项目实战运用篇之抖音视频APP-第十四节： 消息页面功能
Posted enjsky.G
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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 class="iconfont icon-youce"></i>
</div>
</div>
</li>
<li class="msg_item">
<!-- 消息图标 -->
<div class="msg_item_icon hudong">
<i class="iconfont icon-biaoqiankuozhan_hudong-189"></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 class="iconfont icon-youce"></i>
</div>
</div>
</li>
<li class="msg_item">
<!-- 消息图标 -->
<div class="msg_item_icon tongzhi">
<i class="iconfont icon-tongzhi"></i>
</div>
<!-- 消息内容 -->
<div class="msg_item_content">
<!-- 消息左侧文本内容 -->
<div class="content_left">
<span class="content_left_title">系统通知</span>
<span class="content_left_head">抖音直播 2021-05-21</span>
</div>
<!-- 右侧图标 -->
<div class="content_right">
<!-- <i class="iconfont icon-youce"></i> -->
</div>
</div>
</li>
<li class="msg_item">
<!-- 消息图标 -->
<div class="msg_item_icon xiaoxi">
<i class="iconfont icon-xiaoxi"></i>
</div>
<!-- 消息内容 -->
<div class="msg_item_content">
<!-- 消息左侧文本内容 -->
<div class="content_left">
<span class="content_left_title">商家服务通知</span>
<span class="content_left_head">成功添加心愿单.2021-05-21</span>
</div>
<!-- 右侧图标 -->
<div class="content_right">
<!-- <i class="iconfont icon-youce"></i> -->
</div>
</div>
</li>
<li class="msg_item">
<!-- 消息图标 -->
<div class="msg_item_icon tongxunlu">
<i class="iconfont icon-tongxunlu"></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 class="iconfont icon-youce"></i>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</template>
【温馨提示】这里使用了Header组件布局头部标题。
2.样式，如下：
<style lang="less" scoped>
.message {
height: 100%;
.msg-wrap {
height: 568px;
padding: 0 20px;
color: #ffffff;
// background-color: #101821;
.msg_search
{
height: 45px;
display: flex;
justify-content: flex-start;
align-items: center;
background: #3A3A44;
margin: 10px 0;
border-radius: 5px;
.search_i
{
padding: 0 10px;
.iconfont{
font-size: 18px;
color: #95959F;
}
}
.search_input
{
span{
font-size: 15px;
color: #95959F;
}
}
}
// 消息列表
.msg_type_list{
border-top: 1px solid #1E202C;
.msg_item{
display: flex;
justify-content: flex-start;
align-items: center;
margin: 10px 0;
.msg_item_icon{
width: 60px;
height: 60px;
border-radius: 50%;
margin: 0 5px;
.iconfont{
font-size: 35px;
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
color: #DDE8FF;
}
}
// 粉丝
.fensi{
background: #5DA1F7;
}
// 互动
.hudong{
background: #F967A7;
}
// 通知
.tongzhi{
background: #FC2C5C;
}
// 消息
.xiaoxi{
background: #5C90F7;
}
// 通讯录
.tongxunlu{
background: #232531;
}
.msg_item_content{
height: 80px;
width: 275px;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #1E202C;
.content_left{
display: flex;
flex-direction: column;
margin: 10px;
.content_left_title{
font-size: 18px;
padding: 5px 0;
}
.content_left_head{
font-size: 15px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
word-break: break-all;
width: 140px;
color: #898B97;
}
}
.content_right{
.iconfont{
font-size: 15px;
color: #E4E5E5;
}
}
}
}
}
}
}
</style>
【温馨提示】这里使用了css3flex盒子模型进行布局。
3.完成效果：
结束语
本章节主要介绍了消息页面功能等相关内容，若有疑问或不足之处，欢迎留言讨论。
项目仓库
项目采用Git进行管理，最终项目将会发布到GitHub中，感兴趣的小伙伴们可以一起学习讨论，共同完善本项目。
项目地址：GitHub
上一篇：Header组件功能
以上是关于vue.js项目实战运用篇之抖音视频APP-第十四节： 消息页面功能的主要内容，如果未能解决你的问题，请参考以下文章
vue.js项目实战运用篇之抖音视频APP-第十五节： 朋友页面功能
vue.js项目实战运用篇之抖音视频APP-第十五节： 朋友页面功能
vue.js项目实战运用篇之抖音视频APP-第十五节： 朋友页面功能
vue.js项目实战运用篇之抖音视频APP-第十节： 评论列表功能