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.
180 lines
5.3 KiB
180 lines
5.3 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 { |
|
// bindingx的回调值，用于取消绑定 |
|
panEvent: null, |
|
// 标记是否移动状态 |
|
moving: false, |
|
// 位移的偏移量 |
|
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() |
|
}, |
|
// 获取节点信息 |
|
// 获取slider尺寸 |
|
getSliderRect() { |
|
// 获取滑块条的尺寸信息 |
|
// 通过nvue的dom模块，查询节点信息 |
|
setTimeout(() => { |
|
dom.getComponentRect(this.$refs['slider'], res => { |
|
this.sliderRect = res.size |
|
this.initX() |
|
}) |
|
}, 10) |
|
}, |
|
// 初始化按钮位置 |
|
initButtonStyle({ |
|
barStyle, |
|
buttonWrapperStyle |
|
}) { |
|
this.barStyle = barStyle |
|
this.buttonWrapperStyle = buttonWrapperStyle |
|
}, |
|
emitEvent(event, value) { |
|
this.$emit(event, value ? value : this.value) |
|
}, |
|
formatStep(value) { |
|
// 移动点占总长度的百分比 |
|
return Math.round(Math.max(this.min, Math.min(value, this.max)) / this.step) * this.step |
|
}, |
|
// 滑动开始 |
|
onTouchStart(e) { |
|
// 阻止页面滚动，可以保证在滑动过程中，不让页面可以上下滚动，造成不好的体验 |
|
e.stopPropagation && e.stopPropagation() |
|
e.preventDefault && e.preventDefault() |
|
if (this.moving || this.disabled) { |
|
// 释放上一次的资源 |
|
if (this.panEvent?.token != 0) { |
|
BindingX.unbind({ |
|
token: this.panEvent.token, |
|
// pan为手势事件 |
|
eventType: 'pan' |
|
}) |
|
this.gesToken = 0 |
|
} |
|
return |
|
} |
|
|
|
this.moving = true |
|
this.touching = true |
|
|
|
// 获取元素ref |
|
const button = this.$refs['nvue-button'].ref |
|
const gap = this.$refs['nvue-gap'].ref |
|
|
|
const { |
|
min, |
|
max, |
|
step |
|
} = this |
|
const { |
|
left, |
|
width |
|
} = this.sliderRect |
|
|
|
// 初始值为本次偏移量x，加上次停止滑动时的结束值 |
|
let exporession = `(${this.x} + x)` |
|
// 将偏移的x值，转为总位移的百分比值，为了和min和max进行判断 |
|
exporession = `(${exporession} / ${width}) * 100` |
|
if (step > 1) { |
|
// 如果step步进大于1，需要跳步，所以需要使用Math.round进行取整 |
|
exporession = `round(max(${min}, min(${exporession}, ${max})) / ${step}) * ${step}` |
|
} else { |
|
// 当step=1时，无需跳步，充分利用bindingx性能，滑块实时跟随手势，达到丝滑的效果 |
|
exporession = `max(${min}, min(${exporession}, ${max}))` |
|
} |
|
// 将百分比最后转化为对应的px值 |
|
exporession = `${exporession} / 100 * ${width}` |
|
// 最大值不允许超过轨迹的宽度 |
|
const { |
|
sliderWidth |
|
} = this.sliderRect |
|
exporession = `min(${sliderWidth}, ${exporession})` |
|
// 滑块点总是需要一个左偏移的值，为自身宽度的一半 |
|
const buttonExpression = `${exporession} - ${this.blockHeight / 2}` |
|
// 阿里为了KPI而开源的BindingX |
|
this.panEvent = BindingX.bind({ |
|
anchor: button, |
|
eventType: 'pan', |
|
props: [{ |
|
element: gap, |
|
// 绑定width属性，设置其宽度值 |
|
property: 'width', |
|
expression |
|
}, { |
|
element: button, |
|
// 绑定width属性，设置其宽度值 |
|
property: 'transform.translateX', |
|
expression: buttonExpression |
|
}] |
|
}, (e) => { |
|
if (e.state === 'end' || e.state === 'exit') { |
|
// |
|
this.x = uni.$u.range(0, left + width, e.deltaX + this.x) |
|
// 根据偏移值，得出移动的百分比，进而修改双向绑定的v-model的值 |
|
const value = (this.x / width) * 100 |
|
const percent = this.formatStep(value) |
|
// 修改value值 |
|
this.$emit('input', percent) |
|
// 标记下一次触发value的watch时，这个值的变化，是由内部改变的 |
|
this.changeFromInside = true |
|
this.moving = false |
|
this.touching = false |
|
} |
|
}) |
|
}, |
|
// 从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 |
|
}) |
|
} |
|
} |
|
}
|
|
|