音乐app各部分笔记(二)
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 出来的方法 断点监听不到
在上面的方法中
后来 在改变状态的时候 源代码 是将 sequenceList 取到 然后打乱 通过 shuffle 然后通过
经过测试 用this.$refs.audio.currentTime = 0; 只是将时长弄到零 还需
音乐app各部分笔记(二)的更多相关文章
- vue移动音乐app开发学习(二):页面骨架的开发
本系列文章是为了记录学习中的知识点,便于后期自己观看.如果有需要的同学请登录慕课网,找到Vue 2.0 高级实战-开发移动端音乐WebApp进行观看,传送门. 完成后的页面状态以及项目结构如下: 一: ...
- 音乐app各部分笔记(一)
7-11 播放器播放时间获取和更新 1.audio 有一个 ontimeupdate事件 播放过程中 随时触发 vue里面就是 @timeupdate 事件中有默认参数 e 通过e.targe ...
- 【音乐App】—— Vue-music 项目学习笔记:项目准备
前言: 学习慕课网Vue高级实战课程后,在实践中总结一些这个项目带给自己的收获,希望可以再次巩固关于Vue开发的知识.这一篇主要梳理:项目概况.项目准备.页面骨架搭建.项目github地址:https ...
- webpy使用笔记(二) session/sessionid的使用
webpy使用笔记(二) session的使用 webpy使用系列之session的使用,虽然工作中使用的是django,但是自己并不喜欢那种大而全的东西~什么都给你准备好了,自己好像一个机器人一样赶 ...
- Django开发笔记二
Django开发笔记一 Django开发笔记二 Django开发笔记三 Django开发笔记四 Django开发笔记五 Django开发笔记六 1.xadmin添加主题.修改标题页脚和收起左侧菜单 # ...
- 《CMake实践》笔记二:INSTALL/CMAKE_INSTALL_PREFIX
<CMake实践>笔记一:PROJECT/MESSAGE/ADD_EXECUTABLE <CMake实践>笔记二:INSTALL/CMAKE_INSTALL_PREFIX &l ...
- jQuery源码笔记(二):定义了一些变量和函数 jQuery = function(){}
笔记(二)也分为三部分: 一. 介绍: 注释说明:v2.0.3版本.Sizzle选择器.MIT软件许可注释中的#的信息索引.查询地址(英文版)匿名函数自执行:window参数及undefined参数意 ...
- 高性能Cordova App开发学习笔记
高性能Cordova App开发学习笔记 文件结构 添加插件 构建准备 各个www的作用,prepare命令会将hello\www的内容会拷贝到platform下的wwww目录,知道该改哪里了吧?如果 ...
- Mastering Web Application Development with AngularJS 读书笔记(二)
第一章笔记 (二) 一.scopes的层级和事件系统(the eventing system) 在层级中管理的scopes可以被用做事件总线.AngularJS 允许我们去传播已经命名的事件用一种有效 ...
随机推荐
- mysql 将一张表的数据更新到另外一张表中
update 更新表 set 字段 = (select 参考数据 from 参考表 where 参考表.id = 更新表.id); update table_2 m set m.column = ...
- jenkins配置小结
启动jenkins:javaw -jar -Dhudson.model.DirectoryBrowserSupport.CSP= jenkins.war --httpPort=8001 wget h ...
- break #立即终止本次循环
#!/user/bin/python# -*- coding:utf-8 -*-# print(111)# while True:# print(222)# print(333)# break #立即 ...
- Linux Cluster 基础之LVS调度算法与集群类型
Linux Cluster 基础之LVS调度算法与集群类型 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.LB Cluster 1>.什么是LB LB 集群是 load ...
- android studio导出apk
在android studio导出的apk分为4种,一种是未签名调试版apk,一种是未签名发行版apk,一种是已签名调试版apk,还有一种是已签名发行版apk.以下将介绍这4种apk如何导出. 一.调 ...
- 关于Mui严格模式下的报错解决方案
前言:作为一名程序员遇到Bug总是在所难免的,但是记住"不二过",今天在Vue开发中遇到了一个报错让我纠结了许久,找了许久, 报错的原因是使用了mui导入其js文件导致的. 报错信 ...
- 【leetcode-75】 颜色分类
(1过,解法不好,看參考荷兰国旗问题解法) 给定一个包含红色.白色和蓝色,一共 n 个元素的数组,原地对它们进行排序,使得相同颜色的元素相邻,并按照红色.白色.蓝色顺序排列. 此题中,我们使用整数 0 ...
- 建立爬虫代理IP池
单线程构建爬虫代理IP池 #!/usr/bin/python3.5 # -*- coding:utf-8 -*- import time import tempfile from lxml impor ...
- Android圆角矩形
1.在drawable中创建shape_round文件 <?xml version="1.0" encoding="utf-8"?> <sha ...
- Android的Device File Explorer刷新文件
不知道为什么,右键点sync不起作用,必须点一下列表中的设备,才可以.