微信小程序快速入门——分页（上拉加载、下拉刷新、节流阀）

一、上拉加载

1.在 pages.json 配置文件，为需要分页的页面配置上拉触底的距离 onReachBottomDistance

2.在 pages/Pagination/index 页面中，声明 onReachBottom 事件处理函数，用来监听页面上拉触底

3.在 getObjList 方法中，当数据请求成功之后，进行新旧数据的拼接处理

4.定义 isLoading 节流阀

5.修改 getObjList 方法，在请求数据前后，分别打开和关闭节流阀

6.在 onReachBottom 触底事件中，根据节流阀的状态来决定是否发起请求

7.判断数据是否加载完毕，修改 onReachBottom 事件处理函数

二、下拉刷新

1.在 pages.json 配置文件中，为需要分页的页面配置下拉刷新效果

2.监听页面的 onPullDownRefresh 事件处理函数

3.修改 getObjList 函数，小程序默认不会关闭下拉，所以需要使用cb进行关闭

三、核心代码

<template>
  <!-- 分页组件 -->
  <view class="container">
    <c-card
      class="myCard"
      title="分页测试"
      v-for="(item, id) in objList"
      :key="id"
    >
      {
    
    {
    
     item.age }}
    </c-card>
    <u-divider>没有更多了</u-divider>
  </view>
</template>

<script lang="ts" setup>
import {
    
     onPullDownRefresh, onReachBottom } from "@dcloudio/uni-app";
import {
    
     onMounted, ref } from "vue";
import cCard from "@/components/common/cCard";

// 分页请求对象
interface IQueryObj {
    
    
  pageNum: number;
  pageSize: number;
}

onMounted(() => {
    
    
  getObjList();
});

// 上拉加载
onReachBottom(() => {
    
    
  // 判断是否还有下一页数据
  if (queryObj.value.pageNum * queryObj.value.pageSize >= total.value)
    return console.log("数据加载完毕！");
  // 判断是否在请求数据
  if (isLoding.value) return;
  // 页码值自增
  queryObj.value.pageNum += 1;
  // 重新获取列表数据
  getObjList();
});

// 下拉刷新
onPullDownRefresh(() => {
    
    
  // 重置数据
  queryObj.value.pageNum = 1;
  total.value = 0;
  isLoding.value = false;
  objList.value = [];
  // 重新发起请求,并手动关闭下拉刷新
  getObjList(() => uni.stopPullDownRefresh());
});

const objList = ref<any[]>([]);
const total = ref(0);
const isLoding = ref(false);
const queryObj = ref<IQueryObj>({
    
    
  pageNum: 1,
  pageSize: 10,
});

// 获取列表数据
const getObjList = (cb?: any) => {
    
    
  uni.showLoading({
    
    });
  // 打开节流阀
  isLoding.value = true;
  // 发送请求
  const temList = mockData();
  setTimeout(function () {
    
    
    uni.hideLoading();
  }, 1000);
  // 关闭节流阀
  isLoding.value = false;
  // 是否调用回调函数
  cb && cb();
  // 拼接新旧数据
  objList.value = [...objList.value, ...temList.value];
};

// 模拟数据
const mockData = () => {
    
    
  const temList = ref<any[]>([]);
  for (let i = 1; i <= 10; i++) {
    
    
    const temObj = ref({
    
    
      age: objList.value.length + i,
    });
    temList.value = [...temList.value, temObj.value];
  }
  total.value = 100;
  return temList;
};
</script>

<style lang="scss" scoped>
.container {
    
    
  padding-top: 30rpx;
  width: 100%;
  min-height: 100vh;
  background: $conch-background-color;
  .myCard {
    
    
    margin: 20rpx auto;
  }
}
</style>