261 lines
		
	
	
		
			5.5 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
		
		
			
		
	
	
			261 lines
		
	
	
		
			5.5 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
|  | let otherMixins = {} | |||
|  | 
 | |||
|  | // #ifndef APP-PLUS|| MP-WEIXIN  ||  H5
 | |||
|  | const MIN_DISTANCE = 10; | |||
|  | otherMixins = { | |||
|  | 	data() { | |||
|  | 		// TODO 随机生生元素ID,解决百度小程序获取同一个元素位置信息的bug
 | |||
|  | 		const elClass = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}` | |||
|  | 		return { | |||
|  | 			uniShow: false, | |||
|  | 			left: 0, | |||
|  | 			buttonShow: 'none', | |||
|  | 			ani: false, | |||
|  | 			moveLeft: '', | |||
|  | 			elClass | |||
|  | 		} | |||
|  | 	}, | |||
|  | 	watch: { | |||
|  | 		show(newVal) { | |||
|  | 			if (this.autoClose) return | |||
|  | 			this.openState(newVal) | |||
|  | 		}, | |||
|  | 		left() { | |||
|  | 			this.moveLeft = `translateX(${this.left}px)` | |||
|  | 		}, | |||
|  | 		buttonShow(newVal) { | |||
|  | 			if (this.autoClose) return | |||
|  | 			this.openState(newVal) | |||
|  | 		}, | |||
|  | 		leftOptions() { | |||
|  | 			this.init() | |||
|  | 		}, | |||
|  | 		rightOptions() { | |||
|  | 			this.init() | |||
|  | 		} | |||
|  | 	}, | |||
|  | 	mounted() { | |||
|  | 		this.swipeaction = this.getSwipeAction() | |||
|  | 		if (this.swipeaction && Array.isArray(this.swipeaction.children)) { | |||
|  | 			this.swipeaction.children.push(this) | |||
|  | 		} | |||
|  | 		this.init() | |||
|  | 	}, | |||
|  | 	methods: { | |||
|  | 		init() { | |||
|  | 			clearTimeout(this.timer) | |||
|  | 			this.timer = setTimeout(() => { | |||
|  | 				this.getSelectorQuery() | |||
|  | 			}, 100) | |||
|  | 			// 移动距离
 | |||
|  | 			this.left = 0 | |||
|  | 			this.x = 0 | |||
|  | 		}, | |||
|  | 
 | |||
|  | 		closeSwipe(e) { | |||
|  | 			if (this.autoClose && this.swipeaction) { | |||
|  | 				this.swipeaction.closeOther(this) | |||
|  | 			} | |||
|  | 		}, | |||
|  | 		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 | |||
|  | 				}) | |||
|  | 			} | |||
|  | 		}, | |||
|  | 		touchstart(e) { | |||
|  | 			if (this.disabled) return | |||
|  | 			this.ani = false | |||
|  | 			this.x = this.left || 0 | |||
|  | 			this.stopTouchStart(e) | |||
|  | 			this.autoClose && this.closeSwipe() | |||
|  | 		}, | |||
|  | 		touchmove(e) { | |||
|  | 			if (this.disabled) return | |||
|  | 			// 是否可以滑动页面
 | |||
|  | 			this.stopTouchMove(e); | |||
|  | 			if (this.direction !== 'horizontal') { | |||
|  | 				return; | |||
|  | 			} | |||
|  | 			this.move(this.x + this.deltaX) | |||
|  | 			return false | |||
|  | 		}, | |||
|  | 		touchend() { | |||
|  | 			if (this.disabled) return | |||
|  | 			this.moveDirection(this.left) | |||
|  | 		}, | |||
|  | 		/** | |||
|  | 		 * 设置移动距离 | |||
|  | 		 * @param {Object} value | |||
|  | 		 */ | |||
|  | 		move(value) { | |||
|  | 			value = value || 0 | |||
|  | 			const leftWidth = this.leftWidth | |||
|  | 			const rightWidth = this.rightWidth | |||
|  | 			// 获取可滑动范围
 | |||
|  | 			this.left = this.range(value, -rightWidth, leftWidth); | |||
|  | 		}, | |||
|  | 
 | |||
|  | 		/** | |||
|  | 		 * 获取范围 | |||
|  | 		 * @param {Object} num | |||
|  | 		 * @param {Object} min | |||
|  | 		 * @param {Object} max | |||
|  | 		 */ | |||
|  | 		range(num, min, max) { | |||
|  | 			return Math.min(Math.max(num, min), max); | |||
|  | 		}, | |||
|  | 		/** | |||
|  | 		 * 移动方向判断 | |||
|  | 		 * @param {Object} left | |||
|  | 		 * @param {Object} value | |||
|  | 		 */ | |||
|  | 		moveDirection(left) { | |||
|  | 			const threshold = this.threshold | |||
|  | 			const isopen = this.isopen || 'none' | |||
|  | 			const leftWidth = this.leftWidth | |||
|  | 			const rightWidth = this.rightWidth | |||
|  | 			if (this.deltaX === 0) { | |||
|  | 				this.openState('none') | |||
|  | 				return | |||
|  | 			} | |||
|  | 			if ((isopen === 'none' && rightWidth > 0 && -left > threshold) || (isopen !== 'none' && rightWidth > | |||
|  | 					0 && rightWidth + | |||
|  | 					left < threshold)) { | |||
|  | 				// right
 | |||
|  | 				this.openState('right') | |||
|  | 			} else if ((isopen === 'none' && leftWidth > 0 && left > threshold) || (isopen !== 'none' && leftWidth > | |||
|  | 					0 && | |||
|  | 					leftWidth - left < threshold)) { | |||
|  | 				// left
 | |||
|  | 				this.openState('left') | |||
|  | 			} else { | |||
|  | 				// default
 | |||
|  | 				this.openState('none') | |||
|  | 			} | |||
|  | 		}, | |||
|  | 
 | |||
|  | 		/** | |||
|  | 		 * 开启状态 | |||
|  | 		 * @param {Boolean} type | |||
|  | 		 */ | |||
|  | 		openState(type) { | |||
|  | 			const leftWidth = this.leftWidth | |||
|  | 			const rightWidth = this.rightWidth | |||
|  | 			let left = '' | |||
|  | 			this.isopen = this.isopen ? this.isopen : 'none' | |||
|  | 			switch (type) { | |||
|  | 				case "left": | |||
|  | 					left = leftWidth | |||
|  | 					break | |||
|  | 				case "right": | |||
|  | 					left = -rightWidth | |||
|  | 					break | |||
|  | 				default: | |||
|  | 					left = 0 | |||
|  | 			} | |||
|  | 
 | |||
|  | 
 | |||
|  | 			if (this.isopen !== type) { | |||
|  | 				this.throttle = true | |||
|  | 				this.$emit('change', type) | |||
|  | 			} | |||
|  | 
 | |||
|  | 			this.isopen = type | |||
|  | 			// 添加动画类
 | |||
|  | 			this.ani = true | |||
|  | 			this.$nextTick(() => { | |||
|  | 				this.move(left) | |||
|  | 			}) | |||
|  | 			// 设置最终移动位置,理论上只要进入到这个函数,肯定是要打开的
 | |||
|  | 		}, | |||
|  | 		close() { | |||
|  | 			this.openState('none') | |||
|  | 		}, | |||
|  | 		getDirection(x, y) { | |||
|  | 			if (x > y && x > MIN_DISTANCE) { | |||
|  | 				return 'horizontal'; | |||
|  | 			} | |||
|  | 			if (y > x && y > MIN_DISTANCE) { | |||
|  | 				return 'vertical'; | |||
|  | 			} | |||
|  | 			return ''; | |||
|  | 		}, | |||
|  | 
 | |||
|  | 		/** | |||
|  | 		 * 重置滑动状态 | |||
|  | 		 * @param {Object} event | |||
|  | 		 */ | |||
|  | 		resetTouchStatus() { | |||
|  | 			this.direction = ''; | |||
|  | 			this.deltaX = 0; | |||
|  | 			this.deltaY = 0; | |||
|  | 			this.offsetX = 0; | |||
|  | 			this.offsetY = 0; | |||
|  | 		}, | |||
|  | 
 | |||
|  | 		/** | |||
|  | 		 * 设置滑动开始位置 | |||
|  | 		 * @param {Object} event | |||
|  | 		 */ | |||
|  | 		stopTouchStart(event) { | |||
|  | 			this.resetTouchStatus(); | |||
|  | 			const touch = event.touches[0]; | |||
|  | 			this.startX = touch.clientX; | |||
|  | 			this.startY = touch.clientY; | |||
|  | 		}, | |||
|  | 
 | |||
|  | 		/** | |||
|  | 		 * 滑动中,是否禁止打开 | |||
|  | 		 * @param {Object} event | |||
|  | 		 */ | |||
|  | 		stopTouchMove(event) { | |||
|  | 			const touch = event.touches[0]; | |||
|  | 			this.deltaX = touch.clientX - this.startX; | |||
|  | 			this.deltaY = touch.clientY - this.startY; | |||
|  | 			this.offsetX = Math.abs(this.deltaX); | |||
|  | 			this.offsetY = Math.abs(this.deltaY); | |||
|  | 			this.direction = this.direction || this.getDirection(this.offsetX, this.offsetY); | |||
|  | 		}, | |||
|  | 
 | |||
|  | 		getSelectorQuery() { | |||
|  | 			const views = uni.createSelectorQuery().in(this) | |||
|  | 			views | |||
|  | 				.selectAll('.' + this.elClass) | |||
|  | 				.boundingClientRect(data => { | |||
|  | 					if (data.length === 0) return | |||
|  | 					let show = 'none' | |||
|  | 					if (this.autoClose) { | |||
|  | 						show = 'none' | |||
|  | 					} else { | |||
|  | 						show = this.show | |||
|  | 					} | |||
|  | 					this.leftWidth = data[0].width || 0 | |||
|  | 					this.rightWidth = data[1].width || 0 | |||
|  | 					this.buttonShow = show | |||
|  | 				}) | |||
|  | 				.exec() | |||
|  | 		} | |||
|  | 	} | |||
|  | } | |||
|  | 
 | |||
|  | // #endif
 | |||
|  | 
 | |||
|  | export default otherMixins |