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  此處可以進行優(yōu)化滾動的慣性 暫未實現
    },
    // 監(jiān)聽滾動條  注意 scroll 可能是橫向滾動條 也可能是縱向滾動條
    scrollBottom(event) {
      // 1，可視區(qū)域
      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); 
}