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

最新推荐文章于 2024-09-01 08:49:03 发布

enjsky.G

最新推荐文章于 2024-09-01 08:49:03 发布

阅读量489

点赞数 1

分类专栏： # vue项目实践文章标签： html5 css3 vue.js web app

本文链接：https://blog.youkuaiyun.com/My_IT_Study/article/details/117462490

版权

本节介绍Vue.js项目中的朋友页面功能，包括功能分析、页面布局实现。页面包含朋友列表、通讯录查看、加好友方式等。通过布局和样式设计，实现了朋友页面的展示效果。项目源代码托管在GitHub，欢迎参与学习讨论。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

第十四节：朋友页面功能

功能分析

朋友页面功能是导航中的一个子页面功能，在这一页面中包含了朋友列表信息、通讯录的查看、扫一扫加好友、面对面加好友等功能。

页面布局实现

1.布局如下：

<template>
  <div class="publish">
    <div class="pub-top">
      <div class="back" @click="$router.back()">
        <span class="iconfont icon-guanbi"></span>
      </div>
      <div>
        <span class="iconfont icon-yinfu" style="font-size: 16px;margin-right: 10px;">选择音乐</span>
      </div>
    </div>
    <div class="upload-box">
      <vid