uniapp分页样式
分页样式实现方法
在UniApp中实现分页样式通常涉及前端页面布局和数据分页加载逻辑。以下是常见的实现方式：
基础分页组件样式
使用<view>和<text>组合实现基础分页器：
<view class="pagination">
<text @click="prevPage" :class="{disabled: currentPage === 1}">上一页</text>
<text v-for="page in pageCount"
@click="goToPage(page)"
:class="{active: currentPage === page}">
{{page}}
</text>
<text @click="nextPage" :class="{disabled: currentPage === pageCount}">下一页</text>
</view>CSS样式示例
.pagination {
display: flex;
justify-content: center;
margin-top: 20px;
}
.pagination text {
padding: 8px 12px;
margin: 0 5px;
border: 1px solid #ddd;
cursor: pointer;
}
.pagination .active {
background-color: #007AFF;
color: white;
}
.pagination .disabled {
color: #ccc;
cursor: not-allowed;
}滚动加载分页样式
对于滚动分页（无限加载）场景：
<scroll-view
scroll-y
@scrolltolower="loadMore"
style="height: 100vh">
<!-- 内容列表 -->
<view v-for="item in list">{{item.name}}</view>
<!-- 加载状态 -->
<view v-if="loading" class="loading">加载中...</view>
<view v-if="noMore" class="no-more">没有更多了</view>
</scroll-view>滚动加载样式
.loading, .no-more {
text-align: center;
padding: 10px;
color: #999;
}数据加载逻辑
分页数据请求示例：
data() {
return {
list: [],
currentPage: 1,
pageSize: 10,
total: 0,
loading: false,
noMore: false
}
},
methods: {
async fetchData() {
if (this.loading || this.noMore) return;
this.loading = true;
try {
const res = await uni.request({
url: 'api/list',
data: {
page: this.currentPage,
size: this.pageSize
}
});
this.list = [...this.list, ...res.data.list];
this.total = res.data.total;
this.noMore = this.list.length >= this.total;
} finally {
this.loading = false;
}
},
loadMore() {
if (!this.noMore) {
this.currentPage++;
this.fetchData();
}
}
}组件库分页方案
使用uni-ui组件库的分页器：
<uni-pagination
:total="total"
:current="currentPage"
:pageSize="pageSize"
@change="pageChange"
/>uni-pagination参数说明
show-icon: 显示首页末页图标prev-text: 上一页文字next-text: 下一页文字pageSize: 每页数量
平台差异处理
处理不同平台的分页样式差异：
/* #ifdef H5 */
.pagination {
padding-bottom: 20px;
}
/* #endif */
/* #ifdef MP-WEIXIN */
.pagination text {
padding: 6px 10px;
}
/* #endif */以上方案可根据具体项目需求进行组合或调整，实现适合不同场景的分页效果。
