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

应用技术:原生JavaScript + Vue3

javascript 复制代码
$(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");
}
相关推荐
daols886 小时前
vue vxe-table 自适应列宽,根据内容自适应宽度的2种使用方式
vue.js·vxe-table
小小小小宇6 小时前
虚拟列表兼容老DOM操作
前端
悦悦子a啊6 小时前
Python之--基本知识
开发语言·前端·python
安全系统学习7 小时前
系统安全之大模型案例分析
前端·安全·web安全·网络安全·xss
涛哥码咖7 小时前
chrome安装AXURE插件后无效
前端·chrome·axure
OEC小胖胖8 小时前
告别 undefined is not a function:TypeScript 前端开发优势与实践指南
前端·javascript·typescript·web
行云&流水8 小时前
Vue3 Lifecycle Hooks
前端·javascript·vue.js
Sally璐璐8 小时前
零基础学HTML和CSS:网页设计入门
前端·css
老虎06278 小时前
JavaWeb(苍穹外卖)--学习笔记04(前端:HTML,CSS,JavaScript)
前端·javascript·css·笔记·学习·html
三水气象台8 小时前
用户中心Vue3网页开发(1.0版)
javascript·css·vue.js·typescript·前端框架·html·anti-design-vue