当前位置：首页 > uni-app

uniapp 分页组件

2026-02-05 20:09:39uni-app

uniapp 分页组件实现方法

自定义分页组件

创建一个自定义分页组件，通常包含页码按钮、上一页/下一页按钮和总页数显示。以下是一个基础实现示例：

<template>
  <view class="pagination">
    <view class="pagination-btn" @click="handlePrev" :class="{ disabled: currentPage === 1 }">
      上一页
    </view>
    <view 
      v-for="page in pages" 
      :key="page" 
      @click="handlePageChange(page)"
      :class="{ active: currentPage === page }"
      class="pagination-item"
    >
      {{ page }}
    </view>
    <view class="pagination-btn" @click="handleNext" :class="{ disabled: currentPage === totalPages }">
      下一页
    </view>
  </view>
</template>

<script>
export default {
  props: {
    total: {
      type: Number,
      required: true
    },
    pageSize: {
      type: Number,
      default: 10
    },
    currentPage: {
      type: Number,
      default: 1
    }
  },
  computed: {
    totalPages() {
      return Math.ceil(this.total / this.pageSize)
    },
    pages() {
      const range = []
      for (let i = 1; i <= this.totalPages; i++) {
        range.push(i)
      }
      return range
    }
  },
  methods: {
    handlePageChange(page) {
      if (page !== this.currentPage) {
        this.$emit('change', page)
      }
    },
    handlePrev() {
      if (this.currentPage > 1) {
        this.$emit('change', this.currentPage - 1)
      }
    },
    handleNext() {
      if (this.currentPage < this.totalPages) {
        this.$emit('change', this.currentPage + 1)
      }
    }
  }
}
</script>

<style>
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0;
}
.pagination-item, .pagination-btn {
  padding: 5px 10px;
  margin: 0 5px;
  border: 1px solid #ddd;
  cursor: pointer;
}
.pagination-item.active {
  background-color: #007aff;
  color: white;
}
.pagination-btn.disabled {
  color: #ccc;
  cursor: not-allowed;
}
</style>

使用第三方组件库

uniapp生态中有多个UI组件库提供分页组件，可直接使用：

uniapp 分页组件

uView UI 的分页组件：

<template>
<u-pagination 
 :total="total" 
 :current="current" 
 @change="pageChange"
/>
</template>

ColorUI 的分页组件：

uniapp 分页组件

<template>
<c-pagination 
 :total="total" 
 :current="current" 
 @change="handlePageChange"
/>
</template>

后端数据分页处理

实现分页功能时，通常需要与后端API配合：

async loadData(page = 1) {
  const res = await uni.request({
    url: 'https://api.example.com/data',
    data: {
      page,
      pageSize: 10
    }
  })
  this.list = res.data.list
  this.total = res.data.total
}

滚动加载更多

对于移动端，可以实现无限滚动加载：

<template>
  <view>
    <view v-for="item in list" :key="item.id">{{ item.name }}</view>
    <view v-if="loading" class="loading">加载中...</view>
    <view v-if="noMore" class="no-more">没有更多了</view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [],
      page: 1,
      loading: false,
      noMore: false
    }
  },
  onLoad() {
    this.loadData()
    uni.$on('scrollToBottom', this.loadMore)
  },
  methods: {
    async loadData() {
      this.loading = true
      const res = await uni.request({
        url: 'https://api.example.com/data',
        data: {
          page: this.page,
          pageSize: 10
        }
      })
      this.list = [...this.list, ...res.data.list]
      this.loading = false
      if (res.data.list.length < 10) {
        this.noMore = true
      }
    },
    loadMore() {
      if (!this.loading && !this.noMore) {
        this.page++
        this.loadData()
      }
    }
  }
}
</script>