js使用touchstart touchmove touchend函数实现h5移动端上下滑动翻页

<template>
  <div class="address-list">
    <div class="search-list">
      <div class="slide-bar" @touchstart="touchstart" @touchmove="touchmove" @touchend="touchend">
        <p>p>
      div>
      <div class="list">
        <div ref="refList" id="refList" :class="['content']">
          <van-tabs color="#2F8EFF" title-active-color="#2F8EFF" v-model="model" @change="onChange">
            <van-tab v-for="item in tabInfo" :key="item.title" :title="item.title">
              <div class="list-wrap" :key="siteType" v-if="list.length">
                <virtual-list
                  id="list"
                  :style="{ height: `${height - 60}px`, overflowY: 'auto' }"
                  :data-key="'unid'"
                  :data-sources="list"
                  :data-component="ListItem"
                  :estimate-size="126"
                  :keeps="10"
                >
                  <div slot="footer" class="noMore">～没有更多了～div>
                virtual-list>
              div>
              <div v-if="!list.length" class="noMore" :style="{ marginTop: '25%' }">～暂无数据～div>
            van-tab>
          van-tabs>
        div>
      div>
    div>
  div>
template>

<script>
// 虚拟滚动，解决数组大量卡顿问题
import VirtualList from 'vue-virtual-scroll-list' 

import ListItem from './ListItem.vue'
import { onCall, onMap } from '@/utils/index'

const clientHeight = document.documentElement.clientHeight // 设备屏幕高度
const high = clientHeight * 0.6 // 列表上移高度
const low = 240 // 列表下移高度
const step = 6 // 每次平移的距离

export default {
  name: 'List',
  components: {
    VirtualList
  },
  props: {
    list: {
      type: Array,
      default: () => []
    },
    siteType: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      ListItem,
      height: high,
      onCall,
      onMap,
      active: 0,
      tabInfo: [{ title: 'tab1' }, { title: 'tab2' }],
      currentPageY: null,
      slicePageY: null,
      interval: null
    }
  },
  computed: {
    userInfo() {
      return this.$store?.getters?.userInfo || {}
    },
    model: {
      get() {
        return this.siteType
      },
      set(val) {
        return val
      }
    }
  },
  watch: {},
  created() {},
  mounted() {
    const element = document.getElementsByClassName('van-tabs__wrap')[0]
    element.addEventListener('touchstart', this.touchstart, false)
    element.addEventListener('touchmove', this.touchmove, false)
    element.addEventListener('touchend', this.touchend, false)
    this.$refs.refList.style.height = low + 'px'
  },
  beforeDestroy() {
    if (this.interval) clearInterval(this.interval)
  },
  methods: {
    // 上下滑动
    touchstart(e) {
      const { pageY } = e.touches[0] || {}
      // 记录当前点击点距离页面顶部距离
      this.currentPageY = pageY
      // 记录列表元素的高度
      this.refListHeight = this.$refs.refList.offsetHeight
    },
    touchmove(e) {
      // 这里写true是为了保证move的时候进行向上或者向下移动
      // 点击的时候是不会执行move方法的
      this.interval = true
      const { pageY } = e.touches[0] || {}
      // 记录移动式距离页面顶端距离
      this.slicePageY = pageY
      // 列表高度 = 开始滑动列表元素高度 + 开始滑动时顶部距离 - 当前距离顶部的距离
      const height = this.currentPageY + this.refListHeight - pageY
      // 滑动多高列表的高度就有多高
      if (height >= low && height <= high) {
        this.$refs.refList.style.height = height + 'px'
      }
    },
    touchend(e) {
      console.log('touch', 10)
      const _this = this
      const refListHeight = this.$refs.refList.offsetHeight
      let currentHeight = refListHeight
      if (this.interval === null) return
      if (this.interval) clearInterval(this.interval)
      if (this.slicePageY > this.currentPageY) {
        // 往下滑动
        this.interval = setInterval(() => {
          if (currentHeight > low) {
            currentHeight -= step
            _this.$refs.refList.style.height = currentHeight + 'px'
          } else {
            clearInterval(this.interval)
            this.interval = null
          }
        }, 1)
      } else if (this.slicePageY < this.currentPageY) {
        // 往上滑动
        this.interval = setInterval(() => {
          if (currentHeight < high) {
            currentHeight += step
            _this.$refs.refList.style.height = currentHeight + 'px'
          } else {
            clearInterval(this.interval)
            this.interval = null
          }
        }, 1)
      }
    },
    onChange(index) {
      this.$emit('tabChange', index)
      this.interval = null
    }
  }
}
</script>