uniapp分页器怎么用

1. 什么是uniapp分页器？

分页器是一种可供用户选择当前操作视图的工具，常用于数据列表或图片墙等需要长时间滚动浏览的场景。而uniapp是一款基于 Vue.js 的跨平台开发框架，支持同时生成 iOS、Android、H5等多个平台。

uniapp分页器则结合了这两种技术，通过提供自定义样式、丰富的功能和使用简便，帮助开发者快速实现跨平台的分页器效果。

2. uniapp分页器的安装

2.1. 安装插件

uniapp分页器是一款开源插件，可以通过 npm 安装到项目中。首先，打开终端，进入项目根目录，运行以下命令：

npm install uni-pagination

成功安装后，插件将自动加入到项目的 package.json 文件中。

2.2. 引入组件

安装完成后，需要在页面中引入 uni-pagination 组件。

{

  "usingComponents": {
    "uni-pagination": "uni-pagination"
  }
}

这段代码需要写在页面的 json 配置文件中。

3. uniapp分页器的使用

3.1. 最简单的使用方法

在页面中引入 uni-pagination 组件后，就可以在页面中使用了，最简单的使用方法是在页面中直接写该组件：

<uni-pagination></uni-pagination>

这样就能显示出默认的 uni-pagination 分页器了。但是，默认的分页器往往不能满足我们的需求，我们需要使用 props 来自定义组件。

3.2. props 属性

在使用 uni-pagination 组件时，可以使用以下 props 属性进行自定义设置：

<table>
  <thead>
    <tr>
      <th>属性名</th>
      <th>类型</th>
      <th>默认值</th>
      <th>说明</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>mode</td>
      <td>String</td>
      <td>'simple'</td>
      <td>分页器的样式，默认为 simple，可选值为 simple 和 full。</td>
    </tr>
    <tr>
      <td>pageSize</td>
      <td>Number</td>
      <td>-</td>
      <td>每页显示的数据条数。</td>
    </tr>
    <tr>
      <td>total</td>
      <td>Number</td>
      <td>-</td>
      <td>总数据条数。</td>
    </tr>
    <tr>
      <td>currentPage</td>
      <td>Number</td>
      <td>-</td>
      <td>当前页码。</td>
    </tr>
  </tbody>
</table>

3.3. 自定义组件样式

在使用分页器组件时，我们还可以自定义样式。可以在组件上添加 class 属性，来应用样式。

<uni-pagination class="my-pagination"></uni-pagination>

同时，在全局样式文件中可以对该 class 进行样式规定，如下：

.my-pagination {

  /* 样式规定 */
}

4. uniapp分页器的示例代码

以下是一份基础的示例代码，可以通过参考该代码，快速上手使用 uniapp 分页器组件。

<template>

  <view>
    <view class="list">
      <view v-for="(item, index) in listData" :key="index">
        <!-- 数据项显示代码 -->
      </view>
    </view>
    <uni-pagination
      class="pagination"
      mode="full"
      :total="total"
      :pageSize="pageSize"
      :currentPage="currentPage"
      @change="handleChange"
    ></uni-pagination>
  </view>
</template>
<script>
export default {
  data() {
    return {
      listData: [], // 数据列表
      total: 0, // 总数据条数
      pageSize: 10, // 每页显示条数
      currentPage: 1 // 当前页码
    }
  },
  mounted() {
    this.getListData()
  },
  methods: {
    // 获取数据列表
    getListData() {
      // 接口请求代码
    },
    // 分页器页码改变回调函数
    handleChange(currentPage) {
      this.currentPage = currentPage
      this.getListData()
    }
  }
}
</script>
<style>
.pagination {
  /* 样式规定 */
}
</style>