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