feat: 首次提交

components/firstui/fui-slider/bindingx.js

@@ -0,0 +1,212 @@
+// 本文件由FirstUI授权予新疆天衡创新研究院有限公司（手机号：   18614  0    7 2549，身份证尾号：5A07X5）专用，请尊重知识产权，勿私下传播，违者追究法律责任。
+// #ifdef APP-NVUE
+//BindingX实现滑动比较流畅（已实现），缺点不好实时更新数据，暂时废弃
+// const BindingX = uni.requireNativePlugin('bindingx');
+const animation = uni.requireNativePlugin('animation');
+export default {
+	data() {
+		return {
+			isRight: false,
+			isAndroid: false
+		}
+	},
+	watch: {
+		value(val) {
+			this.initData(val)
+		},
+		endValue(val) {
+			if (this.section) {
+				this.initEndData(val)
+			}
+		},
+		isRight(val) {
+			if (!val) {
+				this.$nextTick(() => {
+					setTimeout(() => {
+						this.handleRight = this.getEl(this.$refs['handleRight'])
+					}, 50)
+				})
+			}
+		}
+	},
+	created() {
+		const res = uni.getSystemInfoSync();
+		this.isAndroid = res.platform.toLocaleLowerCase() == "android"
+		this.startX = 0
+		this.endX = 0
+		this.lastLeft = 0
+		this.onceLeft = 0
+		this.lastRight = 0
+		this.onceRight = 0
+	},
+	mounted() {
+		this.$nextTick(() => {
+			setTimeout(() => {
+				this.handleLeft = this.getEl(this.$refs['handleLeft'])
+				this.poleLeft = this.getEl(this.$refs['poleLeft']);
+				this.handleRight = null;
+				this.poleRight = null;
+				this.initData(this.value)
+				if (this.section) {
+					this.handleRight = this.getEl(this.$refs['handleRight'])
+					this.poleRight = this.getEl(this.$refs['poleRight']);
+					this.initEndData(this.endValue)
+				}
+			}, 50)
+		})
+	},
+	methods: {
+		getEl(el) {
+			return el.ref;
+		},
+		initData(value) {
+			this.startX = 0;
+			this.lastLeft = 0;
+			this.styleChange(Number(value), true)
+		},
+		initEndData(value) {
+			this.endX = 0;
+			this.lastRight = 0;
+			value = Number(this.max) - Number(value) + Number(this.min)
+			this.styleSectionChange(value, true)
+		},
+		format(value) {
+			value = Number(value)
+			let step = Number(this.step)
+			return Math.round(Math.max(Number(this.min), Math.min(value, Number(this.max))) / step) * step;
+		},
+		_animation(move, trans, isRight) {
+			animation.transition(
+				isRight ? this.handleRight : this.handleLeft, {
+					styles: {
+						transform: move
+					},
+					duration: 0,
+					timingFunction: 'linear',
+					needLayout: false,
+					delay: 0
+				});
+			animation.transition(
+				isRight ? this.poleRight : this.poleLeft, {
+					styles: {
+						transform: trans
+					},
+					duration: 0,
+					timingFunction: 'linear',
+					needLayout: false,
+					delay: 0
+				});
+		},
+		touchstart(e) {
+			if (this.disabled) return;
+			let touch = e.touches[0] || e.changedTouches[0];
+			this.startX = touch.screenX
+		},
+		endTouchstart(e) {
+			if (this.disabled) return;
+			let touch = e.touches[0] || e.changedTouches[0];
+			this.endX = touch.screenX
+		},
+		changeValue(value, isStart, isEnd) {
+			var params = {
+				value: value,
+				isStart: isStart
+			}
+			if (isEnd) {
+				this.change(params)
+			} else {
+				this.changing(params)
+			}
+		},
+		styleChange(value, isEnd) {
+			value = this.format(value);
+			const min = Number(this.min)
+			const max = Number(this.max)
+			if (this.section) {
+				value = value > this.end ? this.end : value;
+			}
+			this.changeValue(value, true, isEnd)
+			var dvalue = max - min;
+			var maxWidth = Number(this.width) - Number(this.blockWidth);
+			var width = (value - min) / dvalue * maxWidth;
+			this.lastLeft = width
+			if (isEnd) {
+				this.onceLeft = width
+			}
+			this._animation(`translateX(${width}px)`, `translateX(-${Number(this.width)-width}px)`, false)
+			this.isRight = value === max
+		},
+		styleSectionChange(value, isEnd) {
+			value = this.format(value);
+			const min = Number(this.min)
+			const max = Number(this.max)
+			var total = max + min;
+			var val = total - value;
+			val = val < this.start ? this.start : val;
+			value = total - val;
+			this.changeValue(val, false, isEnd)
+			var dvalue = max - min;
+			var maxWidth = Number(this.width) - Number(this.blockWidth);
+			var width = (value - min) / dvalue * maxWidth;
+			this.lastRight = width
+			if (isEnd) {
+				this.onceRight = width
+			}
+			this._animation(`translateX(-${width}px)`, `translateX(${Number(this.width)-width}px)`, true)
+		},
+		touchmove(e) {
+			if (this.disabled) return;
+			let touch = e.changedTouches[0];
+			let pageX = touch.screenX;
+			this.drag = true
+			let left = pageX - this.startX + (this.onceLeft || 0);
+			left = left < 0 ? 0 : left;
+			let maxWidth = Number(this.width) - Number(this.blockWidth);
+			left = left >= maxWidth ? maxWidth : left;
+			let dvalue = Number(this.max) - Number(this.min);
+			let value = (left / maxWidth) * dvalue + Number(this.min);
+			// this.startX = pageX
+			this.lastLeft = left
+			this.styleChange(value, false)
+		},
+		endTouchmove(e) {
+			if (this.disabled) return;
+			let touch = e.changedTouches[0];
+			let pageX = touch.screenX;
+			this.drag = true
+			let left = this.endX - pageX + (this.onceRight || 0);
+			left = left < 0 ? 0 : left;
+			let maxWidth = Number(this.width) - Number(this.blockWidth);
+			left = left >= maxWidth ? maxWidth : left;
+			let dvalue = Number(this.max) - Number(this.min);
+			let value = (left / maxWidth) * dvalue + Number(this.min);
+			// this.endX = pageX
+			this.lastRight = left
+			this.styleSectionChange(value, false)
+		},
+		touchend(e) {
+			if (this.disabled) return;
+			if (this.drag) {
+				let maxWidth = Number(this.width) - Number(this.blockWidth);
+				let dvalue = Number(this.max) - Number(this.min);
+				let value = (this.lastLeft / maxWidth) * dvalue + Number(this.min);
+				this.styleChange(value, true)
+			}
+		},
+		endTouchend(e) {
+			if (this.disabled) return;
+			if (this.drag) {
+				let maxWidth = Number(this.width) - Number(this.blockWidth);
+				let dvalue = Number(this.max) - Number(this.min);
+				let value = (this.lastRight / maxWidth) * dvalue + Number(this.min);
+				this.styleSectionChange(value, true)
+			}
+		}
+	}
+}
+
+// #endif
+
+// #ifndef APP-NVUE
+export default {}
+// #endif