当前位置：首页 > uni-app

uniapp分页样式

2026-02-06 06:33:50uni-app

uniapp分页样式实现方法

uniapp中实现分页样式可以通过多种方式，以下是常见的几种实现方案：

使用uni-ui组件库的uni-pagination

uniapp官方扩展组件库uni-ui提供了现成的分页组件，使用简单且样式统一：

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

export default {
  data() {
    return {
      total: 100,
      current: 1
    }
  },
  methods: {
    change(e) {
      this.current = e.current
      // 获取对应页码数据
    }
  }
}

自定义分页组件

如果需要完全自定义样式，可以手动实现分页组件：

<view class="pagination">
  <view 
    class="page-item" 
    :class="{active: current === 1}"
    @click="handlePageChange(1)"
  >首页</view>
  <view 
    class="page-item" 
    v-for="page in pages" 
    :key="page"
    :class="{active: current === page}"
    @click="handlePageChange(page)"
  >{{page}}</view>
  <view 
    class="page-item" 
    :class="{active: current === totalPages}"
    @click="handlePageChange(totalPages)"
  >尾页</view>
</view>

使用第三方分页组件

如uView UI等第三方组件库也提供了丰富的分页组件：

<u-pagination 
  :count="total" 
  v-model="current"
  :showFirstLastPage="true"
/>

样式自定义技巧

分页组件样式可以通过CSS灵活调整：

.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
}

.page-item {
  padding: 8px 12px;
  margin: 0 5px;
  border: 1px solid #ddd;
  border-radius: 4px;
}

.page-item.active {
  background-color: #007aff;
  color: #fff;
  border-color: #007aff;
}

分页逻辑处理

分页数据加载通常需要配合后端API：

uniapp分页样式

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