05 2022 档案
摘要：https://www.swiper.com.cn/ 我们自己实现轮播图大多使用js或者css的动画,进入这个网站可以直接复制源码进行实现 在vue项目的不同组件中使用swiper,有几个需要注意的点 Npm I vue-router-swiper Npm I swiper@5 两行代码在项目文件夹
阅读全文
摘要：项目发现模块 先在原有的基础上新建几个vue项目,views中一个listView,components中listViewTop.vue和playList.vue 这里的listView算是listViewTop和playList 的父级 歌单详情页面的实现效果和之前的大同小异 仍然是在router
阅读全文
摘要：获取登录用户信息 1、封装获取用户详情的api接口 2、调用获取用户详情接口，接收到用户详情，将用户详情保存到store.state.user.userDetail中 把数据存到本地存储中 3、 在个人中心页面访问用户详情的用户名 4,退出账号操作 单击退出按钮,清空是否登陆判断条件,清空本地存储登
阅读全文
摘要：搜索到歌曲,点击播放功能实现 在store/index.js中定义一个 然后在searchTop.vue中,对搜索到的歌曲的播放按钮添加click事件=一个setPlay函数 在methods中定义这个setPlay函数: 由于搜索到的歌曲数据和原歌曲数据的格式不同,所以需要转化一下格式 然后调用s
阅读全文
摘要：实现点击按钮切换上一首和下一首 在按钮页面定义一个goplay(num)函数,在两个按钮上添加click事件并调用这个goplay,上一首是goplay(-1),下一首是goplay(+1) 然后从store中获取当前播放歌曲列表playlist与播放歌曲下标playCurrentIndex 记得i
阅读全文
摘要：歌曲详情页面 歌曲详情页面 定位fixed 脱离文档流 swiper框架中的内容 定位 脱离文档流 swiper定位的z-index更高或者class优先级高于歌曲详情页面导致歌曲详情无法覆盖swiper部分,因为swiper是引入的框架,框架的优先级更高 修改swiper.css的代码即可 定义一
阅读全文
摘要：今日项目的开发主要是实现了音乐播放与暂停,切换播放歌曲的功能 首先是一些昨天的代码回顾,今天的实现效果和昨天的一些代码密切相关: 我们先说这个切换播放歌曲: 切换播放歌曲的原理和修改playlist的方法一致,只是把palylist换成了playCurrentIndex, 让传输来的value修改到
阅读全文
摘要：组件之间共享的数据,都要使用的数据放到状态管理库store中 数据存放在store文件夹下的index.js中 在state中创建一个playlist音乐播放列表,默认播放playCurrentIndex:0下标为0(第一条数据) 在mutations中定义一个函数来修改state中的playlis
阅读全文
摘要：这是今天完成的效果图,点开每个歌单都是一个这样的单独的页面,数据也是随之变换的 先在原有的基础上新建几个vue项目,views中一个listView,components中listViewTop.vue和playList.vue 这里的listView算是listViewTop和playList 的
阅读全文
摘要：Vue项目开发——网易云项目笔记(1) 本周实现效果附图 移动端页面 响应式页面 建议使用 rem 相对单位 所以本次项目中所有的字体,图片等单位均使用rem进行调整 Part1 首先使用Vue cli在命令行创建一个vue项目起名music001,具体选择如下图: 我们还需要下载一些别的控件:ax
阅读全文
