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 */

以上方案可根据具体项目需求进行组合或调整，实现适合不同场景的分页效果。