MVVM框架下實現左右滑動切換tab

引言

最近本身思考和書寫了一些小的組件方法，由此來總結一下一個簡單的js效果，因爲咱們的項目是比較成熟的項目，不少經常使用的組件，效果，插件等項目中都應有盡有，幾乎不多本身再去實現某些效果，基本上過多的是去書寫應用邏輯，處理數據等，因爲本週項目上出現了一個小bug,上線後我又臨時修改，緣由居然是因爲當時那個左右滑動的tab樣式和方法是我直接將原來的代碼複製過來的，沒多看，可是就是由於一個小處粘錯了，因此一個很邊緣的問題出現了，因此這件事件也告訴我，儘可能不要複製代碼，複製代碼是一件不利於本身思考和學習的事情，並且後來我回過頭來再去修改的時候才發現之前的代碼在書寫風格上有不少須要修改的，下面來總結一下MVVM框架下實現左右滑動切換tab的效果

首先看一張圖實現效果

當tab個數過多的時候，添加左右切換功能

下面這個圖是我作的思路圖

（1）班級的顯示個數不超過區域的寬度，因此正常顯示

（2) 當返回的數據過多，須要展現的狀態有以下三種(假設頁面最多能夠顯示6個，數據有8個)

思路示意圖

思路

第一步：在書寫這個效果的時候，首先在頁面佈局上要整理清楚思路,ul標籤顯示列表，咱們使用的mvvm框架是司徒正美老師的框架Avalon,可是用的版本是1.5版本的
上面的DOM結構由此組件的5個屬性來決定它的展現，首先看到第一個屬性那就是，btnControl屬性，這個屬性的值決定是否要顯示左右切換的按鈕，能夠看到下面那兩個按鈕的DOM渲染也是使用這個屬性控制，第二個屬性newTabs,這是一個tab項的數組，它會隨着點擊切換tab而及時變動，因此顯示的tab項會及時變動，第三四個屬性分別是leftEnabled,rightEnabled,這兩個屬性控制按鈕是否可點擊，第五個屬性是一個方法，arrowClick用來點擊切換

5個屬性變量來實現切換

第二步：根據以前上面的DOM結構和最開始給的思路示意圖能夠清晰地分析出

1.默認狀態下組件的btnControl，leftEnabled，rightEnabled屬性值均爲false

2.在組件init初始化方法中，根據獲取到的原始tab列表斷定btnControl這個屬性的true和flase值

this.btnControl = (this.tab_list.length>6);複製代碼

3.組件初始化時知道了tab_list的長度，由不一樣的長度作不一樣的邏輯

截取數組須要展現的部分

此處的邏輯單獨寫在一個方法中，由於當調用切換方法時，還須要此段邏輯的處理，經過一個變量startPos的值來截取須要展現的tab項，startPos值表明了顯示在頁面上的第一項在數組中的索引，由於顯示在頁面上的第一項會隨着點擊的左右切換而變化，其實第一項顯示的內容就是數組在截取時的開始位置，此處須要思考清楚

4.初始化左右切換按鈕的狀態

初始化按鈕的狀態

初始化好了按鈕的狀態，根據不一樣的值，顯示不一樣的樣式類，控制按鈕的圖片樣式和是否可點擊狀態

5.點擊切換的方法

切換方法

根據傳進來的不一樣切換變量，改變startPos值，每次切換完畢以後，都須要跟新要顯示的tab數組和按鈕的狀態

第三步：以上這幾個步驟就是實現這一效果的所有思路和方法，因爲項目框架不一樣，此處不提供全部的實現方法代碼，第三步驟就是動手去實現和書寫這樣的效果，最好的作法實際上是封裝一個組件，可讓全項目組的成員均可以使用，但是目前咱們的tab切換和tabpage加載有很高的耦合度，立刻拆出來我尚未這個能力，這些想法也是得益於本身去思考如何實現這個功能，思考多了，想多了，總結多了天然能力也就上來了，到時候去作這樣具備挑戰的任務也就更有底氣了，新的一年裏過去兩週了寫了4篇文章，2篇技術文章，2篇讀書筆記，跟我年初給本身定的目標保持在一個節奏上，但願其餘作技術的小夥伴，也多思考，多總結，多分享

完結

但願個人思路和總結能夠幫助到其餘人，也但願你多多給我提出意見，讓咱們一塊兒在學習的路上共同發現和成長，2107年歡迎你和我一塊兒作一個不斷努力學習的知識分子

Cayley 一個不斷努力學習的女程序員