mpalipay.js

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

		}
	}
}