114 lines
3.8 KiB
JavaScript
114 lines
3.8 KiB
JavaScript
|
/**
|
|||
|
|
* 使用普通的js方案实现slider
|
|||
|
|
*/
|
|||
|
|
export default {
|
|||
|
|
watch: {
|
|||
|
|
value(n) {
|
|||
|
|
// 只有在非滑动状态时，才可以通过value更新滑块值，这里监听，是为了让用户触发
|
|||
|
|
if (this.status === 'end') {
|
|||
|
|
this.updateSliderPlacement(n, true)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
this.init()
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
init() {
|
|||
|
|
this.getSliderRect()
|
|||
|
|
},
|
|||
|
|
// 获取slider尺寸
|
|||
|
|
getSliderRect() {
|
|||
|
|
// 获取滑块条的尺寸信息
|
|||
|
|
setTimeout(() => {
|
|||
|
|
this.$uGetRect('.u-slider').then((rect) => {
|
|||
|
|
this.sliderRect = rect
|
|||
|
|
this.updateSliderPlacement(this.value, true)
|
|||
|
|
})
|
|||
|
|
}, 10)
|
|||
|
|
},
|
|||
|
|
// 是否可以操作
|
|||
|
|
canNotDo() {
|
|||
|
|
return this.disabled
|
|||
|
|
},
|
|||
|
|
// 获取当前手势点的X轴位移值
|
|||
|
|
getTouchX(e) {
|
|||
|
|
return e.touches[0].clientX
|
|||
|
|
},
|
|||
|
|
formatStep(value) {
|
|||
|
|
// 移动点占总长度的百分比
|
|||
|
|
return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step
|
|||
|
|
},
|
|||
|
|
// 发出事件
|
|||
|
|
emitEvent(event, value) {
|
|||
|
|
this.$emit(event, value || this.value)
|
|||
|
|
},
|
|||
|
|
// 标记当前手势的状态
|
|||
|
|
setTouchStatus(status) {
|
|||
|
|
this.status = status
|
|||
|
|
},
|
|||
|
|
onTouchStart(e) {
|
|||
|
|
if (this.canNotDo()) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
// 标示当前的状态为开始触摸滑动
|
|||
|
|
this.emitEvent('start')
|
|||
|
|
this.setTouchStatus('start')
|
|||
|
|
},
|
|||
|
|
onTouchMove(e) {
|
|||
|
|
if (this.canNotDo()) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
// 滑块的左边不一定跟屏幕左边接壤，所以需要减去最外层父元素的左边值
|
|||
|
|
const x = this.getTouchX(e)
|
|||
|
|
const { left, width } = this.sliderRect
|
|||
|
|
const distanceX = x - left
|
|||
|
|
// 获得移动距离对整个滑块的百分比值，此为带有多位小数的值，不能用此更新视图
|
|||
|
|
// 否则造成通信阻塞，需要每改变一个step值时修改一次视图
|
|||
|
|
const percent = (distanceX / width) * 100
|
|||
|
|
this.setTouchStatus('moving')
|
|||
|
|
this.updateSliderPlacement(percent, true, 'moving')
|
|||
|
|
},
|
|||
|
|
onTouchEnd() {
|
|||
|
|
if (this.canNotDo()) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
this.emitEvent('end')
|
|||
|
|
this.setTouchStatus('end')
|
|||
|
|
},
|
|||
|
|
// 设置滑点的位置
|
|||
|
|
updateSliderPlacement(value, drag, event) {
|
|||
|
|
// 去掉小数部分，同时也是对step步进的处理
|
|||
|
|
const { width } = this.sliderRect
|
|||
|
|
const percent = this.formatStep(value)
|
|||
|
|
// 设置移动的值
|
|||
|
|
const barStyle = {
|
|||
|
|
width: `${percent / 100 * width}px`
|
|||
|
|
}
|
|||
|
|
// 移动期间无需过渡动画
|
|||
|
|
if (drag === true) {
|
|||
|
|
barStyle.transition = 'none'
|
|||
|
|
} else {
|
|||
|
|
// 非移动期间，删掉对过渡为空的声明，让css中的声明起效
|
|||
|
|
delete barStyle.transition
|
|||
|
|
}
|
|||
|
|
// 修改value值
|
|||
|
|
this.$emit('input', percent)
|
|||
|
|
// 事件的名称
|
|||
|
|
if (event) {
|
|||
|
|
this.emitEvent(event, percent)
|
|||
|
|
}
|
|||
|
|
this.barStyle = barStyle
|
|||
|
|
},
|
|||
|
|
onClick(e) {
|
|||
|
|
if (this.canNotDo()) {
|
|||
|
|
return
|
|||
|
|
}
|
|||
|
|
// 直接点击滑块的情况，计算方式与onTouchMove方法相同
|
|||
|
|
const { left, width } = this.sliderRect
|
|||
|
|
const value = ((e.detail.x - left) / width) * 100
|
|||
|
|
this.updateSliderPlacement(value, false, 'click')
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|