nvue - 副本.js 5.3 KB
/**
 * 使用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
			})
		}
	}
}