【前端开发】JS+Vuew3请求列表数据并分页

应用技术：原生JavaScript + Vue3

$(function () {
   ini();
});

function ini() {
  const { createApp, ref, onMounted } = Vue;
  createApp({
    setup() {
      const data = ref({
        studentList: [],
        page: 1,
        pageSize: 10,
      });

      const getStudentList = async (page, key) => {
        window.onscroll = function () {};
        var _data = data;

        try {
          var formData = {
            pageIndex: page,
            pageSize: _data.value.pageSize,
          };

          const response = await $.ajax({
            url: handlerURL,
            type: "post",
            data: formData,
            dataType: "json",
          });

          if (response.Status) {
            if (page == 1) {
              _data.value.studentList = response.Data.Data.Items;
            } else {
              _data.value.studentList = _data.value.studentList.concat(
                response.Data.Data.Items
              );
            }

            if (page < response.Data.Data.TotalPage) {
              LoadNextPage(page + 1);
            } else {
              LoadNextPage(0);
            }
          } else {
            weui.alert(response.Message);
          }
        } catch (error) {
          weui.alert("数据加载失败！" + error);
        }
      };

	  // 加载下一页
      const LoadNextPage = (nextPage) => {
        if (nextPage) {
          window.onscroll = function () {
            if (getScrollTop() + getClientHeight() + 10 >= getScrollHeight()) {
              getStudentList(nextPage, data.value.searchForm);
            }
          };
        } else {
          window.onscroll = function () {};
        }
      };
      
	  // 获取滚动条当前的位置
	  const  getScrollTop = () => {
		  var scrollTop = 0;
		  if (document.documentElement && document.documentElement.scrollTop) {
		    scrollTop = document.documentElement.scrollTop;
		  } else if (document.body) {
		    scrollTop = document.body.scrollTop;
		  }
		  return scrollTop;
	  }
	
	  // 获取当前可视范围的高度
	  const getClientHeight = () => {
		  var clientHeight = 0;
		  if (document.body.clientHeight && document.documentElement.clientHeight) {
		    clientHeight = Math.min(
		      document.body.clientHeight,
		      document.documentElement.clientHeight
		    );
		  } else {
		    clientHeight = Math.max(
		      document.body.clientHeight,
		      document.documentElement.clientHeight
		    );
		  }
		  return clientHeight;
	  }
	
	  // 获取文档完整的高度
	  const getScrollHeight = () => {
		  return Math.max(
		    document.body.scrollHeight,
		    document.documentElement.scrollHeight
		  );
	  }

      onMounted(() => {
        getStudentList();
      });

      return {
        data,
      };
    },
  })
    .use(vant)
    .mount("#app");
}