文档章节

我的react组件化开发道路(二) 分页 组件开发

梅气灶
 梅气灶
发布于 2016/11/28 16:16
字数 1457
阅读 1742
收藏 57
点赞 5
评论 4

        上一篇文章主要写了关于react组件化开发的一些基本配置,慢慢的深入到每个组件的详细介绍中,今天我们就来分享react的分页组件

        组件基本数据

                    

                    current:当前页码,默认是第一个

                    pageSize:每页显示的页数,默认是10页

                    pagesLength:(很重要)这个参数的主要作用是用于控制分页的按钮个数,默认是9页,当数据小于90条(因为每页是10条数据,则页数小于9页),则所有的页码直接显示,如图:

                        

        如果大于9页,则采用显示部分的形式,如图显示:

                        

        下面来具体介绍内部逻辑。

        调用函数初始化

                    

        在构造函数里面初始化基本调用的函数,主要有:上一页、下一页、点击页码直接跳转、前五页、后五页,基本调用函数介绍完,则要开始着手分页的显示逻辑了。

                

    _initMPagination()函数负责分页的逻辑,先处理基本数据,pageSize,current,还要计算总页数(总页数需要向上取整),现在我们得到了:当前页码,总页数,每页大小(即每页显示数据的条数)。那么接下来需要做的处理就是判断总页数和页面显示页数的大小,如果总页数小于等于页面显示页数的大小,则直接全部显示,如图:

        

    需要为每一个页码绑定一个唯一的key值,判断当前的页面是否等于i,给当前页码不同的样式,并且为每一个页码绑定click函数,这样点击页码的时候能获取到正确的索引值,这个相对比较简单,如果总页数大于页面显示页数的大小,则需要考虑三种情况

        1:左边没有省略号,如图:

                

        2:右边没有省略号,如图:

                

        3:两边都有省略号,如图:

                

        以上三种情况的区分通过中心偏移量来判断:

let offset = (self.state.pagesLength-1)/2;

    先在所有操作前加上上一页的按钮:

RenderHtml.push(<li key='pre' className={self.state.current == 1?'M-pagination-prev M-pagination-disabled':'M-pagination-prev'} onClick={self._prePage}><MIcon type="arrowleft"/></li>)

这里需要判断当前页是否为第一页,如果是,则点击按钮不可用。        

    所有情况都已经考虑进去,那么现在就得从代码层面去分析逻辑,先来判断左边没有省略号的情况:

            

计算出中心偏移量,这里得到为4,判断当前页码是否大于4,如果小于等于4,则显示前五页的页码,剩下的使用省略号代替,最后一页的页码是totalPage,同样的需要为每一个页码绑定click事件,传入正确的索引值,最后一页传入totalPage值即可,省略号跳转页数稍后再说。

        再来判断右边没有省略号的情况:

        

        

else if(self.state.current > totalPage - offset)

如果当前页大于8(总页数减去中心偏移量得到为8),则右边没有省略号,操作跟左边没有省略号大同小异,

        剩下的就是两边都有省略号的情况:

           

    两边都有省略号的情况,两边的省略号必定第一个页码和最后一个页码相连,剩下的我们则需要计算中间显示多少页码,这个时候 pagesLength起到了关键的作用,通过两个for循环,将当前页左右两边显示对等的页码个数。然后返回给 RenderHtml 这个数组,最后:

            

    调用函数

       上一页:

                    

    判断当前页是否为第一个,如果是,则直接return不做任何操作,如果不是,则将current-1,setState,重新render

      下一页:

                    

        这里需要计算下总页数是多少,然后判断当前页是否等于总页数,如果是,则直接return不做任何操作,如果不是,则将current+1,setState,重新render

      点击页码直接跳转:

                    

            将传入的索引值直接替换掉当前的current值。

      点击左边的省略号跳转前五页:

                    

            判断当前的页码是否大于5,如果是,则将current-5,如果不是,则将当前页码设置成第三页。

      点击右边的省略号跳转后五页:

                  

            判断当前页码距离最后一页是否大于5,如果是,则将current+5,如果不是,则将当前页设置total-2(这里的total值是在bind的时候传入的totalPage);

        调用组件:

            

