音乐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 允许我们去传播已经命名的事件用一种有效 ...
随机推荐
- 在Linux中复制文件夹下的全部文件到另外文件夹
https://jingyan.baidu.com/article/656db918f83c0de380249c5a.html 在Linux系统中复制或拷贝文件我们可以用cp或者copy命令,但要对一 ...
- grub.conf解析
一.grub简介系统启动引导管理器,是在计算机启动后运行的第一个程序,他是用来负责加载.传输控制到操作系统的内核,一旦把内核挂载,系统引导管理器的任务就算完成退出,系统引导的其它部份,比如系统的初始化 ...
- (注意输入格式)bistuoj(旧)1237 成绩统计
成绩统计 Time Limit(Common/Java):1000MS/3000MS Memory Limit:65536KByteTotal Submit:88 ...
- python3: 爬虫---- urllib, beautifulsoup
最近晚上学习爬虫,首先从基本的开始: python3 将urllib,urllib2集成到urllib中了, urllib可以对指定的网页进行请求下载, beautifulsoup 可以从杂乱的ht ...
- JDK1.5以后的版本特性
一.JDK1.5新特性 1.泛型:泛型的本质是参数化类型,也就是说所操作的数据类型被指定为一个参数.这种参数类型可以用在类.接口和方法的创建中,分别称为泛型类.泛型接口.泛型方法.可以在编译的时候就能 ...
- [NIO-1]缓冲区
常用的是ByteBuffer.CharBuffer
- sqlalchemy数据库分层操作
在学习sqlalchemy操作中,最常见的就是如下的示例,一个文件基本上包含了数据库的增删改查.sqlalchemy的具体操作我就不再详细说明了.流程大概是: 定义表 创建数据库引擎 创建表 插入数据 ...
- spring整合ActiveMq
spring整合ActiveMq: 1:依赖的jar包: 2:spring-activemq.xml 的配置: 代码: <?xml version="1.0" enco ...
- 使用idea创建springboot项目并打成war包发布到tomcat8上
1.将pom.xml中的打包方式修改为war <groupId>com.borya</groupId> <artifactId>Project</artifa ...
- Docker-02 无人值守安装 docker
#!/bin/bash # # 无人值守安装 docker # # # .关闭SELinux # setenforce sed -i 's/SELINUX=enforcinf/SELINUX=disa ...