mirror of
				https://gitee.com/hhyykk/ipms-sjy.git
				synced 2025-10-31 18:28:43 +08:00 
			
		
		
		
	
		
			
	
	
		
			194 lines
		
	
	
		
			3.9 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
		
		
			
		
	
	
			194 lines
		
	
	
		
			3.9 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
|   | export default { | |||
|  | 	data() { | |||
|  | 		return { | |||
|  | 			x: 0, | |||
|  | 			transition: false, | |||
|  | 			width: 0, | |||
|  | 			viewWidth: 0, | |||
|  | 			swipeShow: 0 | |||
|  | 		} | |||
|  | 	}, | |||
|  | 	watch: { | |||
|  | 		show(newVal) { | |||
|  | 			if (this.autoClose) return | |||
|  | 			if (newVal && newVal !== 'none') { | |||
|  | 				this.transition = true | |||
|  | 				this.open(newVal) | |||
|  | 			} else { | |||
|  | 				this.close() | |||
|  | 			} | |||
|  | 		} | |||
|  | 	}, | |||
|  | 	created() { | |||
|  | 		this.swipeaction = this.getSwipeAction() | |||
|  | 		if (this.swipeaction.children !== undefined) { | |||
|  | 			this.swipeaction.children.push(this) | |||
|  | 		} | |||
|  | 	}, | |||
|  | 	mounted() { | |||
|  | 		this.isopen = false | |||
|  | 		setTimeout(() => { | |||
|  | 			this.getQuerySelect() | |||
|  | 		}, 50) | |||
|  | 	}, | |||
|  | 	methods: { | |||
|  | 		appTouchStart(e) { | |||
|  | 			const { | |||
|  | 				clientX | |||
|  | 			} = e.changedTouches[0] | |||
|  | 			this.clientX = clientX | |||
|  | 			this.timestamp = new Date().getTime() | |||
|  | 		}, | |||
|  | 		appTouchEnd(e, index, item, position) { | |||
|  | 			const { | |||
|  | 				clientX | |||
|  | 			} = e.changedTouches[0] | |||
|  | 			// fixed by xxxx 模拟点击事件,解决 ios 13 点击区域错位的问题
 | |||
|  | 			let diff = Math.abs(this.clientX - clientX) | |||
|  | 			let time = (new Date().getTime()) - this.timestamp | |||
|  | 			if (diff < 40 && time < 300) { | |||
|  | 				this.$emit('click', { | |||
|  | 					content: item, | |||
|  | 					index, | |||
|  | 					position | |||
|  | 				}) | |||
|  | 			} | |||
|  | 		}, | |||
|  | 		/** | |||
|  | 		 * 移动触发 | |||
|  | 		 * @param {Object} e | |||
|  | 		 */ | |||
|  | 		onChange(e) { | |||
|  | 			this.moveX = e.detail.x | |||
|  | 			this.isclose = false | |||
|  | 		}, | |||
|  | 		touchstart(e) { | |||
|  | 			this.transition = false | |||
|  | 			this.isclose = true | |||
|  | 			this.autoClose && this.swipeaction.closeOther(this) | |||
|  | 		}, | |||
|  | 		touchmove(e) {}, | |||
|  | 		touchend(e) { | |||
|  | 			// 0的位置什么都不执行
 | |||
|  | 			if (this.isclose && this.isopen === 'none') return | |||
|  | 			if (this.isclose && this.isopen !== 'none') { | |||
|  | 				this.transition = true | |||
|  | 				this.close() | |||
|  | 			} else { | |||
|  | 				this.move(this.moveX + this.leftWidth) | |||
|  | 			} | |||
|  | 		}, | |||
|  | 
 | |||
|  | 		/** | |||
|  | 		 * 移动 | |||
|  | 		 * @param {Object} moveX | |||
|  | 		 */ | |||
|  | 		move(moveX) { | |||
|  | 			// 打开关闭的处理逻辑不太一样
 | |||
|  | 			this.transition = true | |||
|  | 			// 未打开状态
 | |||
|  | 			if (!this.isopen || this.isopen === 'none') { | |||
|  | 				if (moveX > this.threshold) { | |||
|  | 					this.open('left') | |||
|  | 				} else if (moveX < -this.threshold) { | |||
|  | 					this.open('right') | |||
|  | 				} else { | |||
|  | 					this.close() | |||
|  | 				} | |||
|  | 			} else { | |||
|  | 				if (moveX < 0 && moveX < this.rightWidth) { | |||
|  | 					const rightX = this.rightWidth + moveX | |||
|  | 					if (rightX < this.threshold) { | |||
|  | 						this.open('right') | |||
|  | 					} else { | |||
|  | 						this.close() | |||
|  | 					} | |||
|  | 				} else if (moveX > 0 && moveX < this.leftWidth) { | |||
|  | 					const leftX = this.leftWidth - moveX | |||
|  | 					if (leftX < this.threshold) { | |||
|  | 						this.open('left') | |||
|  | 					} else { | |||
|  | 						this.close() | |||
|  | 					} | |||
|  | 				} | |||
|  | 
 | |||
|  | 			} | |||
|  | 
 | |||
|  | 		}, | |||
|  | 
 | |||
|  | 		/** | |||
|  | 		 * 打开 | |||
|  | 		 */ | |||
|  | 		open(type) { | |||
|  | 			this.x = this.moveX | |||
|  | 			this.animation(type) | |||
|  | 		}, | |||
|  | 
 | |||
|  | 		/** | |||
|  | 		 * 关闭 | |||
|  | 		 */ | |||
|  | 		close() { | |||
|  | 			this.x = this.moveX | |||
|  | 			// TODO 解决 x 值不更新的问题,所以会多触发一次 nextTick ,待优化
 | |||
|  | 			this.$nextTick(() => { | |||
|  | 				this.x = -this.leftWidth | |||
|  | 				if (this.isopen !== 'none') { | |||
|  | 					this.$emit('change', 'none') | |||
|  | 				} | |||
|  | 				this.isopen = 'none' | |||
|  | 			}) | |||
|  | 		}, | |||
|  | 
 | |||
|  | 		/** | |||
|  | 		 * 执行结束动画 | |||
|  | 		 * @param {Object} type | |||
|  | 		 */ | |||
|  | 		animation(type) { | |||
|  | 			this.$nextTick(() => { | |||
|  | 				if (type === 'left') { | |||
|  | 					this.x = 0 | |||
|  | 				} else { | |||
|  | 					this.x = -this.rightWidth - this.leftWidth | |||
|  | 				} | |||
|  | 
 | |||
|  | 				if (this.isopen !== type) { | |||
|  | 					this.$emit('change', type) | |||
|  | 				} | |||
|  | 				this.isopen = type | |||
|  | 			}) | |||
|  | 
 | |||
|  | 		}, | |||
|  | 		getSlide(x) {}, | |||
|  | 		getQuerySelect() { | |||
|  | 			const query = uni.createSelectorQuery().in(this); | |||
|  | 			query.selectAll('.movable-view--hock').boundingClientRect(data => { | |||
|  | 				this.leftWidth = data[1].width | |||
|  | 				this.rightWidth = data[2].width | |||
|  | 				this.width = data[0].width | |||
|  | 				this.viewWidth = this.width + this.rightWidth + this.leftWidth | |||
|  | 				if (this.leftWidth === 0) { | |||
|  | 					// TODO 疑似bug ,初始化的时候如果x 是0,会导致移动位置错误,所以让元素超出一点
 | |||
|  | 					this.x = -0.1 | |||
|  | 				} else { | |||
|  | 					this.x = -this.leftWidth | |||
|  | 				} | |||
|  | 				this.moveX = this.x | |||
|  | 				this.$nextTick(() => { | |||
|  | 					this.swipeShow = 1 | |||
|  | 				}) | |||
|  | 
 | |||
|  | 				if (!this.buttonWidth) { | |||
|  | 					this.disabledView = true | |||
|  | 				} | |||
|  | 
 | |||
|  | 				if (this.autoClose) return | |||
|  | 				if (this.show !== 'none') { | |||
|  | 					this.transition = true | |||
|  | 					this.open(this.shows) | |||
|  | 				} | |||
|  | 			}).exec(); | |||
|  | 
 | |||
|  | 		} | |||
|  | 	} | |||
|  | } |