提交 f892bdad 编写于 作者: D DCloud_LXH

Revert "docs: systemInfo"

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