後台管理tab欄滑動解決方案

2021-10-01 10:28:44 字數 744 閱讀 4193

後台管理系統中比較常見的布局是左邊選單欄，右邊tab切換欄，但是一般的tab元件不包含tab頁過多的切換問題的，所以需要個性化實現，本文的實現方案是滑動滑鼠滾輪繫結tab達到切換的效果，先上乙個動態圖看下效果

tab滑動欄布局**如下

}


}....
這裡只是迴圈放置了一排div，實現滑動需要對外部tab容器tabmain進行onwheel事件的繫結，主要原理是獲取tabmain的包含滾條部分的長度與div的總長度（當然tabmain要指定overflow-y為hidden），計算滾動長度（通過scrollleft()方法獲取），與已滾動長度比較，加入判斷滾動方向，通過event.deltay判斷，向上滾動為負值（對應tab向左滾動），向下滾動為正值（對應tab向右滾動），呼叫tabmian物件的scrollleft可以實現滾動，完整**如下

$(".tabmain").each(function (index, element) 


if (table.scrollleft() > 0 && event.deltay < 0) }})
滾動條我們也需要美化實現以下，通過重寫::-webkit-scrollbar屬性，針對類或者指定dom重寫只需要加上選擇器即可，例如.tabmain::-webkit-scrollbar

滑動門解決方案

滑動門是基於精靈圖技術和內邊距的一種應用,一般應用於子導航中的選單布置.效果為乙個li,這個li的寬度不固定,會隨著放入的字數增加而寬度增加 1.不用精靈圖,僅僅使用背景色代替精靈圖的滑動門 這樣的選單只需要padding即可,而且不需要再額外多乙個span,只需要乙個a即可,但是切記不能用marg...

滑動衝突 常見情形及解決方案

安卓開發過程中滑動衝突的情形主要有2類 滑動衝突解決策略的理論基礎為安卓的 事件分發機制，針對滑動衝突的解決策略有以下兩種 建議採用第一種方法，易於理解，不容易出錯。實際測試後發現 原生根本就不會產生滑動衝突！1 左右滑動 viewpager處理觸控事件 此後所有的 action move acti...

頁面滑動穿透的成熟解決方案

認真寫好每一篇，愉悅自己，也方便他人 這個玩意讓人頭疼，估計前端面試的話，問的機率挺大的 開啟模態框前呼叫 function fixedbody 關閉模態框後呼叫 function loosebody 第二套 禁止滾動條滾動 function unscroll 移除禁止滾動條滾動 function ...