提交 51e57a15 编写于 作者: D DCloud_LXH

docs: systemInfo

上级 171619e5
::: tip 组件名:uni-pagination
> 代码块: `uPagination`
[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-pagination)
:::
分页器组件,用于展示页码、请求数据等。
## 介绍
### 基本用法
```html
<uni-pagination title="标题文字" total="20"></uni-pagination>
<uni-pagination title="标题文字" show-icon="true" total="50" current="2"></uni-pagination>
```
## API
### Pagination Props
|属性名|类型 |默认值 |说明|
|:-:|:-:|:-:|:-:|
|prevText|String|上一页|左侧按钮文字|
|nextText|String|下一页|右侧按钮文字|
|value/v-model|Number|1|当前页|
|current|Number |1|当前页, 优先级高于 value|
|total|Number|0|数据总量|
|pageSize|Number|10|每页数据量|
|showIcon|Boolean|false |是否以 icon 形式展示按钮 |
### Pagination Events
|事件称名|说明|返回值|
|:-:|:-:|:-:|
|@change|点击页码按钮时触发 |e={type,current} current为当前页,type值为:next/prev,表示点击的是上一页还是下一个|
## 示例
::: warning 注意
示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件,直接拷贝示例代码将无法正常运行 。
请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-pagination) ,在页面右侧选择 `使用 HBuilderX导入示例项目` ,体验完整组件示例。
:::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/pagination/pagination
> Template
``` html
::: tip 组件名:uni-pagination
> 代码块: `uPagination`
[点击下载&安装](https://ext.dcloud.net.cn/plugin?name=uni-pagination)
:::
分页器组件,用于展示页码、请求数据等。
## 介绍
### 基本用法
```html
<uni-pagination title="标题文字" total="20"></uni-pagination>
<uni-pagination title="标题文字" show-icon="true" total="50" current="2"></uni-pagination>
```
## API
### Pagination Props
|属性名|类型 |默认值 |说明|
|:-:|:-:|:-:|:-:|
|prevText|String|上一页|左侧按钮文字|
|nextText|String|下一页|右侧按钮文字|
|piecePerPageText|String|条/页|条/页文字|
|value/v-model|Number|1|当前页|
|current|Number |1|当前页, 优先级高于 value|
|total|Number|0|数据总量|
|pageSize|Number|10|每页数据量|
|showIcon|Boolean|false |是否以 icon 形式展示按钮 |
|showPageSize|Boolean|false |是否展示每页条数 |
|pageSizeRange|Array|[20, 50, 100, 500] |每页条数选框 |
### Pagination Events
|事件称名|说明|返回值|
|:-:|:-:|:-:|
|@change|点击页码按钮时触发 |e={type,current} current为当前页,type值为:next/prev,表示点击的是上一页还是下一个|
|@pageSizeChange|当前每页条数改变时触发 |e={pageSize} pageSize 为当前所选的每页条数|
## 示例
::: warning 注意
示例依赖了 `uni-card` `uni-section` `uni-scss` 等多个组件,直接拷贝示例代码将无法正常运行 。
请到 [组件下载页面](https://ext.dcloud.net.cn/plugin?name=uni-pagination) ,在页面右侧选择 `使用 HBuilderX导入示例项目` ,体验完整组件示例。
:::
::: preview https://hellouniapp.dcloud.net.cn/pages/extUI/pagination/pagination
> Template
``` html
<template>
<view>
<uni-card is-full :is-shadow="false">
......@@ -78,8 +82,8 @@
</uni-section>
</view>
</template>
```
> Script
```
> Script
```html
<script>
export default {
......@@ -111,8 +115,8 @@
}
}
</script>
```
> Style
```
> Style
```html
<style lang="scss">
.example-body {
......@@ -146,9 +150,9 @@
font-size: 14px;
color: #333;
}
</style>
```
:::
</style>
```
:::
[完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/pagination/pagination)
\ No newline at end of file
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册