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标签的滚动效果逻辑大多在这部分

最后，看【事件回调】和【生命周期方法】

（1）整体结构

 

（2）state方法

 

（3）计算宽度位置基础方法

 

（4）功能方法

（5）事件回调

 

（6）生命周期方法

原文地址：https://www.cnblogs.com/zs-note/p/11507356.html

时间： 2024-10-08 13:42:48

antd源码分析之——标签页（tabs 3.Tabs的滚动效果）的相关文章

antd源码分析之——标签页（tabs 2.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关键组件功能实现 1.Tabs(an

Mybatis源码分析:trim标签

*/ .hljs { display: block; overflow-x: auto; padding: 0.5em; background: #F0F0F0; } /* Base color: saturation 0; */ .hljs, .hljs-subst { color: #444; } .hljs-comment { color: #888888; } .hljs-keyword, .hljs-attribute, .hljs-selector-tag, .hljs-meta-k

antd源码分析之——对话框（modal）

目录 一.组件结构 1.antd代码结构 2.rc-ant代码结构 3.组件结构 二.antd组件调用关系及功能详解 1.Model.tsx 2.confirm 三.rc-dialog详解 1.e.target 与 e.currentTarget 2.onMouseDown.onMouseUp 和 onClick 3.理解dialog中的鼠标事件 4.思维导图 一.组件结构 1.ant代码结构 2.rc-ant代码结构 3.组件结构 ant中modal的index.tsx中引入了Modal和co

EasyUI学习总结(三)——easyloader源码分析

EasyUI学习总结(三)--easyloader源码分析 easyloader模块是用来加载jquery easyui的js和css文件的,而且它可以分析模块的依赖关系,先加载依赖项.模块加载好了会调用parse模块来解析页面.把class是easyui开头的标签都转化成easyui的控件. 先看Demo1例子,再分析源代码. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>easyloader范例</tit

EasyUI学习总结(四)——parser源码分析

EasyUI学习总结(四)--parser源码分析 parser模块是easyloader第一个加载的模块,它的主要作用,就是扫描页面上easyui开头的class标签,然后初始化成easyui控件. 1 /** 2 * parser模块主要是解析页面中easyui的控件 3 */ 4 $.parser = { 5 // 是否自动解析 6 auto: true, 7 8 // 可以被解析的控件 9 plugins:['linkbutton','menu','menubutton','splitb

EasyUI学习总结(三)——easyloader源码分析(转载)

声明:这一篇文章是转载过来的,转载地址忘记了,原作者如果看到了,希望能够告知一声,我好加上去! easyloader模块是用来加载jquery easyui的js和css文件的,而且它可以分析模块的依赖关系,先加载依赖项.模块加载好了会调用parse模块来解析页面.把class是easyui开头的标签都转化成easyui的控件. 先看Demo1例子,再分析源代码. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>ea

Backbone.js源码分析(珍藏版)

源码分析珍藏,方便下次阅读! // Backbone.js 0.9.2 // (c) 2010-2012 Jeremy Ashkenas, DocumentCloud Inc. // Backbone may be freely distributed under the MIT license. // For all details and documentation: // http://backbonejs.org (function () { // 创建一个全局对象, 在浏览器中表示为w

仿网易新闻导航栏PagerSlidingTabStrip源码分析

转载请注明本文出自Cym的博客(http://blog.csdn.net/cym492224103),谢谢支持!   前言 最近工作比较忙,所以现在才更新博文,对不住大家了~!言归正传,我们来说说这个PagerSlidingTabStrip,它是配合ViewPager使用的导航栏,网易新闻就是用的这个导航,我们仔细观察这个导航栏不仅他是跟着ViewPager滑动而滑动,而且指示器还会随着标题的长度而动态的变化长度. · 下载地址: Github:https://github.com/astuet

duilib之源码分析

http://blog.csdn.net/wogel/article/details/9631781 duilib之源码分析 <duilib之源码分析> 1 stdAfx.h * lengthof(x) 计算数组长度宏 * MAX  两值最大 * MIN  两值最小 * CLAMP(x,a,b) x在a,b之间则取x否则取最小 2 UIBase * UI_WNDSTYLE_ 窗口风格属性 * UI_CLASSSTYLE_ 窗口类属性 * TRACE(LPCTSTR pstrFormat, ..