页面

一、头部导航栏布局
二、轮播图的实现
三、请求网易的banner图
四链接

一、头部导航栏布局

首先我们看最上面这里的布局，大致可分为三个模块，顶部左边，顶部中间，顶部右边

那么我们在component创建一下子组件，命名为topNav.vue

为了让这个整体好看一点，我在 App.vue 这加了一点整体的样式

  *{margin: 0;padding: 0;box-sizing: border-box;font-family: "微软雅黑";}// 渐变背景色html{background:linear-gradient(top,rgb(232,235,242),rgb(255,255,255)) no-repeat ;background:-webkit-linear-gradient(top,rgb(232,235,242),rgb(255,255,255)) no-repeat;}

先把基础的东西填进去然后在调整样式

看看效果

很明显现在的图标很大，我们先调整图片的大小

.icon{width: 0.4rem;height: 0.4rem ;
}

然后我们在利用flex布局让它从两端对齐，并设置边距，让它看起来好看一点

    .topNav{width: 7.5rem;height: 0.8rem;display: flex;justify-content: space-between;align-items: center;padding: 0 0.2rem;}

最后调整一下中间的文字，平均分布

    .topCenter{width: 4.5rem;display: flex;justify-content: space-around;}

然后我们在修它的选中状态 active 变粗

 <!-- 修改成active -->
<!-- 顶部中间 --><div class="topCenter"><span class="navBtn">我的</span><span class="navBtn active" >发现</span><span class="navBtn">云村</span><span class="navBtn">视频</span></div>

    .topCenter{width: 4.5rem;display: flex;justify-content: space-around;.active{font-weight: 900;}}

整体代码 topNav.vue

<template><div class="topNav"><!-- 顶部左边 --><div class="topLeft"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-liebiao2"></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 search_img" aria-hidden="true"><use xlink:href="#icon-sousuo"></use></svg></div></div>
</template><style lang="less" scoped>.topNav{width: 7.5rem;height: 1rem;display: flex;justify-content: space-between;align-items: center;padding: 0 0.2rem;.icon{width: 0.4rem;height: 0.4rem ;}.topCenter{width: 4.5rem;display: flex;justify-content: space-around;.active{font-weight: 900;}}}
</style>

二、轮播图的实现

实现了顶部之后，我们现在来实现轮播图，轮播图这里我就偷个懒，利用vant去实现。

vue3 npm 安装

# Vue 3 项目，安装最新版 Vant
npm i vant

文档地址：https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart

我们在main.js中引用vant

import { createApp } from 'vue'
import { Swipe, SwipeItem } from 'vant';
import 'vant/lib/index.css';createApp(App).use(Swipe).use(SwipeItem).mount('#app')

我们同样在components创建一个swipe.vue子组件，然后在HomeView.vue中注册一下

在swipe.vue，我们使用vant官方的例子，利用懒加载的方式做轮播图(这里的图片我放在了assets下，需要自己创建一个img文件夹放图片)

<template><van-swipe :autoplay="3000" lazy-render><van-swipe-item v-for="image in images" :key="image"><img :src="data:image" /></van-swipe-item></van-swipe>
</template><script>export default {setup() {const images = [require('@/assets/img/1.jpg'),require('@/assets/img/2.jpeg'),require('@/assets/img/3.jpeg'),require('@/assets/img/4.png'),];return { images };},
}
</script>

效果

现在来调整一下样式，使图片的宽度适中

<style>
.van-swipe{width: 7rem;height: 2.7rem;margin:0 auto;border-radius: 0.3rem;border: red 1px solid;/* 使下面的点变成红色 */--van-swipe-indicator-active-background-color:rgb(255, 61, 61);
}
.van-swipe-item img{width: 100%;
}

效果

这里是红边框可以去掉，只是拿来做演示用

三、请求网易的banner图

完成了轮播图的效果，我们请求一下api，这里安装一下axios

npm install axios

然后我们在src创建一个专门api文件夹

里面发送一下请求，由于接口文档已经说明了这一条，所以大家在编写axios请求时注意一下，文档所有接口都可以使用get请求，但为了真实一点，我使用了post请求

import axios from 'axios'// 请求bannerfunction postBanner(type1){return  axios.post(`http://localhost:3000/banner?type=${type1}`).then((res)=>{return res.data.banners ;})
}export {postBanner}

然后我们来到我们的swipe.vue界面，请求一下数据并渲染到页面上

这里说明一下banner接口请求出来的数据均为对象类型数据

这里有三种方法 1、ref存储数据 2、reactive([])存储数据（不太推荐） 3、reactive([])嵌套一个对象去存储（推荐）

ref存储数据

<template><van-swipe :autoplay="3000" lazy-render><van-swipe-item v-for="(image,index) in images" :key="index"><img :src="data:image.pic" /></van-swipe-item></van-swipe>
</template><script>
import {onMounted,reactive,ref} from 'vue'
import {postBanner} from '@/api/index'export default {setup() {let  images = ref([])onMounted(async()=>{getSwipeAPI()})async function getSwipeAPI(){images.value = await postBanner(1)}console.log(images);return { images };},
}
</script>

