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