vue音乐笔记_Vue音乐项目笔记（二）

1. Vuex https://blog.csdn.net/weixin_40814356/article/details/80347366

编写：

然后，在main.js中引入

在组件中改变state的状态

调用如下：

这样就成功拿到数据了。

2.如何为betterScroll向上滚动的时候添加一个layer https://blog.csdn.net/weixin_40814356/article/details/80361460

3. 如何创建一个js中的prefix https://blog.csdn.net/weixin_40814356/article/details/80362685

4. 播放页面的布局 https://blog.csdn.net/weixin_40814356/article/details/80372040

5.列表页到播放页的动画，通过vue的钩子添加动画 https://blog.csdn.net/weixin_40814356/article/details/80373592

6.音乐播放的实现

音乐的播放是基于h5的audio来实现的。然后：在currentSong变化的时候，去调用play()方法：

watch: {

currentSong () {this.$nextTick(() =>{this.$refs.audio.play()

})

因为当音乐还没有获取的时候，不能调用play，所以要用$nextick 将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新

那么如何控制play的状态呢？

在state中定义了一个状态playing

点击click的时候，去改变这个playing。怎么改变呢，通过actions

然后，通过mutation去改变他的状态：

这里通过getter拿到playing

然后在点击事件的时候去改变它的状态：

但是问题是，这里点击的时候，只能改变playing的状态，却不能改变audio的播放或者暂停。处理如下：

watch playing的变化。如果是true，就play()。否则pause()。

vue音乐笔记_Vue音乐项目笔记（二）相关推荐

vue音乐笔记_Vue音乐项目笔记（三）
1. 音乐播放前进后退的实现 https://blog.csdn.net/weixin_40814356/article/details/80379606 2. 音乐进度条实现(单独一个组件) h ...
vue router 参数_Vue.js项目开发技术解析
Vue.js项目开发技术解析一.Vue.js实例在一个Vue.js工程中,用于显示内容最基层的实例称之为根实例.通过该实例可以进行页面或组件的更新和显示.对于项目本身而言,无论是什么样的页面,都要 ...
cdn加载vue很慢_Vue.js 项目打包优化实践
首先上结果: 把常用的 Vue,router,vuex,axios 的 runtime 包拆分了出来,改为 cdn: 另外就是对于自己编写的业务代码进行分包,根据路由进行懒加载,可以较好的提高首屏加载 ...
结业考试笔记 2014中超联赛项目笔记 0327
新建数据库建库新建表在表中填入需要的列创建第二张表多表关联主表与从表外键关联设置好主队与客队的外键关系后记得保存插入数据先往主表中插入数据主表添加数据,随意填写从表中插入数据 ...
Vue2 - 网易云音乐项目笔记（基于Vant UI组件库）
目录一.项目技术二.准备工作 1.初始化Vue项目 2.配置Vant UI组件库 3.下载并使用vue-router库 4.接口API 5.postcss插件三.分析页面实现功能 1.路由页面准 ...
Vue.js 学习笔记十二：Vue CLI 之创建一个项目
目录创建一个项目创建一个项目运行以下命令来创建一个新项目: vue create vuecli-demo 你会被提示选取一个 preset.你可以选默认的包含了基本的 Babel + ESLin ...
Vue实现仿音乐播放器3-将项目托管到git以及github
Github新建项目 1.登录github,点击右上角新建仓库 2.输入仓库名以及描述等,点击Create resposity 3.新建仓库完成后,右边有个clone or download,复制SS ...
vue 判断同一数组内的值是否一直_前端代码+后端API，值得一学的Vue高仿音乐播放器实战项目
项目名称:vue-fds_music 项目作者:符道胜开源许可协议:Apache-2.0 项目地址:https://gitee.com/fudaosheng/vue-fds_music 项目简介 V ...
后端实体类接收数组_前端代码+后端API，值得一学的Vue高仿音乐播放器实战项目...
项目名称:vue-fds_music 项目作者:符道胜开源许可协议:Apache-2.0 项目地址:https://gitee.com/fudaosheng/vue-fds_music 项目简介 V ...

vue音乐笔记_Vue音乐项目笔记（二）

vue音乐笔记_Vue音乐项目笔记（二）相关推荐

最新文章

热门文章