由于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赋值的方法

isNextPrevShown:上一页、下一页中任意一个按钮显示即返回true

(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的情况

 
scrollToActiveTab方法:使nav滚动到当前激活的tab页签位置
下面的思维导图中最后一个叶子节点的图与上方第一个结构大图一致,标注出了计算激活tab位置的几个值
其中activeTab在上一页、下一页的情况分别用 tab0 和 tab5 举例计算,结合结构图和【nav滚动值(offset)计算】中的判断条件、执行方法一起看了解具体

(5)事件回调

 

(6)生命周期方法

antd源码分析之——标签页(tabs 3.Tabs的滚动效果)的更多相关文章

  1. antd源码分析之——标签页(tabs 2.Tabs关键组件功能实现)

    由于ant Tabs组件结构较复杂,共分三部分叙述,本文为目录中第二部分(高亮) 目录 一.组件结构 antd代码结构 rc-ant代码结构 1.组件树状结构 2.Context使用说明 3.rc-t ...

  2. antd源码分析之——标签页(tabs 1.组件结构)

    由于ant Tabs组件结构较复杂,共分三部分叙述,本文为目录中第一部分(高亮) 目录 一.组件结构 antd代码结构 rc-ant代码结构 1.组件树状结构 2.Context使用说明 3.rc-t ...

  3. antd源码分析之——栅格(Grid)

    官方文档 https://ant.design/components/grid-cn/ 目录 一.antd中的Grid 代码目录 1.整体思路 2.less文件结构图(♦♦♦重要) 3.less实现逻 ...

  4. antd源码分析之——折叠面板(collapse)

    官方文档 https://ant.design/components/collapse-cn/ 目录 一.antd中的collapse 代码目录 1.组件结构图(♦♦♦重要) 2.源码节选:antd/ ...

  5. linux内存源码分析 - 伙伴系统(释放页框)

    本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ 翻了一下之前的文章,发现竟然忘记写内核是如何释放页框的,罪过. 释放页框很简单,其实只有几步 检查此页是否被其他 ...

  6. antd源码分析之——对话框(modal)

    目录 一.组件结构 1.antd代码结构 2.rc-ant代码结构 3.组件结构 二.antd组件调用关系及功能详解 1.Model.tsx 2.confirm 三.rc-dialog详解 1.e.t ...

  7. linux内存源码分析 - 伙伴系统(初始化和申请页框)

    本文为原创,转载请注明:http://www.cnblogs.com/tolimit/ 之前的文章已经介绍了伙伴系统,这篇我们主要看看源码中是如何初始化伙伴系统.从伙伴系统中分配页框,返回页框于伙伴系 ...

  8. Mysqldump源码分析

    版权声明:本文由王珏原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/261 来源:腾云阁 https://www.qclou ...

  9. ANTD mobile源码分析 -- popover

    最近的开发中要用到很多的各式各样的组件.但是发现ant design mobile(后面简称ANTDM)里很多的资源.于是就分析一下,学习学习. ANTDM直接使用了typescript,没有用ES2 ...

随机推荐

  1. DIP原则

    依赖倒置原则(Dependence Inversion Principle,DIP)的原始定义: 高层模块不应该依赖底层模块,两者都应该依赖其抽象: 抽象不应该依赖细节: 细节应该依赖抽象.

  2. JS 发送弹幕

    JS实现弹幕的发送 <div class="box1"> <div class="box2" style="width: 600px ...

  3. css3控制字体动态变换颜色

    css3控制字体动态变换颜色 <!doctype html> <html> <head> <meta charset="utf-8"> ...

  4. JSP 内置对象的说明

    1 page:指的是当前的JSP页面本身,它是java.lang.object类的对象 2 config对象:它是ServletConfig类的一个实例 3 exception对象:它是java.la ...

  5. vue项目js实现图片放大镜功能

    效果图:   我写的是vue的组件形式,方便复用,图片的宽高,缩放的比例可以自己定义 magnifier.vue <template> <div class="magnif ...

  6. Python 嵌套列表解析

    将一个3*4矩阵转为4*3矩阵Matrix = [ [1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12],]afterMatrix = [[row[i] for ro ...

  7. ubuntu系统---切换Py2.X与Py3.X版本

    ubuntu系统---切换Python2.X与Python3.X版本 Python3.X将成为以后的趋势,Python2.X当前用的稍多的版本,但现在不再更新了.因此,小主电脑里也安装了好两个版本的p ...

  8. LoadRunner(5)

    一.在线综合场景测试:号称能更真实模拟实际生产环境 又称为:混合交易测试 (交易就是事务 Transaction) 1.三要素: 1)多用户:根据需求指定VU数 压力的来源 2)多任务:根据需求结合多 ...

  9. Atcoder Educational DP Contest 题解

    A - Frog 1/B - Frog 2 入门... #include<cstdio> #define abs(a) ((a)>=0?(a):(-(a))) #define min ...

  10. UOJ117 欧拉回路[欧拉回路]

    找欧拉回路的模板题. 知识点详见图连通性学习笔记. 注意一些写法上的问题. line37&line61:因为引用,所以j和head值是同步更新的,类似于网络流的当前弧优化,除了优化枚举外,这样 ...