【前端开发】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");
}