<MPagination total="109">

    

        目前不够完善的地方:

                1:因为分页需要配合表格的显示才能发挥出最大的作用,而目前仅仅是单个分页组件,还没有配合表格数据,因此缺少回调函数,在该回调函数中会传入当前页,每页显示的数据条数,预期会在下个版本中在表格组件中完善这一功能。

                2:每页显示的数据条数应该做成一个下拉框供用户选择,目前还没有,下个版本完善。

                3:pagesLength应该可由用户控制,这样分页具体显示多少个页码,用户的掌控力更强,下个版本完善。

        结束语:

                具体代码可以查看:https://git.oschina.net/meichao/React-webpack

                另外,为什么还有那么几个小问题不这个版本就做完,要等到下个版本完善呢?为什么?因为我懒,对,我就是懒!!!!

 

© 著作权归作者所有

共有 人打赏支持
梅气灶
粉丝 30
博文 15
码字总数 20372
作品 0
杭州
前端工程师
加载中

评论(4)

曾建凯
曾建凯
我在想,是不是将我项目里的react分页组件分享一下呢。
太阳黑子
太阳黑子
不错
极乐君
极乐君
https://zhuanlan.zhihu.com/p/24028788
谢谢博主的内容~
极乐君
极乐君
赞一个!:bowtie:
关于组件化开发

一 什么是组件化 前端做过一段时间的小伙伴都知道,目前组件化规范程度其实是相当低的,同一个组件做出来的API都不尽相同,这就给组件使用带来了很大的麻烦。 那么公司会花费大量时间将Jq插件...

-鹏
2016/04/08
189
0
ReactJs入门教程-精华版

一、ReactJS简介   React 起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设 Instagram 的网站。做出来以后,发现这套东西...

-鹏
2015/11/10
0
0
企业级的 UI 设计语言和 React 实现--Ant Design

Ant Design 是蚂蚁金服开发和正在使用的一套企业级的前端设计语言和基于 React 的前端框架实现。 特性 企业级金融产品的交互语言和视觉体系。 丰富实用的 React UI 组件。 基于 React 的组件...

叶秀兰
2015/07/27
47.4K
14
一看就懂的ReactJs入门教程-精华版

现在最热门的前端框架有AngularJS、React、Bootstrap等。自从接触了ReactJS,ReactJs的虚拟DOM(Virtual DOM)和组件化的开发深深的吸引了我,下面来跟我一起领略ReactJs的风采吧~~ 文章有点...

方宏春
06/20
0
0
我的react组件化开发道路(一) 一脸懵比的踩坑中

前言 因为先前做过一个使用阿里的ant design的项目,但是由于ant design中有很多组件还遗留着坑,问题是这些坑,还找不到解决的方法(或者我太low,方法可能有,只是我没找到),既然解决不了,...

梅气灶
2016/11/17
2.1K
16
React入门第一弹——React的起源

一、ReactJS简介 React起源于 Facebook 的内部项目,因为该公司对市场上所有 JavaScript MVC 框架,都不满意,就决定自己写一套,用来架设Instagram 的网站。做出来以后,发现这套东西很好用...

我家有宝
2016/01/14
113
0
React拾遗:从10种现在流行的 CSS 解决方案谈谈我的最爱 (中)

上篇 介绍了 React 现在流行的 CSS 解决方案。本篇就直接进入主题详细讲讲我最喜欢的解决方式之一:tachyons 个人认为,tachyons 适合小的、样式不是重点的项目以及写 Demo, 但这不代表不能...

FateRiddle
07/05
0
0
颠覆式前端UI开发框架:React

