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賦值的方法

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）生命周期方法