H5移动端分页（vue）

fanyanjiang

已于 2023-08-30 18:05:37 修改

阅读量1.6k

点赞数

文章标签： vue js javascript

于 2021-04-22 15:26:21 首次发布

本文链接：https://blog.csdn.net/fanyanjiang/article/details/116015988

版权

该博客主要讨论了前端页面中数据的加载策略，通过监听滚动事件实现分页加载。在`mounted`和`destroyed`钩子中分别添加和移除滚动事件监听，确保性能优化。`handleScroll`函数判断滚动条位置，当接近页面底部时，更新`loadMore`状态并调用`getList`方法加载更多数据。此外，还涉及到了微官网的获取功能。

摘要由CSDN通过智能技术生成

export default {
  data() {
    return {
      dataList: [],
      TotalPage: 1,
      loadMore: false,
    };
  },
  mounted() {
    this.getList(this.TotalPage);
    window.addEventListener("scroll", this.handleScroll);
  },
  destroyed() {
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    getList(page) {
      //请求数据
      getList(page)
        .then((res) => {
          if (res.data.code == 1) {
            if (this.dataList.length == 0) {
              this.loadingFlag = false;
              this.dataList = res.data.data.data;
            } else {
              this.loadingFlag = false;
              this.dataList = this.dataList.concat(res.data.data.data);
            }
            if (res.data.data.data.length > 0) {
              this.$nextTick(() => {
                this.loadMore = true;
              });
            }
          }
        })
        .catch((e) => {
          console.log(e);
        });
    },
    // 网页滚动条纵坐标的位置
    getScrollTop() {
      let scrollTop = 0,
        bodyScrollTop = 0,
        documentScrollTop = 0;
      if (document.body) {
        bodyScrollTop = document.body.scrollTop;
      }
      if (document.documentElement) {
        documentScrollTop = document.documentElement.scrollTop;
      }
      scrollTop =
        bodyScrollTop - documentScrollTop > 0
          ? bodyScrollTop
          : documentScrollTop;
      return scrollTop;
    }, 
    // 网页的总高度
    getScrollHeight() {
      let scrollHeight = 0,
        bodyScrollHeight = 0,
        documentScrollHeight = 0;
      if (document.body) {
        bodyScrollHeight = document.body.scrollHeight;
      }
      if (document.documentElement) {
        documentScrollHeight = document.documentElement.scrollHeight;
      }
      scrollHeight =
        bodyScrollHeight - documentScrollHeight > 0
          ? bodyScrollHeight
          : documentScrollHeight;
      return scrollHeight;
    },
    handleScroll: function () {
      const t = this;
      let getScrollTop = this.getScrollTop();
      let getWindowHeight = this.getWindowHeight();
      let getScrollHeight = this.getScrollHeight();
      if (
        getScrollTop + getWindowHeight >= getScrollHeight - 50 &&
        this.loadMore
      ) {
        this.loadMore = false;
        t.TotalPage++;
        t.getList(t.TotalPage);
      }
    }, 
    // 网页可见区域高
    getWindowHeight() {
      let windowHeight = 0;
      if (document.compatMode == "CSS1Compat") {
        windowHeight = document.documentElement.clientHeight;
      } else {
        windowHeight = document.body.clientHeight;
      }
      return windowHeight;
    },
    //微官网
    websiteFn() {
      let orgUuid = localStorage.getItem("orgUuid");
      getWebsite(orgUuid)
        .then((res) => {
          console.log(res);
          if (res.data.code == 1) {
            // Toast(res.data.msg);
            this.show = true;
            this.miniPro = res.data.data;
          } else {
            Toast(res.data.msg);
          }
        })
        .catch((e) => {});
    },
  },
};