You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

181 lines
5.3 KiB
JavaScript

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

/**
* 使用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
})
}
}
}