From da25434b85fc5b4321c429bf95e719d00ec395bb Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Thu, 11 Jan 2024 16:21:16 +0800
Subject: [PATCH] 定位优化

---
 uni_modules/uview-ui/components/u-slider/nvue.js |  193 ++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 193 insertions(+), 0 deletions(-)

diff --git a/uni_modules/uview-ui/components/u-slider/nvue.js b/uni_modules/uview-ui/components/u-slider/nvue.js
new file mode 100644
index 0000000..344dce8
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-slider/nvue.js
@@ -0,0 +1,193 @@
+/**
+ * ������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 {
+            // ������������������
+            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().then((size) => {
+                this.sliderRect = size
+                this.initX()
+            })
+        },
+        // ������������������
+        // ������slider������
+        getSliderRect() {
+            // ������������������������������
+            // ������nvue���dom���������������������������
+            return new Promise((resolve) => {
+                this.$nextTick(() => {
+                    dom.getComponentRect(this.$refs.slider, (res) => {
+                        resolve(res.size)
+                    })
+                })
+            })
+        },
+        // ���������������������
+        initButtonStyle({
+            barStyle,
+            buttonWrapperStyle
+        }) {
+            this.barStyle = barStyle
+            this.buttonWrapperStyle = buttonWrapperStyle
+        },
+        emitEvent(event, value) {
+            this.$emit(event, value || this.value)
+        },
+        // ������������
+        async onTouchStart(e) {
+            // if (this.disabled) return
+            // // ������������������������������������������������������������������������������������������������������������
+            // e.stopPropagation && e.stopPropagation()
+            // e.preventDefault && e.preventDefault()
+            // // ���������������������������
+            // this.sliderRect = await this.getSliderRect()
+            // // ���������������������������������������
+            // this.touchStart(e)
+            // this.startValue = this.format(this.value)
+            // this.dragStatus = 'start'
+
+            // ���������������������������������������
+            // this.touchStart(e)
+        },
+        // ������������
+        onTouchMove(e) {
+            // if (this.disabled) return;
+            // if (this.dragStatus === 'start') {
+            // 	this.$emit('drag-start')
+            // }
+            // // ���������������������������������������������������������touch mixin���
+            // this.touchMove(e)
+            // this.dragStatus = 'draging'
+            // const {
+            // 	width: sliderWidth
+            // } = this.sliderRect
+            // const diff = (this.deltaX / sliderWidth) * this.getRange()
+            // this.newValue = this.startValue + diff
+            // this.updateValue(this.newValue, false, true)
+            // ������������ref
+            // const button = this.$refs['nvue-button'].ref
+            // const gap = this.$refs['nvue-gap'].ref
+
+            //          animation.transition(gap, {
+            // 	styles: {
+            //                  width: `${this.startX + this.deltaX}px`
+            // 	}
+            // })
+            // // console.log(this.startX + this.deltaX);
+            // animation.transition(button, {
+            // 	styles: {
+            //         transform: `translateX(${this.startX + this.deltaX}px)`
+            // 	}
+            // })
+            // this.barStyle = {
+            // 	width: `${this.startX + this.deltaX}px`
+            // }
+            const {
+                x
+            } = this.getTouchPoint(e)
+            this.buttonWrapperStyle = {
+                transform: `translateX(${x}px)`
+            }
+            // this.buttonWrapperStyle = {
+            // 	transform: `translateX(${this.format(this.startX + this.deltaX)}px)`
+            // }
+        },
+        // onTouchEnd() {
+        // 	if (this.disabled) return;
+        // 	if (this.dragStatus === 'draging') {
+        // 		this.updateValue(this.newValue, true)
+        // 		this.$emit('drag-end');
+        // 	}
+        // },
+        updateValue(value, end, drag) {
+            value = this.format(value)
+            const {
+                width: sliderWidth
+            } = this.sliderRect
+            const width = `${((value - this.min) * sliderWidth) / this.getRange()}`
+            this.value = value
+            this.barStyle = {
+                width: `${width}px`
+            }
+            // console.log('width', width);
+            if (drag) {
+                this.$emit('drag', {
+                    value
+                })
+            }
+            if (end) {
+                this.$emit('change', value)
+            }
+            if ((drag || end)) {
+                this.changeFromInside = true
+                this.$emit('update', value)
+            }
+        },
+        // ���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
+            })
+        },
+        // ���������������������������������������������������������step������������������step������1������������10������������������11,12px���������
+        // ������������������������������������������������������16,17px���������������������������������������20px���������������������������
+        format(value) {
+            return Math.round(uni.$u.range(this.min, this.max, value) / this.step) * this.step
+        },
+        getRange() {
+            const {
+                max,
+                min
+            } = this
+            return max - min
+        }
+    }
+}

--
Gitblit v1.8.0