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