mirror of
				https://gitee.com/hhyykk/ipms-sjy.git
				synced 2025-11-04 20:28:44 +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();
 | 
						||
 | 
						||
		}
 | 
						||
	}
 | 
						||
}
 |