在实例上创建一个touch 对象维护不同的回调之间的通讯共享状态信息。 touchstart事件方法中 ，首先设置this.touch.initated为true，表示拖动开始。 记录开始点击位置 e.touches[0].pageX 存到 touch 对象上，记录当前的进度宽度。
在touchmove 中首先判断 是否先进入了 touchstart 方法，计算得到 移动的位置 减去 点击开始的位置的 偏移量长度。 let deltax = e.touches[0].pageX – this.touch.startX
就可以 设置进度条 已有的长度加上偏移量长度。最大不能超过父级progressbar 的宽度
调用this._offset(offsetWidth) 方法设置进度条宽度
在touchend 事件方法中将 this.touch.initated 设置为false，表示拖动结束，并派发事件到player 组件将audio的currentTime 值设置为正确值，参数为pencent
在progressbar 中增加点击事件，调用this._offset(e.offsetX)，并且派发事件
created(){
this.touch = {};
},methods:{
progressTouchStart(e){
this.touch.initiated = true;
this.touch.startX = e.touches[0].pageX;
this.touch.left = this.$refs.progress.clientWidth;
},
progressTouchMove(e){
if(!this.touch.initiated){
return;
}
let deltaX = e.touches[0].pageX - this.touch.startX;
let offsetWidth = Math.min(this.$refs.progressBar.clientWidth - progressBtnWidth,Math.max(0,this.touch.left + deltaX));
this._offset(offsetWidth);
},
progressTouchEnd(e){
this.touch.initiated = false;
this._triggerPercent();
},
progressClick(e){
const rect = this.$refs.progressBar.getBoundingClientRect();
const offsetWidth = e.pageX - rect.left;
this._offset(offsetWidth);
// this._offset(e.offsetX);
this._triggerPercent();
},
_offset(offsetWidth){
this.$refs.progress.style.width = `${offsetWidth}px`;
this.$refs.progressBtn.style[transform] = `translate3d(${offsetWidth}px,0,0)`;
},
_triggerPercent(){
const barWidth = this.$refs.progressBar.clientWidth - progressBtnWidth;
const percent = this.$refs.progress.clientWidth / barWidth;
this.$emit("percentChange",percent)
}
},
本文已被整理到了《Vue.js前端组件学习教程》，欢迎大家学习阅读。
关于vue.js组件的教程，请大家点击专题vue.js组件学习教程进行学习。
更多vue学习教程请阅读专题《vue实战教程》
