vue触底加载实例（适用移动端）

vue触底加载实例（适用移动端）

export default {
  name: "home",
  data() {
    return {
      pageNum: 1,
      pageSum: "", //共多少页
      myList: [],
      loading: false,
      pageStatus: false,
      tips: "" //底部提示
    };
  },
  created() {
    this.getMyList();
    // 滚动页面时触发
    window.addEventListener("scroll", this.scrollBottom);
  },
  methods: {
    getMyList() {
      var data = {
        pageNum: this.pageNum
      };
      this.$store
        .dispatch("getMyList", { ...data })
        .then(res => {
          if (res.data.code == "00") {
            this.pageSum = res.data.data.pageSum;
            this.myList = res.data.data.list;
            if (this.pageSum == 0) {
              this.pageStatus = false;
            } else {
              this.pageStatus = true;
            }
          } else {
            alert(res.data.msg);
          }
        })
        .catch(() => {
          this.tips = "连接失败，请稍后重试";
        });
    },
    scrollBottom() {
      //当前页面是否存在id = list-box
      const element = document.getElementById("list-box");
      //当前页面不否存在id =list-box或没有下一页时结束
      if (element == null || !this.pageStatus) {
        return false;
      }
      //浮动框变化的高度
      const height1 =
        document.documentElement.scrollTop || document.body.scrollTop;
      //屏幕的高度
      const height2 =
        document.documentElement.clientHeight || document.body.clientHeight;
      //id=list-box的高度（列表信息放在这个标签里）
      const height3 =
        document.getElementById("list-box").scrollHeight ||
        document.documentElement.clientHeight ||
        document.body.clientHeight;
      //id=header-box的高度（列表信息外的其他高度）
      const height4 = document.getElementById("header-box").scrollHeight || 100;
      if (height1 + height2 > height3 + height4 && this.pageSum > 0) {
        // 请求的数据未加载完成时，滚动到底部不再请求前一天的数据
        this.loading = true;
        let pageNumber = pageSum;
        if (this.pageSum != 0) {
          pageNumber = pageNumber + 1;
        }
        if (this.pageNum < pageNumber) {
          this.pageNum += 1;
          this.pageStatus = false;
        } else {
          this.tips = "没有数据可加载了";
          this.pageStatus = false;
          return false;
        }
        this.tips = "数据正在加载中...";
        const data = {
          pageNum: this.pageNum
        };
        this.$store
          .dispatch("getMyList", data)
          .then(resp => {
            if (resp.data.code == "00") {
              const newList = resp.data.data.list;
              for (var i = 0; i < newList.length; i++) {
                this.myList.push(newList[i]);
              }
              // 请求的数据执行完成后
              this.$nextTick(() => {
                this.loading = false;
                this.pageStatus = true;
              });
            } else {
              alert(resp.data.msg);
            }
          })
          .catch(() => {
            this.tips = "连接失败，请稍后重试";
          });
      }
    }
  }
};
``