当前位置: 首页 > news >正文

微信小程序分页和下拉刷新

在page.json中配置下拉刷新和底部距顶部的距离: 

{"path": "school-detail","style": {"navigationStyle": "custom","navigationBarTextStyle": "black","enablePullDownRefresh": true, //下拉刷新"onReachBottomDistance":100  //底部距顶部的距离}},

如下页面接口,需要分页的页面,在后端接口中都需要page_size(一次加载的数据条数)

//推免信息
export const getExemption = async (id: number,pageSize: number): Promise<exemption> => {try {const res = await http<exemption>({method: 'POST',url: '/universityselectionserver/postgraduate-exemption',data: {token: memberStore.profile?.token,user_id: memberStore.profile?.user_id,college_code: 10486,last_id: 0,page_size: 10}});return res.data;} catch (error) {console.error("Failed to fetch major score:", error);return {} as exemption;}
}

 下面是在相应页面的页面刷新和分页的代码

const currentPage_exemption = ref(1);
const pageSize_exemption = ref(10);
const hasMore_exemption = ref(true);
//推免数据的分页加载和下拉刷新
const fetchExemption = async () => {if(loading.value) return;loading.value = true;try {const response = await getExemption(currentPage_exemption.value,pageSize_exemption.value);console.log('推免数据:', response);if(currentPage_exemption.value === 1) {exemptionList.value = props.infoList;}else {exemptionList.value = [...exemptionList.value,...props.infoList];}hasMore_exemption.value = props.infoList.length >= pageSize_exemption.value;}catch (error) {console.error('获取推免数据失败', error);}finally {loading.value = false;uni.stopPullDownRefresh();};
}
onMounted(() => {fetchNotice();fetchExemption();
});
onPullDownRefresh(() => {currentPage.value = 1;hasMore.value = true;currentPage_exemption.value = 1;hasMore_exemption.value = true;fetchNotice();fetchExemption();
})
onReachBottom(() => {if(hasMore.value) {currentPage.value++;fetchNotice();}if(hasMore_exemption.value) {currentPage_exemption.value++;fetchExemption();}
})

http://www.dtcms.com/a/161595.html

相关文章:

  • STM32N6570-DK ISP调试
  • 1.8空间几何与场论
  • mysql8.0版本部署+日志清理+rsync备份策略
  • 英语五大基本句型
  • 大模型性能测试
  • Rust 学习笔记:修复所有权常见错误
  • CasaOS上部署1Panel开源运维面板远程在线访问配置实操指南
  • 从零搭建微服务项目Pro(第9-1章——分布式事务管理Seata环境配置)
  • 闲鱼商品详情API接口概述及JSON数据参考
  • 僵尸进程是什么?
  • P9904 [COCI 2023/2024 #1] Labirint 题解
  • 一、JVM基础概念
  • C++ 之 【list的简介、list 的构造函数、iterator、容量操作、元素访问、增删查改与迭代器失效】
  • C++ 之 【模拟实现 list(节点、迭代器、常见接口)】(将三个模板放在同一个命名空间就实现 list 啦)
  • 受限字符+环境变量RCE
  • 代码随想录打卡|Day29 动态规划Part02(不同路径、不同路径2、整数拆分、不同的二叉树搜索)
  • 免费LUT网站
  • 【Docker】使用 jq 管理镜像源
  • C++核心编程:类与对象全面解析
  • uniapp常用
  • 迭代器与生成器
  • 2025A卷-正整数到Excel编号之间的转换
  • 什么是 Web 标准?为什么它们对 SEO 和开发很重要?
  • GitLab CVE-2024-12444 安全漏洞解决方案
  • Vue+Echarts 3D地图效果
  • Java锁的升级流程详解:无锁、偏向锁、轻量级锁、重量级锁
  • YUM/DNF管理工具
  • 用vite动态导入vue的路由配置
  • 递归、搜索和回溯算法《递归》
  • 飞凌嵌入式T527核心板获得【OpenHarmony生态产品兼容性证书】