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

Posted catbrother

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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> 

逻辑的实现:

技术分享图片

技术分享图片

 

以上是关于vue慕课网音乐项目手记:30-音乐环形进度条的实现的主要内容,如果未能解决你的问题,请参考以下文章

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

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

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

vue移动音乐app开发学习:轮播图组件的开发

慕课网视频破解付费分享-前端开发-Python等

基于Vue2.0的音乐播放器——歌手模块(拿不到数据)