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. mysql 将一张表的数据更新到另外一张表中

    update 更新表 set 字段 = (select 参考数据 from 参考表 where  参考表.id = 更新表.id); update table_2 m  set m.column = ...

  2. jenkins配置小结

    启动jenkins:javaw -jar -Dhudson.model.DirectoryBrowserSupport.CSP= jenkins.war --httpPort=8001 wget  h ...

  3. break #立即终止本次循环

    #!/user/bin/python# -*- coding:utf-8 -*-# print(111)# while True:# print(222)# print(333)# break #立即 ...

  4. Linux Cluster 基础之LVS调度算法与集群类型

    Linux Cluster 基础之LVS调度算法与集群类型 作者:尹正杰  版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.LB Cluster 1>.什么是LB LB 集群是 load ...

  5. android studio导出apk

    在android studio导出的apk分为4种,一种是未签名调试版apk,一种是未签名发行版apk,一种是已签名调试版apk,还有一种是已签名发行版apk.以下将介绍这4种apk如何导出. 一.调 ...

  6. 关于Mui严格模式下的报错解决方案

    前言:作为一名程序员遇到Bug总是在所难免的,但是记住"不二过",今天在Vue开发中遇到了一个报错让我纠结了许久,找了许久, 报错的原因是使用了mui导入其js文件导致的. 报错信 ...

  7. 【leetcode-75】 颜色分类

    (1过,解法不好,看參考荷兰国旗问题解法) 给定一个包含红色.白色和蓝色,一共 n 个元素的数组,原地对它们进行排序,使得相同颜色的元素相邻,并按照红色.白色.蓝色顺序排列. 此题中,我们使用整数 0 ...

  8. 建立爬虫代理IP池

    单线程构建爬虫代理IP池 #!/usr/bin/python3.5 # -*- coding:utf-8 -*- import time import tempfile from lxml impor ...

  9. Android圆角矩形

    1.在drawable中创建shape_round文件 <?xml version="1.0" encoding="utf-8"?> <sha ...

  10. Android的Device File Explorer刷新文件

    不知道为什么,右键点sync不起作用,必须点一下列表中的设备,才可以.