antd源碼分析之——標籤頁（tabs 3.Tabs的滾動效果）

因爲ant Tabs組件結構較複雜，共分三部分敘述，本文爲目錄中第三部分（高亮）

目錄

1、組件結構

antd代碼結構

rc-ant代碼結構

一、組件樹狀結構

二、Context使用說明

三、rc-tabs中只在example、test中使用的組件說明

2、Tabs關鍵組件功能實現

一、Tabs（antd）

二、RcTabs

三、Sentinel哨兵

四、InkTabBarNode

3、Tabs的滾動效果

ScrollableTabBarNode 

2、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）生命週期方法