161 lines
2.8 KiB
JavaScript
161 lines
2.8 KiB
JavaScript
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();
|
|
|
|
}
|
|
}
|
|
}
|