From d8b41fff43a2cee6a8f714ffa807623b15803786 Mon Sep 17 00:00:00 2001 From: quanyawei <401863037@qq.com> Date: Fri, 20 Oct 2023 15:21:35 +0800 Subject: [PATCH] fix:立行立改Uniapp小程序新建项目 --- uni_modules/uview-ui/components/u-slider/nvue - 副本.js | 180 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 files changed, 180 insertions(+), 0 deletions(-) diff --git "a/uni_modules/uview-ui/components/u-slider/nvue - \345\211\257\346\234\254.js" "b/uni_modules/uview-ui/components/u-slider/nvue - \345\211\257\346\234\254.js" new file mode 100644 index 0000000..df62349 --- /dev/null +++ "b/uni_modules/uview-ui/components/u-slider/nvue - \345\211\257\346\234\254.js" @@ -0,0 +1,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 + }) + } + } +} -- Gitblit v1.8.0