首先是wxml部分view classproess-box view classtime{{currentTime}}/view movable-area catchtouchmovevoidMethod catchtaptap classprogress-box stylewidth:{{width}}px;height:10px view classbg-box view stylewidth:{{value}}% classinner/view /view movable-view classprogress-dot wx:if{{showDot}} x{{(value/100)*width}} bindtouchmovetouchmove bindtouchendtouchend directionhorizontal bindchangegetCgh view classdot/view /movable-view /movable-area view classend-time time styleleft: {{width548}}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 pecentx/width*100 this.data.currXpecent }, 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.currXpecent 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}} bindchangingshowTime showDot{{showDot}} currentTime{{currentTime}} duration{{duration}} bindchangechangeProgress bindchangendprogressChangend /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}) } },
