89 lines
1.6 KiB
Vue
89 lines
1.6 KiB
Vue
<template>
|
|
<view @touchstart="touchstart" @touchend="touchend" @touchmove="touchmove">
|
|
<slot></slot>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped>
|
|
</style>
|
|
<script>
|
|
export default {
|
|
emits: ['start', 'toleft', 'toright', 'todown', 'toup', 'end'],
|
|
props: {
|
|
pxlen: { //滑动距离超过pxlen px生效
|
|
type: Number,
|
|
default: 40
|
|
},
|
|
move: { //产生移动过程事件
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
watch: {},
|
|
computed: {},
|
|
mounted() {},
|
|
methods: {
|
|
touchstart(e) {
|
|
this.$emit('start', e.touches[0]);
|
|
this.startx = e.touches[0].pageX;
|
|
this.starty = e.touches[0].pageY;
|
|
this.movex = e.touches[0].pageX;
|
|
this.movey = e.touches[0].pageY;
|
|
this.st = true;
|
|
},
|
|
touchend(e) {
|
|
this.st = false;
|
|
var x = this.movex - this.startx;
|
|
var y = this.movey - this.starty;
|
|
var needend = true;
|
|
if (Math.abs(x) > this.pxlen) {
|
|
if (x < 0)
|
|
this.$emit('toleft', {
|
|
x,
|
|
y
|
|
});
|
|
else
|
|
this.$emit('toright', {
|
|
x,
|
|
y
|
|
});
|
|
needend = false;
|
|
}
|
|
if (Math.abs(y) > this.pxlen) {
|
|
if (y > 0)
|
|
this.$emit('todown', {
|
|
x,
|
|
y
|
|
});
|
|
else
|
|
this.$emit('toup', {
|
|
x,
|
|
y
|
|
});
|
|
needend = false;
|
|
}
|
|
if (needend) {
|
|
this.$emit('end', {
|
|
x,
|
|
y
|
|
});
|
|
}
|
|
},
|
|
touchmove(e) {
|
|
if (!this.st)
|
|
return;
|
|
this.movex = e.touches[0].pageX;
|
|
this.movey = e.touches[0].pageY;
|
|
if (!this.move)
|
|
return;
|
|
this.$emit('tomove', {
|
|
x: this.movex - this.startx,
|
|
y: this.movey - this.starty
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script> |