实现下图标注区域：

流程：

1.新建子组件topNav.vue

topNav.vue：

如果不理解代码中svg引入图标部分的代码，可以参考（iconfont 阿里巴巴矢量图标库在线引入图标_Zhichao_97的博客-CSDN博客）

<template><div class="topNav"><div class="topLeft"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-danlieliebiao"></use></svg></div><div class="topCenter"><span class="navBtn">我的</span><span class="navBtn active">发现</span><span class="navBtn">云村</span><span class="navBtn">视频</span></div><div class="topRight"><svg class="icon sousuo" aria-hidden="true"><use xlink:href="#icon-sousuo"></use></svg></div></div>
</template><script>export default {name: "topNav"}
</script><style scoped>.topNav{width: 7.5rem;height: 1rem;display: flex;  /*水平布局*/justify-content: space-between;  /*平均分布*/align-items: center;  /*侧轴居中*/padding: 0 0.2rem;  /*内边距：上下为0，左右为0.2rem*/}.icon{width: 0.5rem;height: 0.5rem;}.sousuo{width: 0.7rem;height: 0.7rem;}.topCenter{width: 4.5rem;display: flex;justify-content: space-around;  /*平均分布*/}.active{font-weight: 900;}
</style>

2.在父组件HomeView.vue中引入topNav.vue

topNav.vue：

<template><div class="home"><top-nav></top-nav></div>
</template><script>import topNav from "../components/topNav.vue";export default {name: 'HomeView',components: {topNav,},}
</script><style lang="less" scoped></style>

音乐app项目下一节：

使用网易云api、Vue 和swiper实现轮播图_Zhichao_97的博客-CSDN博客

头部导航（音乐app项目-第1步）相关推荐

歌单详情内容-图标列表（音乐app项目-第7步）
在上一节歌单详情内容-顶部 (音乐app项目-第6步)_Zhichao_97的博客-CSDN博客的基础上,继续实现详情页的图标列表,效果如下图标注区域所示: 流程: 1.在iconfont官网添加所需 ...
歌单详情内容-播放列表（音乐app项目-第8步）
在上一节歌单详情内容-图标列表 (音乐app项目第7步)的基础上,继续实现歌单详情内容-播放列表,效果如下图标注区域所示: 流程: 1.新建组件playList.vue playList.vue: & ...
全局播放控件（音乐app项目-第10步）
在上一节播放控件 (音乐app项目-第9步)的基础上,希望播放控件能够在所有页面显示,效果如下: 流程: 1.修改index.html 加上如下代码,防止postion:fixed失效: <me ...
实现音乐播放（音乐app项目-第11步）
在上一节(全局播放控件 (音乐app项目-第10步))基础上,继续实现音乐播放的效果如下: 音乐播放器流程: 1.修改全局变量(index.js): import { createStore } f ...
基于Android实现高德地图校内导航出行app项目演示【项目源码+简要论文说明】分享
基于Android实现高德地图校内导航出行app项目演示如今手机的发展非常迅速,手机越来越成为人们不可缺少的东西.手机从最初功能简单的功能机,发展到如今几乎无所不能的智能机,满足了人们的日常需求,手 ...
vue仿写音乐App项目移动端（部分）
在这一个月期间跟着逆战班级做的一个基于vue的音乐App项目项目目录结构如下: public文件夹用于存放公用文件.src用于存放项目源代码 1.App组件代码 <template>&l ...
vue音乐app项目
转载https://blog.csdn.net/qq_34235864/article/details/86151807 VUE移动端音乐APP 1.项目准备 [音乐App]-- Vue-music ...
uniapp 网易云音乐app项目总结
常用组件的使用 https://blog.csdn.net/qq_43604714/article/details/117962805 对uni.request进行封装 https://blog.cs ...
计算机设计基于Android实现高德地图校内导航出行app【项目源码+简要论文说明】
基于Android实现高德地图校内导航出行app项目演示如今手机的发展非常迅速,手机越来越成为人们不可缺少的东西.手机从最初功能简单的功能机,发展到如今几乎无所不能的智能机,满足了人们的日常需求,手 ...

头部导航（音乐app项目-第1步）

实现下图标注区域：

流程：

音乐app项目下一节：

使用网易云api、Vue 和swiper实现轮播图_Zhichao_97的博客-CSDN博客

头部导航（音乐app项目-第1步）相关推荐

最新文章

热门文章

头部导航（音乐app项目-第1步）

实现下图标注区域：

流程：

音乐app项目 下一节：

使用网易云api、Vue 和swiper实现轮播图_Zhichao_97的博客-CSDN博客

头部导航（音乐app项目-第1步）相关推荐

最新文章

热门文章

音乐app项目下一节：