後臺管理系統中比較常見的佈局是左邊菜單欄，右邊tab切換欄，但是一般的tab組件不包含tab頁過多的切換問題的，所以需要個性化實現，本文的實現方案是滑動滑鼠滾輪綁定tab達到切換的效果，先上一個動態圖看下效果 tab滑動欄佈局代碼如下 <div class="tabmain" id="tabmain ...
後臺管理系統中比較常見的佈局是左邊菜單欄，右邊tab切換欄，但是一般的tab組件不包含tab頁過多的切換問題的，所以需要個性化實現，本文的實現方案是滑動滑鼠滾輪綁定tab達到切換的效果，先上一個動態圖看下效果
tab滑動欄佈局代碼如下
<div class="tabmain" id="tabmain">
<div v-for="tab in tabList" v-on:click="changeTab(tab)"
:class="tab.id==activeTabID?'tabtitle active':'tabtitle'" :title="tab.label">
<span v-if="tab.label.length<=4">{{tab.label}}</span>
<span v-else>{{tab.label.substr(0,4)}}....</span>
<span v-on:click="refreshTab(tab)" class="el-icon-refresh-right"></span>
<span v-if="tab.candelete" v-on:click="closeTab(tab)" class="el-icon-close"></span>
</div>
</div>
這裡只是迴圈放置了一排div，實現滑動需要對外部tab容器tabmain進行onwheel事件的綁定，主要原理是獲取tabmain的包含滾條部分的長度與div的總長度（當然tabmain要指定overflow-y為hidden），計算滾動長度（通過scrollLeft()方法獲取），與已滾動長度比較，加入判斷滾動方向，通過event.deltaY判斷，向上滾動為負值（對應tab向左滾動），向下滾動為正值（對應tab向右滾動），調用tabmian對象的scrollLeft可以實現滾動，完整代碼如下
$(".tabmain").each(function (index, element) {
element.onwheel = function (event) {
var table = $("#tabmain");
var right = table[0].scrollWidth-$(element).width();
//table[0].scrollWidth為div包含滾動部分的全部寬度，$(element).width()為div的寬度，計算可得知滾動部分長度
//table.scrollLeft()為div已經滾動了多少，相比較就可以判斷div是否滾動完畢
if (table.scrollLeft() < right && event.deltaY > 0) {
//禁止事件預設行為（此處禁止滑鼠滾輪行為關聯到"屏幕滾動條上下移動"行為）
event.preventDefault();
var left = (table.scrollLeft() + 100);
table.scrollLeft(left)
}
if (table.scrollLeft() > 0 && event.deltaY < 0) {
//禁止事件預設行為（此處禁止滑鼠滾輪行為關聯到"屏幕滾動條上下移動"行為）
event.preventDefault();
var left = (table.scrollLeft() - 100);
table.scrollLeft(left)
}
}
})
滾動條我們也需要美化實現以下，通過重寫::-webkit-scrollbar屬性，針對類或者指定dom重寫只需要加上選擇器即可，例如.tabmain::-webkit-scrollbar
頁面為系統集成頁面所以不方便放例子了，相關效果查看可以查看碼雲FastExecutor項目的演示示例，頁面具體代碼地址:
