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.
260 lines
5.5 KiB
260 lines
5.5 KiB
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
|
|
|