vue慕课网音乐项目手记：29-音乐进度条的实现（上）

最新推荐文章于 2022-07-15 21:12:10 发布

simoonQian

最新推荐文章于 2022-07-15 21:12:10 发布

阅读量1.2k

点赞数 1

分类专栏： vue音乐

本文链接：https://blog.csdn.net/weixin_40814356/article/details/80387804

版权

vue音乐专栏收录该内容

61 篇文章 2 订阅

订阅专栏

如何实现这样的音乐进度条呢？

首先：定义一个进度条的组件，基本样式和html如下：

<div class="progress-bar" ref="progressBar">
    <div class="bar-inner">
      <div class="progress" ref="progress"></div>
      <div class="progress-btn-wrapper" ref="progressBtn">
        <div class="progress-btn"></div>
      </div>
    </div>
  </div>

<style lang="stylus" scoped>
  @import '~common/stylus/variable'
  .progress-bar
    height 30px
    .bar-inner
      position relative
      top 13px
      height 4px
      background rgba(0, 0, 0, 0.3)
      .progress
        position absolute
        height 100%
        background $color-theme
      .progress-btn-wrapper
        position absolute
        left -8px
        top -13px
        width 30px
        height 30px
        .progress-btn
          position relative
          top 7px
          left 7px
          box-sizing border-box
          width 16px
          height 16px
          border 3px solid $color-text
          border-radius 50%
          background $color-theme
</style>

在父组件里面样式和html如下：

<div class="progress-wrapper">
   <div class="time time-l">{{format(this.currentTime)}}</div>
   <div class="progress-bar-wrapper">
       <progress-bar :percent="percent"></progress-bar>
   </div>
   <div class="time time-r">{{format(currentSong.duration)}}</div>
</div>

.progress-wrapper
          display: flex
          align-items: center
          width: 80%
          margin: 0px auto
          padding: 10px 0
          .time
            color: $color-text
            font-size: $font-size-small
            flex: 0 0 30px
            // 不放大/不缩小/固定30px
            line-height: 30px
            width: 30px
            &.time-l
              text-align: left
            &.time-r
              text-align: right
          .progress-bar-wrapper
            flex: 1

逻辑的实现