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