antd源码分析之——标签页(tabs 3.Tabs的滚动效果)
由于ant Tabs组件结构较复杂,共分三部分叙述,本文为目录中第三部分(高亮)
目录
一、组件结构
antd代码结构
rc-ant代码结构
1、组件树状结构
2、Context使用说明
3、rc-tabs中只在example、test中使用的组件说明
二、Tabs关键组件功能实现
1、Tabs(antd)
2、RcTabs
3、Sentinel哨兵
4、InkTabBarNode
三、Tabs的滚动效果
ScrollableTabBarNode
二、Tabs的滚动效果
ScrollableTabBarNode
ScrollableTabBarNode内容太多,使用多个思维导图分别展示,内容较多总结的比较粗糙,部分细节还有疑问
首先,整体结构图,将ScrollableTabBarNode的方法进行归类(个人看法)
然后,根据方法内容从基础到复杂的层次来看,首先看【state方法】和【计算宽度位置的基础方法】
再次,是主要【功能方法】,tab标签的滚动效果逻辑大多在这部分
最后,看【事件回调】和【生命周期方法】
在给出整体结构图之前,先给出tab中组件结构示意图,其中由nav包裹多个tab,使用左侧或顶部偏移控制滚动位置。
滚动状态下,上一页、下一页按钮在navWrap外的左右或上下两侧
(1)整体结构
(2)state方法
this.state中next与prev两个值,布尔型,记录是否显示上一页/下一页按钮。
setNext、setPrev即为为next、prev赋值的方法
(3)计算宽度位置基础方法
计算宽度和位置时,横向tab(top、bottom)计算宽度和左侧偏移,纵向tab(left、right)计算高度和顶部偏移
下图中的方法中带【WH】后缀的为计算宽度(横向)、高度(纵向)的方法;
带有【LT】后缀的为计算左侧(横向)、右侧(纵向)偏移量的方法;
方法中根据当前tab是横向、纵向自动返回对应的宽度和位置偏移
(4)功能方法
setOffset方法:计算nav的滚动偏移,并赋值,需要时同时设置next和prev是否显示
setNextPrev方法:计算上一页、下一页按钮是否显示
上一页按钮显示条件:offset < 0显示,offset >= 0时不显示。也就是说nav向左移动的时候可以往前翻,【上一页】按钮显示,其他情况不行,实际上offset最大只能等于0,不会大于0
下一页按钮显示条件相对复杂:
nav宽度小于外部容器时,只有一页,不需要显示,即下图中 containerWH - navNodeWH >= 0的情况
nav的宽度大于外部容器,且差值大于offset(注意,offset取值小于等于0)时,说明后面有内容,需要显示下一页,即下图中containerWH - navNodeWH < offset的情况
nav的宽度大于外部容器,且差值等于offset时,说明全部多的tab全在左侧,没有下一页美容,不需要显示,及下图中containerWH - navNodeWH < 0 && containerWH - navNodeWH = offset
上述三种情况后,剩下的是nav宽度大于外部容器,且差值小于offset,实际上这种情况不存在,因为最后一个tab最多只会贴着外部容器的最右侧,不会再向左移动,所以不存在containerWH - navNodeWH < 0 && containerWH - navNodeWH > offset的情况
(5)事件回调
(6)生命周期方法
antd源码分析之——标签页(tabs 3.Tabs的滚动效果)的更多相关文章
- antd源码分析之——标签页(tabs 2.Tabs关键组件功能实现)
由于ant Tabs组件结构较复杂,共分三部分叙述,本文为目录中第二部分(高亮) 目录 一.组件结构 antd代码结构 rc-ant代码结构 1.组件树状结构 2.Context使用说明 3.rc-t ...
- antd源码分析之——标签页(tabs 1.组件结构)
由于ant Tabs组件结构较复杂,共分三部分叙述,本文为目录中第一部分(高亮) 目录 一.组件结构 antd代码结构 rc-ant代码结构 1.组件树状结构 2.Context使用说明 3.rc-t ...
- antd源码分析之——栅格(Grid)
官方文档 https://ant.design/components/grid-cn/ 目录 一.antd中的Grid 代码目录 1.整体思路 2.less文件结构图(♦♦♦重要) 3.less实现逻 ...
- antd源码分析之——折叠面板(collapse)
官方文档 https://ant.design/components/collapse-cn/ 目录 一.antd中的collapse 代码目录 1.组件结构图(♦♦♦重要) 2.源码节选:antd/ ...
- linux内存源码分析 - 伙伴系统(释放页框)
本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ 翻了一下之前的文章,发现竟然忘记写内核是如何释放页框的,罪过. 释放页框很简单,其实只有几步 检查此页是否被其他 ...
- antd源码分析之——对话框(modal)
目录 一.组件结构 1.antd代码结构 2.rc-ant代码结构 3.组件结构 二.antd组件调用关系及功能详解 1.Model.tsx 2.confirm 三.rc-dialog详解 1.e.t ...
- linux内存源码分析 - 伙伴系统(初始化和申请页框)
本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ 之前的文章已经介绍了伙伴系统,这篇我们主要看看源码中是如何初始化伙伴系统.从伙伴系统中分配页框,返回页框于伙伴系 ...
- Mysqldump源码分析
版权声明:本文由王珏原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/261 来源:腾云阁 https://www.qclou ...
- ANTD mobile源码分析 -- popover
最近的开发中要用到很多的各式各样的组件.但是发现ant design mobile(后面简称ANTDM)里很多的资源.于是就分析一下,学习学习. ANTDM直接使用了typescript,没有用ES2 ...
随机推荐
- DIP原则
依赖倒置原则(Dependence Inversion Principle,DIP)的原始定义: 高层模块不应该依赖底层模块,两者都应该依赖其抽象: 抽象不应该依赖细节: 细节应该依赖抽象.
- JS 发送弹幕
JS实现弹幕的发送 <div class="box1"> <div class="box2" style="width: 600px ...
- css3控制字体动态变换颜色
css3控制字体动态变换颜色 <!doctype html> <html> <head> <meta charset="utf-8"> ...
- JSP 内置对象的说明
1 page:指的是当前的JSP页面本身,它是java.lang.object类的对象 2 config对象:它是ServletConfig类的一个实例 3 exception对象:它是java.la ...
- vue项目js实现图片放大镜功能
效果图: 我写的是vue的组件形式,方便复用,图片的宽高,缩放的比例可以自己定义 magnifier.vue <template> <div class="magnif ...
- Python 嵌套列表解析
将一个3*4矩阵转为4*3矩阵Matrix = [ [1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12],]afterMatrix = [[row[i] for ro ...
- ubuntu系统---切换Py2.X与Py3.X版本
ubuntu系统---切换Python2.X与Python3.X版本 Python3.X将成为以后的趋势,Python2.X当前用的稍多的版本,但现在不再更新了.因此,小主电脑里也安装了好两个版本的p ...
- LoadRunner(5)
一.在线综合场景测试:号称能更真实模拟实际生产环境 又称为:混合交易测试 (交易就是事务 Transaction) 1.三要素: 1)多用户:根据需求指定VU数 压力的来源 2)多任务:根据需求结合多 ...
- Atcoder Educational DP Contest 题解
A - Frog 1/B - Frog 2 入门... #include<cstdio> #define abs(a) ((a)>=0?(a):(-(a))) #define min ...
- UOJ117 欧拉回路[欧拉回路]
找欧拉回路的模板题. 知识点详见图连通性学习笔记. 注意一些写法上的问题. line37&line61:因为引用,所以j和head值是同步更新的,类似于网络流的当前弧优化,除了优化枚举外,这样 ...