基于HTML的前端界面开发正变得越来越复杂,其本质问题基本都可以归结于如何将来自于服务器端或者用户输入的动态数据高效的反映到复杂的用户界面上。而来自Facebook的React框架正是完全面向此...

雪舞__
2016/12/08
19
0
颠覆式前端UI开发框架:React

基于HTML的前端界面开发正变得越来越复杂,其本质问题基本都可以归结于如何将来自于服务器端或者用户输入的动态数据高效的反映到复杂的用户界面上。而来自Facebook的React框架正是完全面向此...

SomaLihq
06/27
0
0
谈谈React

React无限好,只是我矫情 前置知识点: ES6的class ES6的模板字符串 ES6的模块Modules 本文带有强烈的个人观点,虽然我真的很喜欢React,React真的好用! 但是喜欢不等于无脑,学习其中的精髓才是重...

L3ve
2016/09/14
108
1

没有更多内容

加载失败,请刷新页面

加载更多

下一页

Weblogic问题解决记录

问题:点击登录,页面刷新但是不进去管理界面。解决:删除cookies再登录。

wffger
21分钟前
0
0
RxJava2的错误处理方案

最近使用retrofit2 + rxKotlin2写接口访问,想尽量平铺代码,于是就想到当借口返回的状态码为「不成功」时(比如:code != 200),就连同网络错误一起,统一在onError方法中处理。想法总是好的...

猴亮屏
29分钟前
0
0
程序的调试信息

调试二进制程序时,经常要借助GDB工具,跟踪程序的执行流程,获取程序执行时变量的值,以发现问题所在。GDB能得到这些信息,是因为编译程序时,编译器保存了相应的信息。Linux下的可执行程序...

qlee
51分钟前
0
0
应用级缓存

缓存命中率 从缓存中读取数据的次数与总读取次数的比例,命中率越高越好 java缓存类型 堆缓存 guavaCache Ehcache3.x 没有序列化和反序列化 堆外缓存ehcache3.x 磁盘缓存 存储在磁盘上 分布式...

writeademo
今天
0
0
python爬虫日志(3)find(),find_all()函数

1.一般来说,为了找到BeautifulSoup对象内任何第一个标签入口,使用find()方法。 以上代码是一个生态金字塔的简单展示,为了找到第一生产者,第一消费者或第二消费者,可以使用Beautiful Sou...

茫羽行
今天
0
0
java:thread:顺序执行多条线程

实现方案: 1.调用线程的join方法:阻塞主线程 2.线程池 package com.java.thread.test;public class MyThread01 implements Runnable {@Overridepublic void run() {Syste...

人觉非常君
今天
0
0
ElasticSearch 重写IK分词器源码设置mysql热词更新词库

常用热词词库的配置方式 1.采用IK 内置词库 优点:部署方便,不用额外指定其他词库位置 缺点:分词单一化,不能指定想分词的词条 2.IK 外置静态词库 优点:部署相对方便,可以通过编辑指定文...

键走偏锋
今天
19
0
Git 2.18版本发布:支持Git协议v2,提升性能

Git 2.18版本发布:支持Git协议v2,提升性能Git 2.18版本发布:支持Git协议v2,提升性能 新版本协议的主要驱动力是使 Git 服务端能够对各种 ref(分支与 tag)进行过滤操作。 这就意味着,G...

linux-tao
今天
0
0
python浏览器自动化测试库【2018/7/22-更新】

64位py2.7版本 更新 document_GetResources 枚举页面资源 document_GetresourceText 获取指定url的内容 包括页面图片 下载地址下载地址 密码:upr47x...

开飞色
今天
42
0
关于DCL双重锁失效及解决方案

关于DCL双重锁失效及解决方案 Double Check Lock (DCL)实现单例 DCL 方式实现单例的优点是既能够在需要时才初始化单例,又能够保证线程安全,且单例对象初始化后调用getInstance方法不进行...

DannyCoder
今天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部