7-15播放器progress-circle圆形进度条组件实现

1.首先是引入三步  progress-circle 引入到player.vue中

然后就是 SVG技术

值得注意的事   svg 中 circle里面的  stroke-dasharray属性与 stroke-dashoffset 能控制 可用来控制圆形进度条

7-16播放器模式切换功能实现(上)

改变 播放样式状态  的同时 也要更改 vuex中的 的播放状态

首先 是 计算属性 中 取

然后 是方法中 提交

通知 vuex  改变 vuex 中的状态

 一开始的播放状态 是从 vuex中  state.js中取到的

后面更改状态 mode也要做相应的改变

关于 变化按钮状态中  三目运算的连续判断 用法

7-17播放器模式切换功能实现(中)

  在chrome中 vue的import 出来的方法 断点监听不到

  在上面的方法中

  

  playMode只能通过打印才能看到  谷歌浏览器监听不到 我擦
  然后  vuex 仓库中  sequenceList 跟    playlist  是在 点击详细页的时候 action一次性提交的  也就是说 他们那时候的列表是一样的

  后来 在改变状态的时候 源代码 是将  sequenceList 取到 然后打乱 通过 shuffle  然后通过

  SET_PLAYLIST 也将 playlist  打乱了 也就是 
  sequenceList  这时候 跟 playlist  保持一致了
  这是经典随机打乱数组的方法
   (复制我会放在base.js中)
   隔天补一下 有个地方没搞懂的代码    我发现在vuex 状态管理器中   getter.js  单单改变其中一个 state.playlist 是不会触发 currentSong   
  我擦  原来是这样的 ....   经典打乱数组的方法 是不会被监听到数组的变动  因为里面的对象跟属性都没变 只是顺序变了  所以 只能 用索引值 才能进行 当前歌曲的触发
  

  

  

7-18播放器模式切换功能实现(下)
 
  监听能否播放  以及歌曲播放结束后触发事件  
  

  经过测试  用this.$refs.audio.currentTime = 0; 只是将时长弄到零  还需

  this.$refs.audio.play();进行再次播放

  

  

音乐app各部分笔记(二)的更多相关文章

  1. vue移动音乐app开发学习(二):页面骨架的开发

    本系列文章是为了记录学习中的知识点,便于后期自己观看.如果有需要的同学请登录慕课网,找到Vue 2.0 高级实战-开发移动端音乐WebApp进行观看,传送门. 完成后的页面状态以及项目结构如下: 一: ...

  2. 音乐app各部分笔记(一)

    7-11 播放器播放时间获取和更新 1.audio 有一个 ontimeupdate事件 播放过程中 随时触发 vue里面就是  @timeupdate   事件中有默认参数 e  通过e.targe ...

  3. 【音乐App】—— Vue-music 项目学习笔记:项目准备

    前言: 学习慕课网Vue高级实战课程后,在实践中总结一些这个项目带给自己的收获,希望可以再次巩固关于Vue开发的知识.这一篇主要梳理:项目概况.项目准备.页面骨架搭建.项目github地址:https ...

  4. webpy使用笔记(二) session/sessionid的使用

    webpy使用笔记(二) session的使用 webpy使用系列之session的使用,虽然工作中使用的是django,但是自己并不喜欢那种大而全的东西~什么都给你准备好了,自己好像一个机器人一样赶 ...

  5. Django开发笔记二

    Django开发笔记一 Django开发笔记二 Django开发笔记三 Django开发笔记四 Django开发笔记五 Django开发笔记六 1.xadmin添加主题.修改标题页脚和收起左侧菜单 # ...

  6. 《CMake实践》笔记二:INSTALL/CMAKE_INSTALL_PREFIX

    <CMake实践>笔记一:PROJECT/MESSAGE/ADD_EXECUTABLE <CMake实践>笔记二:INSTALL/CMAKE_INSTALL_PREFIX &l ...

  7. jQuery源码笔记(二):定义了一些变量和函数 jQuery = function(){}

    笔记(二)也分为三部分: 一. 介绍: 注释说明:v2.0.3版本.Sizzle选择器.MIT软件许可注释中的#的信息索引.查询地址(英文版)匿名函数自执行:window参数及undefined参数意 ...

  8. 高性能Cordova App开发学习笔记

    高性能Cordova App开发学习笔记 文件结构 添加插件 构建准备 各个www的作用,prepare命令会将hello\www的内容会拷贝到platform下的wwww目录,知道该改哪里了吧?如果 ...

  9. Mastering Web Application Development with AngularJS 读书笔记(二)

    第一章笔记 (二) 一.scopes的层级和事件系统(the eventing system) 在层级中管理的scopes可以被用做事件总线.AngularJS 允许我们去传播已经命名的事件用一种有效 ...

随机推荐

  1. 在Linux中复制文件夹下的全部文件到另外文件夹

    https://jingyan.baidu.com/article/656db918f83c0de380249c5a.html 在Linux系统中复制或拷贝文件我们可以用cp或者copy命令,但要对一 ...

  2. grub.conf解析

    一.grub简介系统启动引导管理器,是在计算机启动后运行的第一个程序,他是用来负责加载.传输控制到操作系统的内核,一旦把内核挂载,系统引导管理器的任务就算完成退出,系统引导的其它部份,比如系统的初始化 ...

  3. (注意输入格式)bistuoj(旧)1237 成绩统计

    成绩统计 Time Limit(Common/Java):1000MS/3000MS          Memory Limit:65536KByteTotal Submit:88          ...

  4. python3: 爬虫---- urllib, beautifulsoup

    最近晚上学习爬虫,首先从基本的开始: python3 将urllib,urllib2集成到urllib中了, urllib可以对指定的网页进行请求下载,  beautifulsoup 可以从杂乱的ht ...

  5. JDK1.5以后的版本特性

    一.JDK1.5新特性 1.泛型:泛型的本质是参数化类型,也就是说所操作的数据类型被指定为一个参数.这种参数类型可以用在类.接口和方法的创建中,分别称为泛型类.泛型接口.泛型方法.可以在编译的时候就能 ...

  6. [NIO-1]缓冲区

    常用的是ByteBuffer.CharBuffer

  7. sqlalchemy数据库分层操作

    在学习sqlalchemy操作中,最常见的就是如下的示例,一个文件基本上包含了数据库的增删改查.sqlalchemy的具体操作我就不再详细说明了.流程大概是: 定义表 创建数据库引擎 创建表 插入数据 ...

  8. spring整合ActiveMq

    spring整合ActiveMq: 1:依赖的jar包: 2:spring-activemq.xml    的配置: 代码: <?xml version="1.0" enco ...

  9. 使用idea创建springboot项目并打成war包发布到tomcat8上

    1.将pom.xml中的打包方式修改为war <groupId>com.borya</groupId> <artifactId>Project</artifa ...

  10. Docker-02 无人值守安装 docker

    #!/bin/bash # # 无人值守安装 docker # # # .关闭SELinux # setenforce sed -i 's/SELINUX=enforcinf/SELINUX=disa ...