uniapp列表分页

分页实现方法

在UniApp中实现列表分页功能，通常需要结合前端页面和后端接口共同完成。以下是常见的实现方式：

前端页面结构 使用<scroll-view>组件或<uni-list>组件作为容器，搭配onReachBottom生命周期实现滚动加载：

<template>
  <scroll-view 
    scroll-y 
    @scrolltolower="loadMore"
    style="height: 100vh">
    <view v-for="(item,index) in list" :key="index">
      <!-- 列表项内容 -->
    </view>
    <view v-if="loading">加载中...</view>
    <view v-if="noMore">没有更多了</view>
  </scroll-view>
</template>

数据逻辑处理 在script部分定义分页相关变量和方法：

data() {
  return {
    list: [],
    page: 1,
    pageSize: 10,
    loading: false,
    noMore: false
  }
},
methods: {
  async loadData() {
    if (this.loading || this.noMore) return;
    this.loading = true;

    const res = await uni.request({
      url: 'your_api_url',
      data: {
        page: this.page,
        pageSize: this.pageSize
      }
    });

    if (res.data.length) {
      this.list = [...this.list, ...res.data];
      this.page++;
    } else {
      this.noMore = true;
    }
    this.loading = false;
  },
  loadMore() {
    this.loadData();
  }
},
onLoad() {
  this.loadData();
}

优化建议

下拉刷新功能 添加下拉刷新提升用户体验：

onPullDownRefresh() {
  this.page = 1;
  this.list = [];
  this.noMore = false;
  this.loadData().finally(() => {
    uni.stopPullDownRefresh();
  });
}

性能优化 对于长列表建议使用<uni-list>的回收滚动功能：

<uni-list>
  <uni-list-item 
    v-for="(item,index) in list" 
    :key="index"
    :title="item.title" 
    :note="item.desc" />
</uni-list>

错误处理 增加网络请求错误处理：

try {
  const res = await uni.request({...});
  // 处理数据
} catch (e) {
  uni.showToast({
    title: '加载失败',
    icon: 'none'
  });
} finally {
  this.loading = false;
}

注意事项

• 分页参数需与后端约定一致，常见有page/pageSize或offset/limit两种模式
• 列表数据量较大时应考虑虚拟滚动技术
• 安卓平台需注意scroll-view的height必须设置为固定值
• 分页加载时应显示加载状态，避免用户重复操作

通过以上方法可以实现基础的列表分页功能，根据实际项目需求可进一步扩展优化。