当前位置：首页 > uni-app

uniapp列表分页

2026-02-06 01:45:35uni-app

uniapp列表分页实现方法

基础分页逻辑

在uniapp中实现列表分页需要结合前端和后端逻辑。前端负责发送分页请求和渲染数据，后端负责处理分页查询并返回对应数据。

data() {
  return {
    listData: [], // 列表数据
    pageSize: 10, // 每页数量
    currentPage: 1, // 当前页码
    total: 0, // 总数据量
    loading: false, // 加载状态
    noMore: false // 是否没有更多数据
  }
}

获取分页数据

通过uni.request或封装后的API请求获取分页数据。建议使用async/await方式处理异步请求。

methods: {
  async getListData() {
    if (this.loading || this.noMore) return

    this.loading = true
    try {
      const res = await uni.request({
        url: '你的API地址',
        data: {
          page: this.currentPage,
          pageSize: this.pageSize
        }
      })

      if (res.data.list.length < this.pageSize) {
        this.noMore = true
      }

      this.listData = [...this.listData, ...res.data.list]
      this.total = res.data.total
      this.currentPage++
    } catch (e) {
      console.error(e)
    } finally {
      this.loading = false
    }
  }
}

上拉加载更多

在页面的onReachBottom生命周期中触发加载更多数据。

uniapp列表分页

onReachBottom() {
  this.getListData()
}

下拉刷新

使用uni.startPullDownRefresh和uni.stopPullDownRefresh实现下拉刷新功能。

onPullDownRefresh() {
  this.currentPage = 1
  this.listData = []
  this.noMore = false
  this.getListData().finally(() => {
    uni.stopPullDownRefresh()
  })
}

页面初始化加载

在onLoad或onShow生命周期中初始化加载第一页数据。

uniapp列表分页

onLoad() {
  this.getListData()
}

列表渲染优化

使用scroll-view或原生列表渲染大量数据时，应考虑性能优化。

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

分页组件封装

对于复杂项目，建议将分页逻辑封装为mixin或组件，提高代码复用性。

// paginationMixin.js
export default {
  data() {
    return {
      listData: [],
      pageSize: 10,
      currentPage: 1,
      total: 0,
      loading: false,
      noMore: false
    }
  },
  methods: {
    async fetchData() {
      // 抽象获取数据方法，由具体页面实现
    },
    resetPagination() {
      this.currentPage = 1
      this.listData = []
      this.noMore = false
    }
  }
}