后臺管理系統中比較常見的布局是左邊選單欄，右邊tab切換欄，但是一般的tab組件不包含tab頁過多的切換問題的，所以需要個性化實作，本文的實作方案是滑動滑鼠滾輪系結tab達到切換的效果，先上一個動態圖看下效果
tab滑動欄布局代碼如下
<div id="tabmain">
<div v-for="tab in tabList" v-on:click="changeTab(tab)"
: :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)" ></span>
<span v-if="tab.candelete" v-on:click="closeTab(tab)" ></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專案的演示示例，頁面具體代碼地址:
https://gitee.com/grassprogramming/FastExecutor/blob/master/code/FastExecutor/FastExecutor/Views/Frame/Home/Index.cshtml
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/163298.html
標籤：JavaScript