uniapp分页样式
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：
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
}注意事项
- 移动端分页建议搭配下拉刷新和上拉加载功能
- 页码过多时考虑添加省略号或滑动区域
- 分页样式需考虑不同平台的UI一致性
- 性能优化：大数据量时考虑虚拟滚动代替传统分页
