261 lines
		
	
	
		
			5.5 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
			
		
		
	
	
			261 lines
		
	
	
		
			5.5 KiB
		
	
	
	
		
			JavaScript
		
	
	
	
	
	
| let otherMixins = {}
 | ||
| 
 | ||
| // #ifndef APP-PLUS|| MP-WEIXIN  ||  H5
 | ||
| const MIN_DISTANCE = 10;
 | ||
| otherMixins = {
 | ||
| 	data() {
 | ||
| 		// TODO 随机生生元素ID,解决百度小程序获取同一个元素位置信息的bug
 | ||
| 		const elClass = `Uni_${Math.ceil(Math.random() * 10e5).toString(36)}`
 | ||
| 		return {
 | ||
| 			uniShow: false,
 | ||
| 			left: 0,
 | ||
| 			buttonShow: 'none',
 | ||
| 			ani: false,
 | ||
| 			moveLeft: '',
 | ||
| 			elClass
 | ||
| 		}
 | ||
| 	},
 | ||
| 	watch: {
 | ||
| 		show(newVal) {
 | ||
| 			if (this.autoClose) return
 | ||
| 			this.openState(newVal)
 | ||
| 		},
 | ||
| 		left() {
 | ||
| 			this.moveLeft = `translateX(${this.left}px)`
 | ||
| 		},
 | ||
| 		buttonShow(newVal) {
 | ||
| 			if (this.autoClose) return
 | ||
| 			this.openState(newVal)
 | ||
| 		},
 | ||
| 		leftOptions() {
 | ||
| 			this.init()
 | ||
| 		},
 | ||
| 		rightOptions() {
 | ||
| 			this.init()
 | ||
| 		}
 | ||
| 	},
 | ||
| 	mounted() {
 | ||
| 		this.swipeaction = this.getSwipeAction()
 | ||
| 		if (this.swipeaction && Array.isArray(this.swipeaction.children)) {
 | ||
| 			this.swipeaction.children.push(this)
 | ||
| 		}
 | ||
| 		this.init()
 | ||
| 	},
 | ||
| 	methods: {
 | ||
| 		init() {
 | ||
| 			clearTimeout(this.timer)
 | ||
| 			this.timer = setTimeout(() => {
 | ||
| 				this.getSelectorQuery()
 | ||
| 			}, 100)
 | ||
| 			// 移动距离
 | ||
| 			this.left = 0
 | ||
| 			this.x = 0
 | ||
| 		},
 | ||
| 
 | ||
| 		closeSwipe(e) {
 | ||
| 			if (this.autoClose && this.swipeaction) {
 | ||
| 				this.swipeaction.closeOther(this)
 | ||
| 			}
 | ||
| 		},
 | ||
| 		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
 | ||
| 				})
 | ||
| 			}
 | ||
| 		},
 | ||
| 		touchstart(e) {
 | ||
| 			if (this.disabled) return
 | ||
| 			this.ani = false
 | ||
| 			this.x = this.left || 0
 | ||
| 			this.stopTouchStart(e)
 | ||
| 			this.autoClose && this.closeSwipe()
 | ||
| 		},
 | ||
| 		touchmove(e) {
 | ||
| 			if (this.disabled) return
 | ||
| 			// 是否可以滑动页面
 | ||
| 			this.stopTouchMove(e);
 | ||
| 			if (this.direction !== 'horizontal') {
 | ||
| 				return;
 | ||
| 			}
 | ||
| 			this.move(this.x + this.deltaX)
 | ||
| 			return false
 | ||
| 		},
 | ||
| 		touchend() {
 | ||
| 			if (this.disabled) return
 | ||
| 			this.moveDirection(this.left)
 | ||
| 		},
 | ||
| 		/**
 | ||
| 		 * 设置移动距离
 | ||
| 		 * @param {Object} value
 | ||
| 		 */
 | ||
| 		move(value) {
 | ||
| 			value = value || 0
 | ||
| 			const leftWidth = this.leftWidth
 | ||
| 			const rightWidth = this.rightWidth
 | ||
| 			// 获取可滑动范围
 | ||
| 			this.left = this.range(value, -rightWidth, leftWidth);
 | ||
| 		},
 | ||
| 
 | ||
| 		/**
 | ||
| 		 * 获取范围
 | ||
| 		 * @param {Object} num
 | ||
| 		 * @param {Object} min
 | ||
| 		 * @param {Object} max
 | ||
| 		 */
 | ||
| 		range(num, min, max) {
 | ||
| 			return Math.min(Math.max(num, min), max);
 | ||
| 		},
 | ||
| 		/**
 | ||
| 		 * 移动方向判断
 | ||
| 		 * @param {Object} left
 | ||
| 		 * @param {Object} value
 | ||
| 		 */
 | ||
