From bd99a5211f3a5fcaa051e5da868d87bb870148f5 Mon Sep 17 00:00:00 2001
From: quanyawei <401863037@qq.com>
Date: Fri, 01 Mar 2024 09:58:45 +0800
Subject: [PATCH] fix:手持设备

---
 uni_modules/uview-ui/components/u-swipe-action-item/nvue.js |  174 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
 1 files changed, 174 insertions(+), 0 deletions(-)

diff --git a/uni_modules/uview-ui/components/u-swipe-action-item/nvue.js b/uni_modules/uview-ui/components/u-swipe-action-item/nvue.js
new file mode 100644
index 0000000..118e4cf
--- /dev/null
+++ b/uni_modules/uview-ui/components/u-swipe-action-item/nvue.js
@@ -0,0 +1,174 @@
+// nvue������dom���������������������dom���������������
+const dom = uni.requireNativePlugin('dom');
+const bindingX = uni.requireNativePlugin('bindingx');
+const animation = uni.requireNativePlugin('animation');
+
+export default {
+	data() {
+		return {
+			// ������������������������
+			buttonsWidth: 0,
+			// ���������������������
+			moving: false
+		}
+	},
+	computed: {
+		// ������������������
+		getDuratin() {
+			let duration = String(this.duration)
+			// ������ms������������������ms���������������
+			if (duration.indexOf('ms') >= 0) return parseInt(duration)
+			// ������s������������������������ms������������������������1000
+			if (duration.indexOf('s') >= 0) return parseInt(duration) * 1000
+			// ���������������������������������30������������s������
+			duration = Number(duration)
+			return duration < 30 ? duration * 1000 : duration
+		}
+	},
+	watch: {
+		show(n) {
+			if(n) {
+				this.moveCellByAnimation('open') 
+			} else {
+				this.moveCellByAnimation('close') 
+			}
+		}
+	},
+	mounted() {
+		this.initialize()
+	},
+	methods: {
+		initialize() {
+			this.queryRect() 
+		},
+		// ���������������������������������������������������������������������������
+		closeHandler() {
+			if(this.status === 'open') {
+				// ���������������������������������������������������������������������
+				return this.moveCellByAnimation('close') && this.unbindBindingX()
+			}
+		},
+		// ���������������
+		clickHandler() {
+			// ������������������������������������������
+			if(this.moving) return
+			// ������������������������������������
+			this.parent && this.parent.closeOther(this)
+			if(this.status === 'open') {
+				// ���������������������������������������������������������������������
+				return this.moveCellByAnimation('close') && this.unbindBindingX()
+			}
+		},
+		// ���������������
+		onTouchstart(e) {
+			// ������������������������������������disabled������������������
+			if(this.moving || this.disabled) { 
+				return this.unbindBindingX()   
+			}
+			if(this.status === 'open') {
+				// ���������������������������������������������������������������������
+				return this.moveCellByAnimation('close') && this.unbindBindingX()
+			}
+			// ������������������e������������������������
+			e?.stopPropagation && e.stopPropagation() 
+			e?.preventDefault && e.preventDefault()
+			this.moving = true
+			// ������������ref
+			const content = this.getContentRef()
+			let expression = `min(max(${-this.buttonsWidth}, x), 0)`
+			// ������������������������������������
+			this.parent && this.parent.closeOther(this)
+			
+			// ������������KPI������������BindingX
+			this.panEvent = bindingX.bind({
+				anchor: content,
+				eventType: 'pan',
+				props: [{
+					element: content,
+					// ������width���������������������������
+					property: 'transform.translateX',
+					expression
+				}]
+			}, (res) => {
+				this.moving = false
+				if (res.state === 'end' || res.state === 'exit') {
+					const deltaX = res.deltaX
+					if(deltaX <= -this.buttonsWidth || deltaX >= 0) {
+						// ���������������������������������������������������������������������������0������������������������������������������������������������������
+						// ���������������������������������
+						this.$nextTick(() => {
+							this.status = deltaX <= -this.buttonsWidth ? 'open' : 'close'
+						})
+					} else if(Math.abs(deltaX) > uni.$u.getPx(this.threshold)) {
+						// ���������������������������������������������������������������������������������������
+						// ������������������0���������������������������������
+						if(Math.abs(deltaX) < this.buttonsWidth) {
+							this.moveCellByAnimation(deltaX > 0 ? 'close' : 'open')
+						}
+					} else {
+						// ���������������������������������������(������������������������������������������bindingX)
+						this.moveCellByAnimation('close')
+					}
+				}
+			})
+		},
+		// ������bindingX
+		unbindBindingX() {
+			// ������������������������
+			if (this?.panEvent?.token != 0) {
+				bindingX.unbind({
+					token: this.panEvent?.token,
+					// pan���������������
+					eventType: 'pan'
+				})
+			}
+		},
+		// ������������������������
+		queryRect() {
+			// ���������������������������������getRectByDom������������promise
+			const promiseAll = this.options.map((item, index) => {
+				return this.getRectByDom(this.$refs[`u-swipe-action-item__right__button-${index}`][0])
+			})
+			// ������promise.all������������������������������������������������������������������
+			Promise.all(promiseAll).then(sizes => {
+				this.buttons = sizes
+				// ���������������������������
+				this.buttonsWidth = sizes.reduce((sum, cur) => sum + cur.width, 0)
+			})
+		},
+		// ������nvue���dom���������������������������
+		getRectByDom(ref) {
+			return new Promise(resolve => {
+				dom.getComponentRect(ref, res => {
+					resolve(res.size)
+				})
+			}) 
+		},
+		// ������������������������������������������
+		moveCellByAnimation(status = 'open') {
+			if(this.moving) return
+			// ������������������
+			this.moveing = true
+			const content = this.getContentRef()
+			const x = status === 'open' ? -this.buttonsWidth : 0 
+			animation.transition(content, {
+				styles: {
+					transform: `translateX(${x}px)`,
+				},
+				duration: uni.$u.getDuration(this.duration, false),
+				timingFunction: 'ease-in-out'
+			}, () => {
+				this.moving = false
+				this.status = status
+				this.unbindBindingX()
+			})
+		},
+		// ������������ref
+		getContentRef() {
+			return this.$refs['u-swipe-action-item__content'].ref
+		},
+		beforeDestroy() {
+			this.unbindBindingX()
+		}
+	}
+}

--
Gitblit v1.8.0