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

在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();
  }
})
相关推荐
a111776几秒前
演唱会3D选座网页(HTML 开源)
前端·3d·html
niucloud-admin3 分钟前
PHP SAAS 框架常见问题——服务器请求超时问题
服务器·php
ZC跨境爬虫5 分钟前
3D 地球卫星轨道可视化平台开发 Day10(交互升级与接口溯源)
前端·javascript·3d·自动化·交互
恋猫de小郭11 分钟前
WasmGC 是什么?为什么它对 Dart 和 Kotlin 在 Web 领域很重要?
android·前端·flutter
新酱爱学习14 分钟前
从一次 OpenClaw 请求抓包,聊聊 Skill 的运行原理
前端·人工智能·mcp
慕斯fuafua15 分钟前
CSS——弹性盒子
前端·css
M ? A16 分钟前
Vue Transition 组件转 React:VuReact 怎么处理?
前端·javascript·vue.js·经验分享·react.js·面试·vureact
小江的记录本17 分钟前
【分布式】分布式一致性协议:2PC/3PC、Paxos、Raft、ZAB 核心原理、区别(2026必考Raft)
java·前端·分布式·后端·安全·面试·系统架构
全栈小517 分钟前
【小程序】微信小程序在体验版发起支付的时候提示“由于小程序违规,支付功能暂时无法使用”,是不是一脸懵逼
微信小程序·小程序
计算机安禾18 分钟前
【Linux从入门到精通】第8篇:用户与权限管理(上)——谁动了我的文件?
linux·运维·服务器