vue项目中解决 IOS + H5 滑动边界橡皮筋弹性效果(解决思路)

  data() {
   return {
      listEle: null, // dom元素
      // 记录坐标
      touchX: "",
      touchY: "",
      // 滑动坐标
      startX: 0,
      startY: 0,
      // 滑动方向
      direction: "",
    };
  }

  mounted() {
    /* 获取dom元素 这里最好不要用原生的dom获取方式 */
    this.listEle = this.$refs.main;
    /* 自己实现滚动效果 不会出现滚动回弹问题 但是滚动不丝滑了且没有惯性 */
    this.listEle.addEventListener("touchstart", this.touchstart, false);
    this.listEle.addEventListener("touchmove", this.touchmove, false);
    this.listEle.addEventListener("touchend", this.touchend, false);
  },
  methods:{
    /* 修改 浏览器默认的滑动容器行为 */
    // 1，手指接触屏幕
    touchstart(event) {
      this.touchX = event.changedTouches[0].clientX;
      this.touchY = event.changedTouches[0].clientY;
      // 获取此刻手指的横坐标startX和纵坐标startY
      this.startX = event.touches[0].pageX;
      this.startY = event.touches[0].pageY;
    },
    // 2, 手指滑动的过程
    touchmove(event) {
      event.preventDefault();
      // 计算手指偏移量
      const offsetX = event.changedTouches[0].clientX - this.touchX;
      const offsetY = event.changedTouches[0].clientY - this.touchY;

      // 触摸的坐标
      this.touchX = event.changedTouches[0].clientX;
      this.touchY = event.changedTouches[0].clientY;

      // 手指滑动的方向 
      let moveEndX = event.changedTouches[0].pageX;
      let moveEndY = event.changedTouches[0].pageY;
      let X = moveEndX - this.startX;
      let Y = moveEndY - this.startY;
      // 注意 上下移动只能是上划或下划  左右移动也是同理
      if (Math.abs(X) > Math.abs(Y) && X > 0) {
        // 开始移动
         console.log('我向右滑了)
        this.listEle.scrollLeft = this.listEle.scrollLeft - offsetX;
        this.direction = "right";
      } else if (Math.abs(X) > Math.abs(Y) && X < 0) {
       	console.log('我向左滑了)
        this.listEle.scrollLeft = this.listEle.scrollLeft - offsetX;
        this.direction = "left";
      } else if (Math.abs(Y) > Math.abs(X) && Y > 0) {
      	console.log('我向下滑了)
        this.listEle.scrollTop = this.listEle.scrollTop - offsetY;
        /* 设置滚动到底的处理 */
        this.scrollBottom(event);
        this.direction = "bottom";
      } else if (Math.abs(Y) > Math.abs(X) && Y < 0) {
      	console.log('我向上滑了)
        this.listEle.scrollTop = this.listEle.scrollTop - offsetY;
        this.direction = "top";
        /* 设置滚动到底的处理 */
        this.scrollBottom(event);
      } else {
        this.direction = "";
      }
    },
    // 3，手指离开屏幕
    touchend(event) {
      this.touchX = event.changedTouches[0].clientX;
      this.touchY = event.changedTouches[0].clientY;
      // TODO  此处可以进行优化滚动的惯性 暂未实现
    },
    // 监听滚动条  注意 scroll 可能是横向滚动条 也可能是纵向滚动条
    scrollBottom(event) {
      // 1，可视区域
      let clientHeight = this.listEle.clientHeight;
      // 2，滚动文档高度
      let scrollHeight = this.listEle.scrollHeight;
      // 3，此处相等说明：没有纵向滚动条  可能出现了横向滚动条 所以要忽略
      if (clientHeight == scrollHeight) {
        return;
      }
      // 4，已滚动的高度
      let scrollTop = parseInt(this.listEle.scrollTop);
      // 这里 -2 是为了控制误差
      if (scrollTop + clientHeight >= scrollHeight - 2) {
        console.log("滚动到底了");
        // 把事件传出去 父元素开始请求下一页的数据
        this.$emit("scrollBottom");
      }
    },

  }

mounted(){
  /* 设置接口防抖 */
    this.scrollBottom= _.debounce(this.scrollBottom, 500); 
}