react-page-picker

Picture

安装和运行

克隆项目：https://github.com/z58362026/react-page-picker.git

npm 包依赖：npm install

本地热更新：npm run hot

打开页面：loaclhost:9999

上线打包：npm run pro

npm 下载

npm install react-page-picker

Example

/**
 * 学生列表
 */
import '../common/style/app.scss'
import api from '@api/test'
// import Picker from '../compontents/react-picker-cn'
// import loadable from '@loadable/component'
const { useState, useEffect, lazy, Suspense } = React
const Picker = lazy(() => import('../compontents/react-picker-cn'))
const cacheList = new Map()
const App = () => {
    const [pageNo, setPageNo] = useState(1)
    const pageSize = 20
    const [list, setList] = useState([])
    const pageCallback = (page) => {
        setPageNo(page)
    }
    const [pageOptions, setPageOptions] = useState(
        {
            current: pageNo,
            pageSize,
            tplSize: 12
        })
    useEffect(() => {
        if (cacheList.has(pageNo)) {
            const data = cacheList.get(pageNo)
            setList(data.list)
            return
        }
        api.testData(pageNo, pageSize).then((res) => {
            console.log(res)
            setList(res.data.data.list)
            cacheList.set(pageNo, res.data.data)
            if (!pageOptions.count) {
                pageOptions.count = res.data.data.count
                setPageOptions(Object.assign({}, pageOptions))
            }
        })
    }, [pageNo])
    return (
        <div className="student_content">
            <ul>
                <li>
                    <span>学号</span>
                    <span>姓名</span>
                    <span>性别</span>
                    <span>年龄</span>
                </li>
                {
                    list.map(item =>
                        <li key={item.studentId}>
                            <span>{item.studentId}</span>
                            <span>{item.name}</span>
                            <span>{item.sex}</span>
                            <span>{item.age}</span>
                        </li>
                    )
                }
            </ul>
            <Suspense fallback={<div>loading</div>}>
                <Picker pageCallback={pageCallback} options={pageOptions} />
            </Suspense>
        </div>
    )
}
export default App

Options

| Name | Type | Default | Description | | -------- | ------ | -------- | ----------------------------------- | | current | Number | 1 | Initialize home page number | | prevTpl | String | 上一页 | The previous page | | nextTpl | String | 下一页 | The next page | | firstTpl | String | 首页 | Home page | | lastTpl | String | 尾页 | back | | pageSize | Number | 10 | The default length of the page data | | tplSize | Number | 10 | Page number default length | | count | Number | 100 | Total number of page arrays |

Event

pageCallback: 回调函数

page : 必选，当前点击页数
error: 错误信息