reactive([])嵌套一个对象去存储（推荐）

<template><van-swipe :autoplay="3000" lazy-render><van-swipe-item v-for="(image,index) in images2.list" :key="index"><img :src="data:image.pic" /></van-swipe-item></van-swipe>
</template><script>
import {onMounted,reactive,ref} from 'vue'
import {postBanner} from '@/api/index'export default {setup() {let images2 = reactive({list:[]})onMounted(async()=>{getSwipeAPI()})async function getSwipeAPI(){images2.list = await postBanner(1)}return {images2};},
}
</script>

reactive([])通过push存储(不推荐)

<template>
<div v-for="(image,index1) in images3" :key="index1"><van-swipe :autoplay="3000" lazy-render><van-swipe-item v-for="(i,index) in image" :key="index"><img :src="i" /></van-swipe-item></van-swipe>
</div>
</template><script>
import {onMounted,reactive,ref} from 'vue'
import {postBanner} from '@/api/index'export default {setup() {let images3 = reactive([])onMounted(async()=>{getSwipeAPI()})async function getSwipeAPI(){let x = await postBanner(1)x = x.map(v=>v.pic)images3.push(x)}console.log(images3);return {images3};},
}
</script>

效果

四链接

Vue3+node.js网易云音乐实战项目(一)： https://blog.csdn.net/NITIQ/article/details/125358363?spm=1001.2014.3001.5501
Vue3+node.js实战项目网易云音乐APP（二）: https://blog.csdn.net/NITIQ/article/details/125358401?spm=1001.2014.3001.5502
Vue3+node.js网易云音乐实战项目(三): https://blog.csdn.net/NITIQ/article/details/125358446?spm=1001.2014.3001.5502
Vue3+node.js网易云音乐实战项目(四)： https://blog.csdn.net/NITIQ/article/details/125358476?spm=1001.2014.3001.5502

未完…

Vue3+node.js网易云音乐实战项目(三)相关推荐

Vue3+node.js网易云音乐实战项目(五)
推荐歌单详细页面顶部 1.推荐歌单详细页面 1.1.导航条和背景 1.2.头像和简介 1.3.头部完整代码 1.4.链接实现效果 1.推荐歌单详细页面 1.1.导航条和背景推荐歌单页面做好后,我们 ...
Vue3+node.js网易云音乐实战项目(八)
播放界面实现 1.准备工作 2.顶部布局 3.中部唱片部分布局 4.底部部分布局最后一个页面还没写完,由于我要去比赛,所以暂时先写到这,等放假了再写其他页面可以看我页面专栏 Vue3实战项目-网易 ...
Vue3+node.js网易云音乐实战项目(七)
底部播放按钮和播放功能的实现 1.底部播放组件 2.音乐播放与暂停 3.切换歌曲其他页面可以看我页面专栏 Vue3实战项目-网易云APP . 大家觉得有些地方可以写的更好写法可以给我留言私信,我会去 ...
Vue3+node.js网易云音乐实战项目(六)
图标和播放列表实现 1.收藏.评论和分享图标 2.播放列表其他页面可以看我页面专栏 Vue3实战项目-网易云APP . 如果文章对你有帮助请点一个赞或收藏 1.收藏.评论和分享图标接下来,我们实现 ...
react 网易云音乐实战项目笔记
0.项目规范一.路由相关 npm i react-router-dom npm i react-router-config // 用于配置路由映射的关系数组 1. 路由重定向访问 /路径 => ...
开源的网易云音乐API项目都是怎么实现的？
上一篇文章这个高颜值的开源第三方网易云音乐播放器你值得拥有介绍了一个开源的第三方网易云音乐播放器,这篇文章我们来详细了解一下其中使用到的网易云音乐api项目NeteaseCloudMusicApi的实 ...
node实现网易云音乐项目前后端连接
1完善网易云音乐.读取静态资源.实现用户登录以后,登录的内容转换成欢迎XXXX登录后台文件代码 const fs=require('fs'); const http=require('http'); ...
[Vue仿网易云音乐实战]炎炎夏日——放首自己喜欢的歌
前言基于 Vue + vuex + vue-router + vue-axios +better-scroll + Stylus + px2rem 等开发的移动端音乐App,UI 界面是看着自己手机 ...
一个开源的网易云音乐api项目
昨天在Github上发现了一个开源的音乐api项目,restful风格,Json格式,提供的功能真的是史上最全,足够你开发一款属于自己的客户端了.而且作者非常贴心,除了开源了这个项目外还提供了一份详细 ...

Vue3+node.js网易云音乐实战项目(三)

页面

一、头部导航栏布局

二、轮播图的实现

三、请求网易的banner图

四链接

Vue3+node.js网易云音乐实战项目(三)相关推荐

最新文章

热门文章

Vue3+node.js网易云音乐实战项目(三)

页面

一、头部导航栏布局

二、轮播图的实现

三、请求网易的banner图

四 链接

Vue3+node.js网易云音乐实战项目(三)相关推荐

最新文章

热门文章

四链接