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