uniapp列表分页，上拉加载，下拉刷新

1，分页，上拉加载

export default {
  data() {
    return {
      pageNum: 1, // 初始化页码为1
      totalPage: null, // 总共有多少页数据
      isLoadingMore: false, // 标记正在加载更多数据
      listData: [] // 存放所有数据的列表
    }
  },
  
  onLoad() {
    this.getListData(); // 首次进入页面时先加载第一页数据
  },
  
  methods: {
    getListData() {
      uni.request({
        url: 'https://api.example.com/list',
        method: 'GET',
        data: {
          pageNum: this.pageNum
        },
        success: (res) => {
          if(this.pageNum === 1){
            this.totalPage = res.data.total; // 设置总页数
            this.listData = []; // 清空之前的数据
          }
          
          const newData = res.data.list || [];
          this.listData = [...this.listData, ...newData]; // 将新数据添加到已有数据的尾部
          this.isLoadingMore = false; // 结束加载状态
        },
        fail: () => {
          console.log('网络错误');
        }
      });
    },
    
    onReachBottom() {
      if(!this.isLoadingMore && this.pageNum < this.totalPage){
        this.isLoadingMore = true; // 开始加载状态
        
        setTimeout(()=>{
          this.pageNum++; // 每次加载完成后自增页码
          this.getListData(); // 再次请求数据
        },500); // 模拟异步操作需要等待一段时间才能返回数据
      }
    }
  }
}

2，下拉刷新

在page.json页面中需要下拉刷新的页面设置：

"enablePullDownRefresh": true

然后在页面中与onLoad同级：

onPullDownRefresh() {
	console.log('下拉刷新')
	this.pageNum = 1
},

完！！