音乐进度条组件progress-bar的设计与实现

新建组件文件（略）
引用组件（略）

组件界面设计

在组件内定义显示内容
开始播放时间、总时间、滑动模块

时间部分

使用数据从脚本中定义引用

滑动模块效果方式
（1）官方自带滑动组件
（2）自定义滑动元素
使用内置的滑动区域组件，构造一个可以移动的区域

属性的说明在截图注释上。
这样在加上样式就可以构成一个显示的进度条样式了
样式代码请参考在github上的文件。

JS脚本逻辑设计

首先我们要获取到进度条的长度
使用了很多内置函数，最后的exec会按照输入顺序来一点一点输出这个问题

//获取进度条的宽度
 _getMovableDis(){
   
      const query=this.createSelectorQuery();//返回一个实例化对象,通过该对象获取到宽度
      query.select('.movable-area').boundingClientRect()//获取到了movable-area的宽度
      query.select('.movable-view').boundingClientRect()//获取到了movable-view的宽度
      query.exec((rect)=>{
   
        //获取执行所有的请求，按照上边请求的顺序返回一个数组，返回数组按顺序输出
        movableAreaWidth=rect[0].width
        movableViewWidth=rect[1].width
      })
    },

在我们初次加载时的有一个生命周期函数，我们肯定是需要在页面加载时就呈现出来的（）。

lifetimes:{
   
      ready(){
   
        this._getMovableDis();
        this._backgroundBGM();
      }
    }

在获取到宽度之后，我们还需要获取到的肯定就是时间了，歌曲的总长度时间。

 //获取背景音乐
    _backgroundBGM(){
   
      backgroundAudioManager.onPlay(()=>{
   

      })
      backgroundAudioManager.onStop(()