data() {
   return {
      listEle: null, // dom元素
      // 記錄坐標(biāo)
      touchX: "",
      touchY: "",
      // 滑動(dòng)坐標(biāo)
      startX: 0,
      startY: 0,
      // 滑動(dòng)方向
      direction: "",
    };
  }

  mounted() {
    /* 獲取dom元素 這里最好不要用原生的dom獲取方式 */
    this.listEle = this.$refs.main;
    /* 自己實(shí)現(xiàn)滾動(dòng)效果 不會(huì)出現(xiàn)滾動(dòng)回彈問(wèn)題 但是滾動(dòng)不絲滑了且沒(méi)有慣性 */
    this.listEle.addEventListener("touchstart", this.touchstart, false);
    this.listEle.addEventListener("touchmove", this.touchmove, false);
    this.listEle.addEventListener("touchend", this.touchend, false);
  },
  methods:{
    /* 修改 瀏覽器默認(rèn)的滑動(dòng)容器行為 */
    // 1，手指接觸屏幕
    touchstart(event) {
      this.touchX = event.changedTouches[0].clientX;
      this.touchY = event.changedTouches[0].clientY;
      // 獲取此刻手指的橫坐標(biāo)startX和縱坐標(biāo)startY
      this.startX = event.touches[0].pageX;
      this.startY = event.touches[0].pageY;
    },
    // 2, 手指滑動(dòng)的過(guò)程
    touchmove(event) {
      event.preventDefault();
      // 計(jì)算手指偏移量
      const offsetX = event.changedTouches[0].clientX - this.touchX;
      const offsetY = event.changedTouches[0].clientY - this.touchY;

      // 觸摸的坐標(biāo)
      this.touchX = event.changedTouches[0].clientX;
      this.touchY = event.changedTouches[0].clientY;

      // 手指滑動(dòng)的方向 
      let moveEndX = event.changedTouches[0].pageX;
      let moveEndY = event.changedTouches[0].pageY;
      let X = moveEndX - this.startX;
      let Y = moveEndY - this.startY;
      // 注意 上下移動(dòng)只能是上劃或下劃  左右移動(dòng)也是同理
      if (Math.abs(X) > Math.abs(Y) && X > 0) {
        // 開始移動(dòng)
         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;
        /* 設(shè)置滾動(dòng)到底的處理 */
        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";
        /* 設(shè)置滾動(dòng)到底的處理 */
        this.scrollBottom(event);
      } else {
        this.direction = "";
      }
    },
    // 3，手指離開屏幕
    touchend(event) {
      this.touchX = event.changedTouches[0].clientX;
      this.touchY = event.changedTouches[0].clientY;
      // TODO  此處可以進(jìn)行優(yōu)化滾動(dòng)的慣性 暫未實(shí)現(xiàn)
    },
    // 監(jiān)聽(tīng)滾動(dòng)條  注意 scroll 可能是橫向滾動(dòng)條 也可能是縱向滾動(dòng)條
    scrollBottom(event) {
      // 1，可視區(qū)域
      let clientHeight = this.listEle.clientHeight;
      // 2，滾動(dòng)文檔高度
      let scrollHeight = this.listEle.scrollHeight;
      // 3，此處相等說(shuō)明：沒(méi)有縱向滾動(dòng)條  可能出現(xiàn)了橫向滾動(dòng)條 所以要忽略
      if (clientHeight == scrollHeight) {
        return;
      }
      // 4，已滾動(dòng)的高度
      let scrollTop = parseInt(this.listEle.scrollTop);
      // 這里 -2 是為了控制誤差
      if (scrollTop + clientHeight >= scrollHeight - 2) {
        console.log("滾動(dòng)到底了");
        // 把事件傳出去 父元素開始請(qǐng)求下一頁(yè)的數(shù)據(jù)
        this.$emit("scrollBottom");
      }
    },

  }

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