自制簡單的Tabs（Vue）

自制簡單的Tabs（Vue）

老樣子先上效果圖

實現思路

我們依舊從介面與邏輯兩方面下手

介面上

1. 文字選中與未選中的狀態
2. 下方滑塊的動畫效果

邏輯上

1. 文字選中樣式的替換
2. tab頁的新增
3. 滑塊滑動的距離

具體實現步驟

介面部分

1. 文字選中與未選中狀態的樣式，這裡我們可以通過動態新增class來實現
2. 動畫效果我們用css3的transfrom屬性即可完成
   核心程式碼如下

<div class="tab-item"
     :class="{checked_tab:checkTab===index}"//vue類繫結的方式
     @click="clickTab(tab,index)"//點選事件
     :key="index"
     v-for="(tab,index) in tabs">
     {{tab}}
</div>
複製程式碼

.line-container {
    background: $themeColor;//scss變數用法
    height: 0.1rem;
    width: 5%;
    transition-duration: 200ms;//動畫持續時間
}
複製程式碼

邏輯部分
1.文字選中樣式的替換，上文中已經進行了事件繫結，只需在方法中進行標量替換即可

 clickTab(tab, index) {
 this.checkTab = index;//標量替換
 this.$emit('changeTab', tab);//將目前選中的tab告訴父控制元件，實際開發中一般父控制元件中控制下方內容的展示
 ...
複製程式碼

2.tab頁的新增，這裡我們得益於vue資料迴圈的方式，我們只需要將需要新增的tab加入到陣列即可

tabs: ['精選', '話題', '關注']//這裡為了簡便，直接採用了字串的方式，可以根據實際場景，傳入物件等
複製程式碼

3. 滑塊滑動的距離，因為我們已經新增了動畫的持續時間，所以我們只需要關注於位移的距離即可。經過分析可得:滑塊滑動的距離=當前選中的滑塊*每塊tab所佔寬度+每塊子tab所佔的寬度的一半-滑塊寬度的一半（為了居中），可能文字有點籠統
   

   

let documentWidth = document.body.clientWidth//螢幕寬度
let tabLineWidth = $('.line-container').width()//滑塊的寬度
let tabWidth=documentWidth/tabs.length //tabs為tab陣列
let moveDistance = index * tabWidth + tabWidth * 0.5 - tabLineWidth * 0.5 //滑動記錄計算,下標index從0開始
對了，因為預先並不知道tabs的長度，所以子滑塊的寬度是不固定的，這裡我們需要在元素掛載完成後設定一下寬度
$('.tab-item').width(`${this.documentWidth / this.tabs.length}`);
複製程式碼

核心程式碼就這些了，撒花完結，優化什麼的，你們自己看著來咯