当前位置：首页 > uni-app

uniapp 分页组件

2026-01-14 18:36:22uni-app

uniapp 分页组件实现方法

在uniapp中实现分页功能，可以通过自定义组件或使用第三方组件库完成。以下是几种常见实现方式：

自定义分页组件 创建一个名为uni-pagination的组件，模板部分代码如下：

<view class="uni-pagination">
  <view class="uni-pagination-prev" @click="prevPage">上一页</view>
  <view class="uni-pagination-item" 
        v-for="page in pages" 
        :key="page"
        :class="{active: currentPage === page}"
        @click="changePage(page)">
    {{page}}
  </view>
  <view class="uni-pagination-next" @click="nextPage">下一页</view>
</view>

使用uni-ui官方组件 uniapp官方提供了uni-pagination组件，安装uni-ui后可直接使用：

<uni-pagination 
  :total="total" 
  :current="current" 
  :page-size="pageSize" 
  @change="change">
</uni-pagination>

第三方组件库实现 如使用uView UI的分页组件：

<u-pagination 
  :count="total" 
  v-model="current" 
  :page-size="pageSize">
</u-pagination>

分页逻辑处理

在页面或组件中需要处理分页数据请求：

export default {
  data() {
    return {
      list: [],
      currentPage: 1,
      pageSize: 10,
      total: 0
    }
  },
  methods: {
    fetchData() {
      // 模拟API请求
      uni.request({
        url: 'your_api_url',
        data: {
          page: this.currentPage,
          size: this.pageSize
        },
        success: (res) => {
          this.list = res.data.list
          this.total = res.data.total
        }
      })
    },
    changePage(page) {
      this.currentPage = page
      this.fetchData()
    }
  },
  created() {
    this.fetchData()
  }
}

样式优化建议

为分页组件添加基础样式：

uniapp 分页组件

.uni-pagination {
  display: flex;
  justify-content: center;
  margin: 20px 0;
}
.uni-pagination-item, 
.uni-pagination-prev,
.uni-pagination-next {
  padding: 5px 10px;
  margin: 0 5px;
  border: 1px solid #ddd;
  border-radius: 3px;
}
.uni-pagination-item.active {
  background-color: #007AFF;
  color: #fff;
  border-color: #007AFF;
}