diff --git a/docs/component/uniui/uni-pagination.md b/docs/component/uniui/uni-pagination.md index afb2858a04762a0d29f905c4303c4f6d60c51f55..8b4de92faa76e1466403df59bc2d2906d6b54162 100644 --- a/docs/component/uniui/uni-pagination.md +++ b/docs/component/uniui/uni-pagination.md @@ -1,58 +1,54 @@ - -::: 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 + +::: 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 <template> <view> <uni-card is-full :is-shadow="false"> @@ -82,8 +78,8 @@ </uni-section> </view> </template> -``` -> Script +``` +> Script ```html <script> export default { @@ -115,8 +111,8 @@ } } </script> -``` -> Style +``` +> Style ```html <style lang="scss"> .example-body { @@ -150,9 +146,9 @@ font-size: 14px; color: #333; } -</style> - -``` -::: - +</style> + +``` +::: + [完整示例演示](https://hellouniapp.dcloud.net.cn/pages/extUI/pagination/pagination) \ No newline at end of file