You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
195 lines
4.0 KiB
195 lines
4.0 KiB
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 && Array.isArray(this.swipeaction.children)) { |
|
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 |
|
if (this.autoClose && this.swipeaction) { |
|
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(); |
|
|
|
} |
|
} |
|
}
|
|
|