vue慕课网音乐项目手记:30-音乐环形进度条的实现

环形进度条是基于svg实现的。

<template>
  <div class="progress-circle">
    <svg :width="radius" :height="radius" viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <!-- width/height表示svg的宽高,viewBox表示根据svg的宽高拉出来的大小 -->
      <circle class="progress-background" r="50" cx="50" cy="50" fill="transparent" />
      <!-- r表示半径,cx 和 cy 属性定义圆点的 x 和 y 坐标 fill表示背景色 -->
      <circle class="progress-bar" r="50" cx="50" cy="50" fill="transparent" :stroke-dasharray="dashArray" :stroke-dashoffset="dashOffset"/>
    </svg>
    <slot></slot>
  </div>
</template>  
<style lang="stylus" scoped>
  @import ‘~common/stylus/variable‘  

  .progress-circle
    position relative
    circle
      stroke-width 8px
      // stroke-width表示环形的宽度
      transform-origin center
      // 中心旋转
      &.progress-background
        transform scale(0.9)
        stroke $color-theme-d
      &.progress-bar
        transform scale(0.9) rotate(-90deg)
        stroke $color-theme
</style> 

逻辑的实现:

原文地址:https://www.cnblogs.com/catbrother/p/9181070.html

时间: 2024-10-12 01:45:11

vue慕课网音乐项目手记:30-音乐环形进度条的实现的相关文章

VUE项目实现音乐播放器(四)------- 设计播放进度条 + 播放控制按钮

2020.3.31 9:18 好的,早上好各位,今天我们来进行一个很炫酷的页面开发——播放器控制页面( src\components\Play.vue ),如下图: 我们可以看到,该页面有很多元素组成,歌曲的封面.左上角的页面隐藏按钮,中间的播放进度条.歌词栏.下方的播放控制按钮.右下角的显示播放列表按钮,这些元素完美的结合在一起,整个页面有没有一种很高大上的感觉!好了,让我们来亲自动手实现它吧! 1. 歌曲封面&隐藏按钮 首先通过 getters 获取到歌曲的封面: computed: { i

实现本地音乐选择,播放,带可拖动进度条

需求:项目需要实现扫描本地sdcard上的所有音乐.并且可以进行播放,带可拖动进度条. 实现步骤:1.每个音乐文件在数据中有一条记录,开启一个线程查找数据库找出所有音乐文件,根据后缀名进行过滤,用handle通知ListView展示 2.ListView每一行设置单击事件,选中的那首歌曲进行播放. 3.ListView每一行都有seekBar,根据item选中进行显示隐藏. 1.activity文件  SelectMusicActivity.java public class SelectMus

vue项目上传文件以及进度条

最近做项目的时候,需要上传自定义镜像.并且附带进度条,上网查询一下资料,经过一番折磨,也总算做出来了,把自己写项目的内容给大家分享一下. 先直接贴代码吧 1.首先声明一个formData对象. 2.把需要上传的参数利用append追加进去. append('参数名','值') 第一个this.$refs.upload.files[0],其实就是input标签加上ref唯一关键字就是upload. var fd = new FormData(); fd.append('image', that.$

在vue项目中使用Nprogress.js进度条

NProgress是一款在网页顶部添加细长进度条的工具,非常轻巧,使用起来也非常便捷,灵感来源于Google, YouTube. 1.安装 $ npm install --save nprogress 或者 $ yarn add nprogress //用法 NProgress.start(); NProgress.done(); 2.使用 router.js //导入 import NProgress from 'nprogress' import 'nprogress/nprogress.c

vue慕课网音乐项目手记:52-搜索列表scroll的实现以及scroll底部距离的刷新

首先引入scroll组件,然后使用: <scroll class="shortcut" :data="shortcut" ref="shortcut"> 这里的data是computed计算的来的,因为scroll里面有两组数据: shortcut () { return this.hotKey.concat(this.searchHistory) // 当hotKey和History有一个发生变化的时候.computed就会重新计算

vue慕课网音乐项目手记:48-搜索历史数据的处理

因为搜索关键词在多个模块都有使用,所以要在vuex里面去定义和修改. state设置: searchHistory: [] 然后是mutation和types [types.SET_SEARCH_HISTORY] (state, history) { // history接收一个数组 state.searchHistort = history } export const SET_SEARCH_HISTORY = 'SET_SEARCH_HISTORY' 然后是getters export co

vue慕课网音乐项目手记:6-手写滚动轮播图(中)

active的样式 &.active width: 20px border-radius: 5px background: $color-text-ll 这里有一个问题就是betterscroll在1.0以后的是没有snapLoop的. 所以我安装了0.1.15版本 自动轮播如下 原文地址:https://www.cnblogs.com/catbrother/p/9181079.html

vue慕课网音乐项目手记:9-封装一个公用的scroll组件

知道disable是干什么的了,如果不加,scroll的高度会高于内容的高度. <template> <div ref="wrapper"> <slot></slot> </div> </template> <script> import BScroll from 'better-scroll' export default { props: { // probeType: 1 滚动的时候会派发scro

vue慕课网音乐项目手记:5-手写滚动轮播图(上)

在这一节,会封装一些公用的函数来添加classname,改变image的宽度. 具体如下: 首先:封装一个slider的组件 <template> <div class="slider" ref="slider"> <div class="slider-group" ref="sliderGroup"> <slot></slot> </div> <d