-
Notifications
You must be signed in to change notification settings - Fork 98
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Co-authored-by: kongjing@dian.so <apple@AppledeMacBook-Pro-2.local>
- Loading branch information
Showing
12 changed files
with
566 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,4 @@ | ||
export default { | ||
navigationBarTitleText: 'Pagination 分页', | ||
enableShareAppMessage: true, | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,92 @@ | ||
import { Component } from 'react' | ||
import { Pagination, Icon } from '@antmjs/vantui' | ||
import DemoPage from '../../components/demo-page/index' | ||
|
||
import DemoBlock from '../../components/demo-block/index' | ||
import './index.scss' | ||
|
||
export default class Index extends Component { | ||
constructor() { | ||
super() | ||
} | ||
|
||
state = { | ||
curPage1: 1, | ||
curPage2: 1, | ||
curPage3: 1, | ||
curPage4: 1, | ||
} | ||
|
||
pChange1 = (curPage1) => { | ||
this.setState({ | ||
curPage1, | ||
}) | ||
} | ||
|
||
pChange2 = (curPage2) => { | ||
this.setState({ | ||
curPage2, | ||
}) | ||
} | ||
|
||
pChange3 = (curPage3) => { | ||
this.setState({ | ||
curPage3, | ||
}) | ||
} | ||
|
||
pChange4 = (curPage4) => { | ||
this.setState({ | ||
curPage4, | ||
}) | ||
} | ||
|
||
render() { | ||
const { curPage1, curPage2, curPage3, curPage4 } = this.state | ||
return ( | ||
<DemoPage title="Pagination 分页"> | ||
<> | ||
<DemoBlock title="基础用法" padding> | ||
<Pagination | ||
modelValue={curPage1} | ||
totalItems="25" | ||
itemsPerPage="5" | ||
onChange={this.pChange1} | ||
/> | ||
</DemoBlock> | ||
<DemoBlock title="简单模式" padding> | ||
<Pagination | ||
modelValue={curPage2} | ||
pageCount={12} | ||
mode="simple" | ||
onChange={this.pChange2} | ||
/> | ||
</DemoBlock> | ||
<DemoBlock title="显示省略号" padding> | ||
<Pagination | ||
modelValue={curPage3} | ||
pageCount={12} | ||
totalItems="125" | ||
showPageSize={4} | ||
forceEllipses | ||
onChange={this.pChange3} | ||
/> | ||
</DemoBlock> | ||
<DemoBlock title="自定义按钮" padding> | ||
<Pagination | ||
modelValue={curPage4} | ||
totalItems="500" | ||
showPageSize="5" | ||
onChange={this.pChange4} | ||
pageNodeRender={(page) => { | ||
return <div>{page.number == 3 ? 'hot' : page.text}</div> | ||
}} | ||
prevText={<Icon name="arrow-left" />} | ||
nextText={<Icon name="arrow" />} | ||
/> | ||
</DemoBlock> | ||
</> | ||
</DemoPage> | ||
) | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
.wrapper { | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
height: 100%; | ||
} | ||
|
||
.block { | ||
width: 240px; | ||
height: 240px; | ||
background-color: #fff; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,141 @@ | ||
# Pagination 分页 | ||
|
||
### 介绍 | ||
|
||
当数据量较多时,采用分页的形式分隔长列表。 | ||
|
||
### 安装 | ||
|
||
``` javascript | ||
import { Pagination } from '@antmjs/vantui'; | ||
``` | ||
|
||
### 基础用法 | ||
|
||
通过modelValue来绑定当前页码时,组件为受控状态,分页显示取决于传入的modelValue,一般搭配onChange使用。 | ||
不需要受控时,可通过defaultCurrentPage指定当前页码 | ||
|
||
``` jsx | ||
import React, { useState } from 'react' | ||
import { Pagination } from '@antmjs/vantui'; | ||
|
||
const App = () => { | ||
const [currentPage1, setCurrentPage1] = useState(1) | ||
const pageChange1 = (v: any) => { | ||
const c = v | ||
setCurrentPage1(c) | ||
} | ||
return ( | ||
<Pagination | ||
modelValue={currentPage1} | ||
totalItems="25" | ||
itemsPerPage="5" | ||
onChange={pageChange1} | ||
/> | ||
) | ||
} | ||
export default App; | ||
``` | ||
|
||
### 简单模式 | ||
|
||
将 mode 设置为 "simple" 来切换到简单模式,此时分页器不会展示具体的页码按钮。 | ||
|
||
``` tsx | ||
import React, { useState } from 'react' | ||
import { Pagination } from '@antmjs/vantui'; | ||
|
||
const App = () => { | ||
const [currentPage2, setCurrentPage2] = useState(1) | ||
const pageChange2 = (v: any) => { | ||
const c = v | ||
setCurrentPage2(c) | ||
} | ||
return ( | ||
<Pagination | ||
modelValue={currentPage2} | ||
pageCount={12} | ||
mode="simple" | ||
onChange={pageChange2} | ||
/> | ||
) | ||
} | ||
export default App; | ||
``` | ||
|
||
### 显示省略号 | ||
|
||
设置 force-ellipses 后会展示省略号按钮,点击后可以快速跳转。 | ||
|
||
``` tsx | ||
import React, { useState } from 'react' | ||
import { Pagination } from '@antmjs/vantui'; | ||
|
||
const App = () => { | ||
const [currentPage3, setCurrentPage3] = useState(1) | ||
const pageChange3 = (v: any) => { | ||
const c = v | ||
setCurrentPage3(c) | ||
} | ||
return ( | ||
<Pagination | ||
modelValue={currentPage3} | ||
totalItems="125" | ||
showPageSize="3" | ||
forceEllipses | ||
onChange={pageChange3} | ||
/> | ||
) | ||
} | ||
export default App; | ||
``` | ||
|
||
### 自定义按钮 | ||
|
||
通过pageNodeRender传入自定义方法 | ||
|
||
``` tsx | ||
import React, { useState } from 'react' | ||
import { Pagination,Icon } from '@antmjs/vantui'; | ||
|
||
const App = () => { | ||
const [currentPage4, setCurrentPage4] = useState(1) | ||
const pageChange4 = (v: any) => { | ||
const c = v | ||
setCurrentPage4(c) | ||
} | ||
const pageNodeRender = (page: any) => { | ||
return <div>{page.number == 3 ? 'hot' : page.text}</div> | ||
} | ||
return ( | ||
<Pagination | ||
modelValue={currentPage4} | ||
totalItems="500" | ||
showPageSize="5" | ||
onChange={pageChange4} | ||
pageNodeRender={pageNodeRender} | ||
prevText={<Icon name="left"/>} | ||
nextText={<Icon name="right"/>} | ||
/> | ||
) | ||
} | ||
export default App; | ||
``` | ||
### PaginationProps [[详情]](https://github.com/AntmJS/vantui/tree/main/packages/vantui/types/pagination.d.ts) | ||
|
||
| 参数 | 说明 | 类型 | 默认值 | 必填 | | ||
| --- | --- | --- | --- | --- | | ||
| defaultValue | 默认页码 | _ number<br/>_ | 1 | `false` | | ||
| modelValue | 当前页码 | _ number<br/>_ | 1 | `true` | | ||
| mode | - | _ "multi" ¦ "simple"<br/>_ | multi | `false` | | ||
| prevText | 自定义上一页按钮内容 | _ React.ReactNode<br/>_ | 上一页 | `false` | | ||
| nextText | 自定义下一页按钮内容 | _ React.ReactNode<br/>_ | 下一页 | `false` | | ||
| pageCount | 总页数 | _ string ¦ number<br/>_ | 传入或者根据数据量计算 | `true` | | ||
| totalItems | 总记录数 | _ string ¦ number<br/>_ | 0 | `false` | | ||
| itemsPerPage | 每页数量 | _ string ¦ number<br/>_ | 10 | `false` | | ||
| showPageSize | 显示页码个数 | _ string ¦ number<br/>_ | 5 | `false` | | ||
| forceEllipses | 是否展示省略号 | _ boolean<br/>_ | false | `false` | | ||
| pageNodeRender | 自定义渲染页码结构, 入参数为number页数、text文本、 active选中状态 | _ (page: {<br/> number: number<br/> text: string<br/> active: boolean<br/> }) => React.ReactNode<br/>_ | - | `false` | | ||
| onChange | 页码改变的时候触发 | _ (currPage: number) => void<br/>_ | - | `true` | | ||
| updatecurrent | - | _ (currPage: number) => void<br/>_ | - | `false` | | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
@import '../style/var.less'; | ||
|
||
.van-pagination { | ||
display: flex; | ||
font-size: @pagination-font-size; | ||
color: @pagination-color; | ||
&-contain { | ||
display: flex; | ||
} | ||
&-simple { | ||
height: 78px; | ||
width: 248px; | ||
line-height: 78px; | ||
text-align: center; | ||
} | ||
&-prev, | ||
&-item, | ||
&-next { | ||
height: 78px; | ||
min-width: 78px; | ||
flex-shrink: 0; | ||
box-sizing: border-box; | ||
display: flex; | ||
align-items: center; | ||
justify-content: center; | ||
background: @white; | ||
border-radius: @pagination-item-border-radius; | ||
border: @pagination-item-border-width solid @pagination-item-border-color; | ||
cursor: pointer; | ||
} | ||
&-prev, | ||
&-item { | ||
border-right: none; | ||
} | ||
&-prev, | ||
&-next { | ||
padding: @pagination-prev-next-padding; | ||
} | ||
.simple-border { | ||
border-right: @pagination-item-border-width solid | ||
@pagination-item-border-color; | ||
} | ||
.active { | ||
color: @white; | ||
border: none; | ||
background: @pagination-active-background-color; | ||
} | ||
.disabled { | ||
color: @pagination-disable-color; | ||
background-color: @pagination-disable-background-color; | ||
cursor: not-allowed; | ||
} | ||
} |
Oops, something went wrong.