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.
160 lines
2.7 KiB
160 lines
2.7 KiB
export default { |
|
data() { |
|
return { |
|
isshow: false, |
|
viewWidth: 0, |
|
buttonWidth: 0, |
|
disabledView: false, |
|
x: 0, |
|
transition: false |
|
} |
|
}, |
|
watch: { |
|
show(newVal) { |
|
if (this.autoClose) return |
|
if (newVal) { |
|
this.open() |
|
} else { |
|
this.close() |
|
} |
|
}, |
|
}, |
|
created() { |
|
if (this.swipeaction.children !== undefined) { |
|
this.swipeaction.children.push(this) |
|
} |
|
}, |
|
beforeDestroy() { |
|
this.swipeaction.children.forEach((item, index) => { |
|
if (item === this) { |
|
this.swipeaction.children.splice(index, 1) |
|
} |
|
}) |
|
}, |
|
mounted() { |
|
this.isopen = false |
|
this.transition = true |
|
setTimeout(() => { |
|
this.getQuerySelect() |
|
}, 50) |
|
|
|
}, |
|
methods: { |
|
onClick(index, item) { |
|
this.$emit('click', { |
|
content: item, |
|
index |
|
}) |
|
}, |
|
touchstart(e) { |
|
let { |
|
pageX, |
|
pageY |
|
} = e.changedTouches[0] |
|
this.transition = false |
|
this.startX = pageX |
|
if (this.autoClose) { |
|
this.swipeaction.closeOther(this) |
|
} |
|
}, |
|
touchmove(e) { |
|
let { |
|
pageX, |
|
} = e.changedTouches[0] |
|
this.slide = this.getSlide(pageX) |
|
if (this.slide === 0) { |
|
this.disabledView = false |
|
} |
|
|
|
}, |
|
touchend(e) { |
|
this.stop = false |
|
this.transition = true |
|
if (this.isopen) { |
|
if (this.moveX === -this.buttonWidth) { |
|
this.close() |
|
return |
|
} |
|
this.move() |
|
} else { |
|
if (this.moveX === 0) { |
|
this.close() |
|
return |
|
} |
|
this.move() |
|
} |
|
}, |
|
open() { |
|
this.x = this.moveX |
|
this.$nextTick(() => { |
|
this.x = -this.buttonWidth |
|
this.moveX = this.x |
|
|
|
if(!this.isopen){ |
|
this.isopen = true |
|
this.$emit('change', true) |
|
} |
|
}) |
|
}, |
|
close() { |
|
this.x = this.moveX |
|
this.$nextTick(() => { |
|
this.x = 0 |
|
this.moveX = this.x |
|
if(this.isopen){ |
|
this.isopen = false |
|
this.$emit('change', false) |
|
} |
|
}) |
|
}, |
|
move() { |
|
if (this.slide === 0) { |
|
this.open() |
|
} else { |
|
this.close() |
|
} |
|
}, |
|
onChange(e) { |
|
let x = e.detail.x |
|
this.moveX = x |
|
if (x >= this.buttonWidth) { |
|
this.disabledView = true |
|
this.$nextTick(() => { |
|
this.x = this.buttonWidth |
|
}) |
|
} |
|
}, |
|
getSlide(x) { |
|
if (x >= this.startX) { |
|
this.startX = x |
|
return 1 |
|
} else { |
|
this.startX = x |
|
return 0 |
|
} |
|
|
|
}, |
|
getQuerySelect() { |
|
const query = uni.createSelectorQuery().in(this); |
|
query.selectAll('.viewWidth-hook').boundingClientRect(data => { |
|
|
|
this.viewWidth = data[0].width |
|
this.buttonWidth = data[1].width |
|
this.transition = false |
|
this.$nextTick(() => { |
|
this.transition = true |
|
}) |
|
|
|
if (!this.buttonWidth) { |
|
this.disabledView = true |
|
} |
|
|
|
if (this.autoClose) return |
|
if (this.show) { |
|
this.open() |
|
} |
|
}).exec(); |
|
|
|
} |
|
} |
|
}
|
|
|