下拉

<template>
  <div></div>
</template>

<script>
export default {
  data () {
    return {
      // 起始坐标
      startY: 0,
      // 抬起坐标
      endY: 0,
      // 等待时间
      delay: 100,
      // 一次埋点标记
      isNoTrack: false,
      // scroll
      scrollTimer: null,
      // 目标盒子
      targetBox: '',
      // 第一次start
      startOne: false,
      startT: 0,
      endT: 0,
      distanceT: 0
    }
  },
  mounted () {
    this.addTouchEvevt()
    this.$nextTick(() => {
      this.setScrollDownStatus()
    })
  },
  methods: {
    // 下拉埋点的状态控制
    setScrollDownStatus () {
      this.targetBox = document.getElementById('id')
      this.targetBox.addEventListener('scroll', this.onscroll, false)
    },
    addTouchEvevt () {
      if (this.isNoTrack) return
      document.addEventListener('touchstart', this.touchstart, false)
      document.addEventListener('touchmove', this.touchmove, false)
      document.addEventListener('touchend', this.touchend, false)
    },
    touchstart (e) {
      if (this.startOne) return
      this.startOne = true
      this.startY = (e.targetTouches && e.targetTouches[0] && e.targetTouches[0].pageY) || 0
      this.startT = (new Date()).getTime()
    },
    touchmove (e) {
      this.endY = (e.targetTouches && e.targetTouches[0] && e.targetTouches[0].pageY) || 0
    },
    touchend (e) {
      this.startOne = false
      let distanceY = this.endY - this.startY
      this.endT = (new Date()).getTime()
      this.distanceT = this.endT - this.startT
      if (distanceY > 20 && this.distanceT > 500) {
        // 只执行一次
        this.isNoTrack = true
        this.targetBox.removeEventListener('scroll', this.onscroll)
        this.removeTouchEvevt()
      }
    },
    removeTouchEvevt () {
      document.removeEventListener('touchstart', this.touchstart)
      document.removeEventListener('touchmove', this.touchmove)
      document.removeEventListener('touchend', this.touchend)
    },
    onscroll (e) {
      if (this.scrollTimer) return
      this.scrollTimer = setTimeout(() => {
        this.scrollTimer = null
        // 下拉埋点移除touch事件
        if (e.target.scrollTop > 80) {
          this.removeTouchEvevt()
        } else {
          this.addTouchEvevt()
        }
      }, 300)
    }
  },
  destroyed () {
    this.removeTouchEvevt()
    this.targetBox.removeEventListener('scroll', this.onscroll)
  }
}
</script>