资讯专栏INFORMATION COLUMN

简单的分页组件(react)

Michael_Lin / 1046人阅读

摘要:简单的分页组件由于工作原因写过一段现在入手自己是战五渣选手,为了巩固之前学过的,特意用来实现,其实想用。判断是不是数字点击回调事件父组件回调事件给不同的元素赋值初始检查阶段判断地址

简单的分页组件
...由于工作原因, 写过一段vue, 现在入手jquery.自己是战五渣选手,为了巩固之前学过的react,特意用react来实现,其实想用jquery。 github L6zt
代码效果如图:

思路:
组件基本属性:
cur 当前页码,
all 总页码
space 页面显示数量 +1 才是 总数量
组件整体状态

1、与首页相连, cur < space 基本满足
2、中间状态,cur > space && cur < all - space
3、与末尾相连,cur > all - space
react 基本操作
子组件Pagination 通过 props 更新状态, 和state无关。
show code

// 判断 是不是数字
const isNumber = (num) => {
    return typeof num === "number";
}
class Pagination extends  React.Component {
    constructor (props) {
        super(props);
    }
    // 点击回调事件    
    handleClick (item) {
      // 父组件回调事件
      this.props.cb(item);
    }
    render () {
        let {cur, space, all} = this.props;
        let pgObj = [];
        // 给不同的元素 赋值class
        const checkClass = (role, active) => {
            const defaultClass = "pg-span";
            if (active) {
                return    `${defaultClass} active`
            }
            switch (role) {
                case 0: {
                    return `${defaultClass}`
                }
                case 1: {
                    return `${defaultClass}`
                }
                default: {
                
                }
            }
        }
        // 初始检查
        if (all < space) {
            all =  space
        }
        if (cur <= 0) {
            cur = 0
        }
        if (cur >= all) {
        cur = all
        } 
        // 阶段判断
        if (cur < space) {
            if (space === all) {
                for (let i = 1; i <= space; i++) {
                    pgObj.push({
                        page: i,
                        role: 0,
                        key: i
                    })
                }
            } else {
                for (let i = 1; i <= space; i ++) {
                    pgObj.push({
                        page: i,
                        role: 0,
                        key: i
                    })
                }
                pgObj.push({
                    page: "...",
                    role: 1,
                    key: "next"
                })
                pgObj.push({
                    page: all,
                    role: 0,
                    key: all
                })
            }
        } else if (cur >= space && cur <= all - space + 1) {
            let odd = parseInt(space / 2);
            pgObj.push({
                page: 1,
                role: 0,
                key: 1
            });
            pgObj.push({
                page: "...",
                role: 1,
                key: "pre"
            });
            for (let i = cur - odd; i <= cur + odd ; i ++) {
                pgObj.push({
                    page: i,
                    role: 1,
                    key: i
                })
            }
            pgObj.push({
                page: "...",
                role: 1,
                key: "next"
            });
            pgObj.push({
                page: all,
                role: 1,
                key: all
            })
        } else {
            pgObj.push({
                page: 1,
                role: 0,
                key: 1
            });
            pgObj.push({
                page: "...",
                role: 1,
                key: "pre"
            });
            for (let i = all - space + 1; i <= all; i ++) {
                pgObj.push({
                    page: i,
                    role: 0,
                    key: i
                })
            };
        }
        return (
            
{ pgObj.map(item => ( {this.handleClick(item)}} > {item.page} )) }
) } } class Root extends React.Component { constructor (props) { super(props); this.state = { cur: 1 }; this.handlePagination = this.handlePagination.bind(this); } handlePagination (item) { const {page} = item; if (isNumber(page)) { this.setState({ cur: page }) } } render() { let {cur} = this.state; console.log(cur); return (
) } }; ReactDOM.render( , document.getElementById("root") );

demo地址

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/97269.html

相关文章

  • Graphql实践——像axios一样使用Graphql

    摘要:初始化项目使用初始化项目安装项目结构如下接口所有接口对封装接下来对进行封装,加上中间件实现类似于拦截器的效果。 Graphql尝鲜 在只学习graphql client端知识的过程中,我们常常需要一个graphql ide来提示graphql语法,以及实现graphql的server端来进行练手。graphql社区提供了graphiql让我们使用 graphiql (npm):一个交互...

    mumumu 评论0 收藏0
  • jq easyui数据网络分页过程

    摘要:在涉及到组件的分页功能时,遇到了一点问题。由于数据较多,这边不予展示。返回的数据必须是符合要求的数据,格式如下必须带有属性,属性值为总共的数据条数,是这一页的数据内容,以数组对象的形式返回。 第一次写技术方面的文章,有点忐忑,总怕自己讲的不对误导别人。但是万事总有个开头,有不足错误之处,请各位读者老爷指出。 言归正传,最近刚进新公司,上头要求我先熟悉熟悉easyui这个组件库。在涉及到...

    Rainie 评论0 收藏0
  • jq easyui数据网络分页过程

    摘要:在涉及到组件的分页功能时,遇到了一点问题。由于数据较多,这边不予展示。返回的数据必须是符合要求的数据,格式如下必须带有属性,属性值为总共的数据条数,是这一页的数据内容,以数组对象的形式返回。 第一次写技术方面的文章,有点忐忑,总怕自己讲的不对误导别人。但是万事总有个开头,有不足错误之处,请各位读者老爷指出。 言归正传,最近刚进新公司,上头要求我先熟悉熟悉easyui这个组件库。在涉及到...

    array_huang 评论0 收藏0
  • 关于vue+element-ui项目分页,返回默认显示第一页的问题解决

    摘要:所以这就导致,页面内容正确,但是页码高亮依旧是第一页解决办法我们需要在之后刷新这个分页组件或者让分页组件的后于之后加载到页面。然后再次测试,发现完美解决问题。 问题描述 当前页面如下showImg(https://segmentfault.com/img/bVbjJ7a); 然后点击页码跳到第3页,然后在第三页点击页面链接跳转到新的页面showImg(https://segmentfa...

    YFan 评论0 收藏0
  • 基于jQuery封装分页组件(可自定义设置)

    摘要:封装的分页组件前几天做了一个的组件分页,而现在需求是的分页,我就根据我自己的需求写了一个。在网上找了很久的基于的分页封装,可是都不是我想要的结果,那么今天我就给大家看一下我的这个分页。 jQuery封装的分页组件 前几天做了一个vue的组件分页,而现在需求是jquery的分页,我就根据我自己的需求写了一个。在网上找了很久的基于jquery的分页封装,可是都不是我想要的结果,那么今天我就...

    lmxdawn 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<