| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193 | 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();		}	}}
 |