审查视图

node_modules/uview-ui/components/u-slider/nvue - 副本.js 5.3 KB
韩昌 authored
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180
/**
 * 使用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
			})
		}
	}
}