本博主在一次個人移動端項目中，遇到這么一個需求：希望自己的項目中，頭部導航條的效果可以像今日頭條那樣，橫向滾動!

對于這樣的效果，在各大移動端項目中幾乎是隨處可見，為什么呢？

       我們都知道，對于移動端也就是手機上，我們頁面的寬度并不像PC端那樣大，可以顯示很長的導航項，但對于我們移動端來說，由于功能的拓展，或者業(yè)務的細分，往往導航項也會隨之增多，一旦超過移動端在一行的頁面顯示寬度，那便會出現(xiàn)導航項換行的現(xiàn)象，雖說也有這樣布局，但一旦導航項增多到一定程度的時候，我們的頁面（首頁）將均被導航項霸占，這樣不僅影響重點內(nèi)容的展示同時對用戶的體驗度也有很大程度的影響！所以，為了解決這相關問題，出現(xiàn)了橫向滾動條，主要有幾點好處：

•毫無疑問的一點，用戶體驗好：用戶可以根據(jù)自己的需要，滑動導航的方式選擇自己的方式
•便于管理與維護
•使得頁面變得更為美觀
•突出主體業(yè)務

那么這么一個用戶體驗好，然后又實用的效果是怎么實現(xiàn)的呢？

為了堅持“不重復造輪子，在理解研究輪子的基礎上進行改革創(chuàng)新”的原則，我選擇了滴滴團隊的開源框架 —— cube-ui

　　cube-ui 框架的官方文檔地址：https://didi.github.io/cube-ui/#/zh-CN/docs/introduction

　　在開始實現(xiàn)之前，本博主也是踩了不少坑啊，吐槽就不說了，說多了都是淚啊！下面進入主題：

　　cube-ui 所提供的組件中，有個 Scroll 的組件，是一個基于better-scroll進行封裝的組件.其實現(xiàn)原理我就不過多贅述了，去看了文檔或者平時弄過相關效果的大家都知道.

　　大概的一個 HTML 結(jié)構(gòu)就是：一個大的盒子套了兩個小盒子，一個是滾動導航，另一個是額外拓展（對本效果不影響，可以忽略）

 <div class="nav-scroll-list-wrap">   <cube-scroll ref="navScroll" direction="horizontal">     <ul class="nav-wrapper">      <li v-for="(item, index) in labels" :key="index" class="nav-item">{{ item }}</li>     </ul>   </cube-scroll>   <div class="search-icon">     <span class="iconfont icon"></span>   </div> </div>

　　這里說下 labels 是我傳入的導航項數(shù)據(jù)，是一個本地 mock 數(shù)據(jù)，共八項

　　樣式部分：這里是實現(xiàn)的重點！因為對于 Scroll 組件，內(nèi)容元素.cube-scroll-content在滾動方向上的長度必須大于容器元素，分為縱向滾動和橫向滾動，這里實現(xiàn)的是橫向滾動，縱向的原理也是大同小異，取決于滾動的方向采取不同的樣式.

 .nav-scroll-list-wrap   position relative   padding-right 120px