微信小步调分页和下拉刷新

在page.json中配置下拉刷新和底部距顶部的间隔： 

2. {
3.                                         "path": "school-detail",
4.                                         "style": {
5.                                                 "navigationStyle": "custom",
6.                                                 "navigationBarTextStyle": "black",
7.                                                 "enablePullDownRefresh": true, //下拉刷新
8.                                                 "onReachBottomDistance":100  //底部距顶部的距离
9.                                         }
10.                                 },

复制代码

如下页面接口，须要分页的页面，在后端接口中都须要page_size(一次加载的数据条数）

2. //推免信息
3. export const getExemption = async (id: number,pageSize: number): Promise<exemption> => {
4.     try {
5.         const res = await http<exemption>({
6.             method: 'POST',
7.             url: '/universityselectionserver/postgraduate-exemption',
8.             data: {
9.                 token: memberStore.profile?.token,
10.                 user_id: memberStore.profile?.user_id,
11.                 college_code: 10486,
12.                 last_id: 0,
13.                 page_size: 10
14.             }
15.         });
16.         return res.data;
17.     } catch (error) {
18.         console.error("Failed to fetch major score:", error);
19.         return {} as exemption;
20.     }
21. }

复制代码

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

2. const currentPage_exemption = ref(1);
3. const pageSize_exemption = ref(10);
4. const hasMore_exemption = ref(true);
5. //推免数据的分页加载和下拉刷新
6. const fetchExemption = async () => {
7.   if(loading.value) return;
8.   loading.value = true;
9.   try {
10.     const response = await getExemption(currentPage_exemption.value,pageSize_exemption.value);
11.     console.log('推免数据:', response);
12.     if(currentPage_exemption.value === 1) {
13.       exemptionList.value = props.infoList;
14.     }else {
15.       exemptionList.value = [...exemptionList.value,...props.infoList];
16.     }
17.     hasMore_exemption.value = props.infoList.length >= pageSize_exemption.value;
18.   }catch (error) {
19.     console.error('获取推免数据失败', error);
20.   }finally {
21.     loading.value = false;
22.     uni.stopPullDownRefresh();
23.   
24.   };
25. }
26. onMounted(() => {
27.   fetchNotice();
28.   fetchExemption();
29. });
30. onPullDownRefresh(() => {
31.   currentPage.value = 1;
32.   hasMore.value = true;
33.   currentPage_exemption.value = 1;
34.   hasMore_exemption.value = true;
35.   fetchNotice();
36.   fetchExemption();
37. })
38. onReachBottom(() => {
39.   if(hasMore.value) {
40.     currentPage.value++;
41.     fetchNotice();
42.    
43.   }
44.   if(hasMore_exemption.value) {
45.     currentPage_exemption.value++;
46.     fetchExemption();
47.   }
48. })

复制代码