You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
193 lines
6.9 KiB
193 lines
6.9 KiB
/** |
|
* 使用bindingx方案实现slider |
|
* 只能使用于nvue下 |
|
*/ |
|
// 引入bindingx，此库类似于微信小程序wxs，目的是让js运行在视图层，减少视图层和逻辑层的通信折损 |
|
const BindingX = uni.requireNativePlugin('bindingx') |
|
// nvue操作dom的库，用于获取dom的尺寸信息 |
|
const dom = uni.requireNativePlugin('dom') |
|
// nvue中用于操作元素动画的库，类似于uni.animation，只不过uni.animation不能用于nvue |
|
const animation = uni.requireNativePlugin('animation') |
|
|
|
export default { |
|
data() { |
|
return { |
|
// 位移的偏移量 |
|
x: 0, |
|
// 是否正在触摸过程中，用于标记动画类是否添加或移除 |
|
touching: false, |
|
changeFromInside: false |
|
} |
|
}, |
|
watch: { |
|
// 监听vlaue的变化，此变化可能是由于内部修改v-model的值，或者外部 |
|
// 从服务端获取一个值后，赋值给slider的v-model而导致的 |
|
value(n) { |
|
if (!this.changeFromInside) { |
|
this.initX() |
|
} else { |
|
this.changeFromInside = false |
|
} |
|
} |
|
}, |
|
mounted() { |
|
this.init() |
|
}, |
|
methods: { |
|
init() { |
|
// 更新滑块尺寸信息 |
|
this.getSliderRect().then((size) => { |
|
this.sliderRect = size |
|
this.initX() |
|
}) |
|
}, |
|
// 获取节点信息 |
|
// 获取slider尺寸 |
|
getSliderRect() { |
|
// 获取滑块条的尺寸信息 |
|
// 通过nvue的dom模块，查询节点信息 |
|
return new Promise((resolve) => { |
|
this.$nextTick(() => { |
|
dom.getComponentRect(this.$refs.slider, (res) => { |
|
resolve(res.size) |
|
}) |
|
}) |
|
}) |
|
}, |
|
// 初始化按钮位置 |
|
initButtonStyle({ |
|
barStyle, |
|
buttonWrapperStyle |
|
}) { |
|
this.barStyle = barStyle |
|
this.buttonWrapperStyle = buttonWrapperStyle |
|
}, |
|
emitEvent(event, value) { |
|
this.$emit(event, value || this.value) |
|
}, |
|
// 滑动开始 |
|
async onTouchStart(e) { |
|
// if (this.disabled) return |
|
// // 阻止页面滚动，可以保证在滑动过程中，不让页面可以上下滚动，造成不好的体验 |
|
// e.stopPropagation && e.stopPropagation() |
|
// e.preventDefault && e.preventDefault() |
|
// // 更新滑块的尺寸信息 |
|
// this.sliderRect = await this.getSliderRect() |
|
// // 标记滑动过程中触摸点的信息 |
|
// this.touchStart(e) |
|
// this.startValue = this.format(this.value) |
|
// this.dragStatus = 'start' |
|
|
|
// 标记滑动过程中触摸点的信息 |
|
// this.touchStart(e) |
|
}, |
|
// 开始滑动 |
|
onTouchMove(e) { |
|
// if (this.disabled) return; |
|
// if (this.dragStatus === 'start') { |
|
// this.$emit('drag-start') |
|
// } |
|
// // 标记当前滑动过程中的触点信息，此方法在touch mixin中 |
|
// this.touchMove(e) |
|
// this.dragStatus = 'draging' |
|
// const { |
|
// width: sliderWidth |
|
// } = this.sliderRect |
|
// const diff = (this.deltaX / sliderWidth) * this.getRange() |
|
// this.newValue = this.startValue + diff |
|
// this.updateValue(this.newValue, false, true) |
|
// 获取元素ref |
|
// const button = this.$refs['nvue-button'].ref |
|
// const gap = this.$refs['nvue-gap'].ref |
|
|
|
// animation.transition(gap, { |
|
// styles: { |
|
// width: `${this.startX + this.deltaX}px` |
|
// } |
|
// }) |
|
// // console.log(this.startX + this.deltaX); |
|
// animation.transition(button, { |
|
// styles: { |
|
// transform: `translateX(${this.startX + this.deltaX}px)` |
|
// } |
|
// }) |
|
// this.barStyle = { |
|
// width: `${this.startX + this.deltaX}px` |
|
// } |
|
const { |
|
x |
|
} = this.getTouchPoint(e) |
|
this.buttonWrapperStyle = { |
|
transform: `translateX(${x}px)` |
|
} |
|
// this.buttonWrapperStyle = { |
|
// transform: `translateX(${this.format(this.startX + this.deltaX)}px)` |
|
// } |
|
}, |
|
// onTouchEnd() { |
|
// if (this.disabled) return; |
|
// if (this.dragStatus === 'draging') { |
|
// this.updateValue(this.newValue, true) |
|
// this.$emit('drag-end'); |
|
// } |
|
// }, |
|
updateValue(value, end, drag) { |
|
value = this.format(value) |
|
const { |
|
width: sliderWidth |
|
} = this.sliderRect |
|
const width = `${((value - this.min) * sliderWidth) / this.getRange()}` |
|
this.value = value |
|
this.barStyle = { |
|
width: `${width}px` |
|
} |
|
// console.log('width', width); |
|
if (drag) { |
|
this.$emit('drag', { |
|
value |
|
}) |
|
} |
|
if (end) { |
|
this.$emit('change', value) |
|
} |
|
if ((drag || end)) { |
|
this.changeFromInside = true |
|
this.$emit('update', value) |
|
} |
|
}, |
|
// 从value的变化，倒推得出x的值该为多少 |
|
initX() { |
|
const { |
|
left, |
|
width |
|
} = this.sliderRect |
|
// 得出x的初始偏移值，之所以需要这么做，是因为在bindingX中，触摸滑动时，只能的值本次移动的偏移值 |
|
// 而无法的值准确的前后移动的两个点的坐标值，weex纯粹为阿里巴巴的KPI(部门业绩考核)产物，也就这样了 |
|
this.x = this.value / 100 * width |
|
// 设置移动的值 |
|
const barStyle = { |
|
width: `${this.x}px` |
|
} |
|
// 按钮的初始值 |
|
const buttonWrapperStyle = { |
|
transform: `translateX(${this.x - this.blockHeight / 2}px)` |
|
} |
|
this.initButtonStyle({ |
|
barStyle, |
|
buttonWrapperStyle |
|
}) |
|
}, |
|
// 移动点占总长度的百分比，此处需要先除以step，是为了保证step大于1时，比如10，那么在滑动11,12px这样的 |
|
// 距离时，实际上滑块是不会滑动的，到了16,17px，经过四舍五入后，就变成了20px，进行了下一个跳变 |
|
format(value) { |
|
return Math.round(uni.$u.range(this.min, this.max, value) / this.step) * this.step |
|
}, |
|
getRange() { |
|
const { |
|
max, |
|
min |
|
} = this |
|
return max - min |
|
} |
|
} |
|
}
|
|
|