From 1e61215b48e59e94c1ed98e4ef956227d689d6bc Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Mon, 06 Nov 2023 08:48:39 +0800
Subject: [PATCH] fix:小程序订阅消息
---
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