Vue手机版原生下拉滑动事件控制

<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>