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