【前端开发】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");
}
相关推荐
再吃一根胡萝卜4 分钟前
VS Code Ctrl+/ 注释失效:两套快速修复与冲突排查方案(含可复制配置)
前端
支付宝体验科技6 分钟前
Rokid 许德刚确认出席 SEE Conf 2025,带来《AI + AR 的实践与趋势》演讲
前端
PairsNightRain6 分钟前
React.lazy 和 suspense 如何使用?
前端·javascript·react.js
猪哥帅过吴彦祖17 分钟前
第 7 篇:交互的乐趣 - 响应用户输入
前端·webgl
渣哥19 分钟前
三级缓存揭秘:Spring 如何优雅地处理循环依赖问题
javascript·后端·面试
渣哥26 分钟前
为什么几乎所有 Java 项目都离不开 IoC?Spring 控制反转的优势惊人!
javascript·后端·面试
用户175923421502832 分钟前
D3.js - 选择集方法(Selection Methods)
前端
chenjianzhong40 分钟前
vite-plugin-legacy 实战解析
前端·vue.js·vite
前端赵哈哈42 分钟前
Vue I18n 完整安装与使用指南
前端·vue.js·面试