微信小程序自定义进度条及手动拖拽功能

首先是wxml部分

<view class="proess-box">
  <view class="time">{{currentTime}}</view>
  <movable-area  catchtouchmove="voidMethod" catchtap="tap" class="progress-box" style="width:{{width}}px;height:10px">
    <view class="bg-box">
      <view style="width:{{value}}%" class="inner"></view>
    </view>
    <movable-view class="progress-dot" wx:if="{{showDot}}" x="{{(value/100)*width}}" bindtouchmove="touchmove" bindtouchend="touchend"  direction="horizontal" bindchange="getCgh">
      <view class="dot"></view>
    </movable-view>
  </movable-area>
  <view class="end-time time" style="left: {{width+54+8}}px">{{duration}}</view>
</view>
  

使用movable-area 滑块组件定义 已播放部分，movable-view 定义进度条总长度

wxss：定义样式

.proess-box{
  position: relative;
  bottom: 30rpx;
}

.proess-box .time {
    line-height: 20rpx;
    color: #fff;
    font-size: 20rpx;
    position: absolute;
    left: 12rpx;
}
.progress-box{
    position: absolute;
    left: 54px;
  }
  
  .progress-dot{
    background: #ffffff00;
    height:40px;
    display: flex;
    justify-content: center;
    align-items: center;
    top: -15px;
    z-index: 10;   
  }
  .dot{
    background: #ffffff;
    width: 8px;
    height:8px;
    border-radius: 50%;
  }
  .bg-box{
    position: absolute;
    width: 100%;
    height: 2px;
    top: 4px;
    background-color: #ffffff22;
  }
  .bg-box .inner{
    background:linear-gradient(to bottom,#ffffff,#666);
    height: 100%;
  }
  

 json：

{
  "component": true,
  "usingComponents": {}
}

js部分

Component({
  properties: {
    value:{
      type:Number,
      value:0,
      observer:function observe(){
        var newVal = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
      }
    },
    showDot:{
      type:Boolean,
      value:false
    },
    duration:{
      type: String,
      value: '00:00'
    },
    currentTime: {
      type: String,
      value: '00:00:00'
    }
  },
  data: {
    width: wx.getSystemInfoSync().windowWidth*0.6,
    currX:0,
    touch:false,
    timer:0
  },
  methods: {
    //这是bindchange触发的函数
    getCgh(e){  
      let {x}=e.detail
      let {width}=this.data
      let pecent=x/width*100
      this.data.currX=pecent
      
    },
    tap(e){//点击区域的某处直接跳到那个进度
      console.log('tap e', e.detail)
      let {x}=e.detail
      let {width}=this.data
      let pecent=(x-54-8)/width*100
      this.data.currX=pecent
      this.triggerEvent('change',{value:pecent})
      this.triggerEvent('changend',{value:pecent})

    },
    voidMethod(){},
    touchmove(e){
      this.triggerEvent('change',{value: this.data.currX})
      // console.log(this.data.currX)
    },
    touchend(e){
      this.triggerEvent('change',{value: this.data.currX})
      this.triggerEvent('changend',{value: this.data.currX})
    },
  }
});

进度条的使用

<progress value="{{progress}}" bindchanging="showTime" showDot="{{showDot}}" currentTime="{{currentTime}}" duration="{{duration}}" bindchange="changeProgress" bindchangend="progressChangend" ></progress>      

手动拖拽功能

  data：{
    videoDuration: 0, // 视频总时长
    duration: '', // 视频总时长 00:00
    currentTime: '', // 播放时间 格式 00:00
    progress: 0, // 视频进度条
    progressState: true, //拖拽过程中，不允许更新进度条
  }

  /**
   * 拖动 视频 进度条
   */
  changeProgress: function(e) {
    const {videoDuration} = this.data
    const {value} = e.detail // 百分比
    const time = this.formatSeconds((value/100)*videoDuration)
    this.setData({progress: value, progressState: false, currentTime: time})
  },
  
  /**
   * 视频 进度条 拖动停止
   */
  progressChangend: function(e) {
    const {videoDuration} = this.data
    const {value} = e.detail // 百分比
    const time = (value/100)*videoDuration
    const q = wx.createVideoContext(video, this)
    q.seek(time)
    this.setData({progressState: true})
  },

  
   bindtimeupdate: function (e) {
    const {currentTime, duration} = e.detail
    const {progressState} = this.data
    // 进度条
    const progress =(currentTime/duration)*100
   
    // 拖动过程中不让进度条更新
    if(progressState) {
      this.setData({progress: progress})
    }
   },