| 		moveDirection(left) {
 | ||
| 			const threshold = this.threshold
 | ||
| 			const isopen = this.isopen || 'none'
 | ||
| 			const leftWidth = this.leftWidth
 | ||
| 			const rightWidth = this.rightWidth
 | ||
| 			if (this.deltaX === 0) {
 | ||
| 				this.openState('none')
 | ||
| 				return
 | ||
| 			}
 | ||
| 			if ((isopen === 'none' && rightWidth > 0 && -left > threshold) || (isopen !== 'none' && rightWidth >
 | ||
| 					0 && rightWidth +
 | ||
| 					left < threshold)) {
 | ||
| 				// right
 | ||
| 				this.openState('right')
 | ||
| 			} else if ((isopen === 'none' && leftWidth > 0 && left > threshold) || (isopen !== 'none' && leftWidth >
 | ||
| 					0 &&
 | ||
| 					leftWidth - left < threshold)) {
 | ||
| 				// left
 | ||
| 				this.openState('left')
 | ||
| 			} else {
 | ||
| 				// default
 | ||
| 				this.openState('none')
 | ||
| 			}
 | ||
| 		},
 | ||
| 
 | ||
| 		/**
 | ||
| 		 * 开启状态
 | ||
| 		 * @param {Boolean} type
 | ||
| 		 */
 | ||
| 		openState(type) {
 | ||
| 			const leftWidth = this.leftWidth
 | ||
| 			const rightWidth = this.rightWidth
 | ||
| 			let left = ''
 | ||
| 			this.isopen = this.isopen ? this.isopen : 'none'
 | ||
| 			switch (type) {
 | ||
| 				case "left":
 | ||
| 					left = leftWidth
 | ||
| 					break
 | ||
| 				case "right":
 | ||
| 					left = -rightWidth
 | ||
| 					break
 | ||
| 				default:
 | ||
| 					left = 0
 | ||
| 			}
 | ||
| 
 | ||
| 
 | ||
| 			if (this.isopen !== type) {
 | ||
| 				this.throttle = true
 | ||
| 				this.$emit('change', type)
 | ||
| 			}
 | ||
| 
 | ||
| 			this.isopen = type
 | ||
| 			// 添加动画类
 | ||
| 			this.ani = true
 | ||
| 			this.$nextTick(() => {
 | ||
| 				this.move(left)
 | ||
| 			})
 | ||
| 			// 设置最终移动位置,理论上只要进入到这个函数,肯定是要打开的
 | ||
| 		},
 | ||
| 		close() {
 | ||
| 			this.openState('none')
 | ||
| 		},
 | ||
| 		getDirection(x, y) {
 | ||
| 			if (x > y && x > MIN_DISTANCE) {
 | ||
| 				return 'horizontal';
 | ||
| 			}
 | ||
| 			if (y > x && y > MIN_DISTANCE) {
 | ||
| 				return 'vertical';
 | ||
| 			}
 | ||
| 			return '';
 | ||
| 		},
 | ||
| 
 | ||
| 		/**
 | ||
| 		 * 重置滑动状态
 | ||
| 		 * @param {Object} event
 | ||
| 		 */
 | ||
| 		resetTouchStatus() {
 | ||
| 			this.direction = '';
 | ||
| 			this.deltaX = 0;
 | ||
| 			this.deltaY = 0;
 | ||
| 			this.offsetX = 0;
 | ||
| 			this.offsetY = 0;
 | ||
| 		},
 | ||
| 
 | ||
| 		/**
 | ||
| 		 * 设置滑动开始位置
 | ||
| 		 * @param {Object} event
 | ||
| 		 */
 | ||
| 		stopTouchStart(event) {
 | ||
| 			this.resetTouchStatus();
 | ||
| 			const touch = event.touches[0];
 | ||
| 			this.startX = touch.clientX;
 | ||
| 			this.startY = touch.clientY;
 | ||
| 		},
 | ||
| 
 | ||
| 		/**
 | ||
| 		 * 滑动中,是否禁止打开
 | ||
| 		 * @param {Object} event
 | ||
| 		 */
 | ||
| 		stopTouchMove(event) {
 | ||
| 			const touch = event.touches[0];
 | ||
| 			this.deltaX = touch.clientX - this.startX;
 | ||
| 			this.deltaY = touch.clientY - this.startY;
 | ||
| 			this.offsetX = Math.abs(this.deltaX);
 | ||
| 			this.offsetY = Math.abs(this.deltaY);
 | ||
| 			this.direction = this.direction || this.getDirection(this.offsetX, this.offsetY);
 | ||
| 		},
 | ||
| 
 | ||
| 		getSelectorQuery() {
 | ||
| 			const views = uni.createSelectorQuery().in(this)
 | ||
| 			views
 | ||
| 				.selectAll('.' + this.elClass)
 | ||
| 				.boundingClientRect(data => {
 | ||
| 					if (data.length === 0) return
 | ||
| 					let show = 'none'
 | ||
| 					if (this.autoClose) {
 | ||
| 						show = 'none'
 | ||
| 					} else {
 | ||
| 						show = this.show
 | ||
| 					}
 | ||
| 					this.leftWidth = data[0].width || 0
 | ||
| 					this.rightWidth = data[1].width || 0
 | ||
| 					this.buttonShow = show
 | ||
| 				})
 | ||
| 				.exec()
 | ||
| 		}
 | ||
| 	}
 | ||
| }
 | ||
| 
 | ||
| // #endif
 | ||
| 
 | ||
| export default otherMixins
 |