当前位置: 首页 > 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.xdnf.cn/news/186697.html

相关文章:

  • uniapp 微信小程序遇到的坑
  • 一种改进的YOLOv11网络,用于无人机视角下的小目标检测
  • 深度学习中的正则化简介
  • 如何正确地解读和分析MySQL性能模式和查询分析器提供的性能数据?
  • 【算法应用】基于灰狼算法求解DV-Hop定位问题
  • React Testing Library
  • 2025-4-25 情绪周期视角复盘(mini)
  • 【C语言极简自学笔记】C 语言数组详解:一维数组与二维数组
  • 「OC」源码学习——alloc与init的实现
  • 【博客系统】博客系统第二弹:实现博客列表接口(在 Service 层重新封装 Mapper 层返回结果,避免实体类所有字段都向前端返回)、SimpleDateFormat 类的使用方法
  • 强化学习中关键超参数的详细说明
  • 如何把握邮件发送的黄金时间?
  • TypeScript 入门到进阶全讲解(超全版)
  • DAY8-GDB调试及打桩
  • BOPF Business Object Development
  • AiCube 试用 - ADC 水位监测系统
  • NameSilo转入转出域名
  • 大模型笔记8 文本数据清洗
  • C语言数据结构—数组(cpu内存与指针)
  • CSS选择器
  • 6.图的OJ题(1-10,未完)
  • shell命令二
  • “八股训练营”学习总结
  • Linux学习——FTP(功能实现)
  • windows anaconda 配置 ipynb 环境
  • 《电商业务分析终极框架:从数据到决策的标准化路径》
  • OpenLayers WebGL与3D渲染 (进阶一)
  • 五分钟讲清数据需求怎么梳理!
  • 数据库关系模型的总结
  • 软件功能设计视角下的能源管理系统功能清单构建与实践