【前端开发】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");
}
相关推荐
IT_陈寒13 分钟前
JavaScript性能优化:3个被低估的V8引擎技巧让你的代码提速50%
前端·人工智能·后端
云飞云共享云桌面19 分钟前
SolidWorks服务器多人使用方案
大数据·运维·服务器·前端·网络·电脑·制造
Red Car20 分钟前
javascript 性能优化实例一则
开发语言·javascript·ecmascript
艾小码26 分钟前
从Hello World到变量数据类型:JavaScript新手避坑指南
前端·javascript
街尾杂货店&2 小时前
css word-spacing属性
前端·css
千叶寻-2 小时前
正则表达式
前端·javascript·后端·架构·正则表达式·node.js
光影少年7 小时前
angular生态及学习路线
前端·学习·angular.js
記億揺晃着的那天9 小时前
Vue + Element UI 表格自适应高度如何做?
javascript·vue.js·ui
无尽夏_9 小时前
HTML5(前端基础)
前端·html·html5
Jagger_9 小时前
敏捷开发流程-精简版
前端·后端