<template>
<div class="all-body">
<div class="sliper-content"></div>
<div class="other-content"></div>
</div>
</template>
<script lang="ts">
import { Vue, Options } from 'vue-class-component'
@Options({
data () {
return {
startX: 0,
startY: 0,
moveEndX: 0,
moveEndY: 0,
X: 0,
Y: 0
}
},
// watch: {
//
// },
computed: {},
methods: {},
mounted () {
const element = document.getElementsByClassName('sliper-content')[0]
element.addEventListener('touchstart', (e) => {
// e.preventDefault()
// @ts-ignore
this.startX = e.touches[0].pageX
// @ts-ignore
this.startY = e.touches[0].pageY
console.log(this.startX, 'startX')
console.log(this.startY, 'startY')
}, false)
element.addEventListener('touchmove', (e) => {
// e.preventDefault()
// @ts-ignore
this.moveEndX = e.changedTouches[0].pageX
// @ts-ignore
this.moveEndY = e.changedTouches[0].pageY
console.log(this.moveEndX, 'moveEndX')
console.log(this.moveEndY, 'moveEndY')
this.X = this.moveEndX - this.startX
this.Y = this.moveEndY - this.startY
console.log(this.X, 'X')
console.log(this.Y, 'Y')
if (Math.abs(this.Y) > Math.abs(this.X) && this.Y > 0) {
if (this.Y >= 150) {
// @ts-ignore
element.style.height = '400px'
}
} else if (Math.abs(this.Y) > Math.abs(this.X) && this.Y < 0) {
if (this.Y <= -150) {
// @ts-ignore
element.style.height = '200px'
}
}
})
}
})
export default class MobileTest extends Vue {
}
</script>
<style lang="less" scoped>
.all-body {
width: 100%;
height: 100%;
display: flex;
}
.sliper-content {
height: 200px;
width: 100%;
background: #0d84ff;
}
.other-content {
flex: 1;
}
</style>
Vue手机版原生下拉滑动事件控制
最新推荐文章于 2024-06-27 14:56:52 发布