Vue.js+cube-ui（Scroll組件）實現相似頭條效果的橫向滾動導航條

本博主在一次我的移動端項目中，遇到這麼一個需求：但願本身的項目中，頭部導航條的效果能夠像今日頭條那樣，橫向滾動!

對於這樣的效果，在各大移動端項目中幾乎是隨處可見，爲何呢？

       咱們都知道，對於移動端也就是手機上，咱們頁面的寬度並不像PC端那樣大，能夠顯示很長的導航項，但對於咱們移動端來講，因爲功能的拓展，或者業務的細分，每每導航項也會隨之增多，一旦超過移動端在一行的頁面顯示寬度，那便會出現導航項換行的現象，雖然說也有這樣佈局，但一旦導航項增多到必定程度的時候，咱們的頁面（首頁）將均被導航項霸佔，這樣不只影響重點內容的展現同時對用戶的體驗度也有很大程度的影響！因此，爲了解決這相關問題，出現了橫向滾動條，主要有幾點好處：

• 毫無疑問的一點，用戶體驗好：用戶能夠根據本身的須要，滑動導航的方式選擇本身的方式
• 便於管理與維護
• 使得頁面變得更爲美觀
• 突出主體業務

那麼這麼一個用戶體驗好，而後又實用的效果是怎麼實現的呢？

爲了堅持「不重複造輪子，在理解研究輪子的基礎上進行改革創新」的原則，我選擇了滴滴團隊的開源框架 —— cube-ui

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

　　在開始實現以前，本博主也是踩了很多坑啊，吐槽就不說了，說多了都是淚啊！下面進入主題：

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

　　大概的一個 HTML 結構就是：一個大的盒子套了兩個小盒子，一個是滾動導航，另外一個是額外拓展（對本效果不影響，能夠忽略）

 

 1 <div class="nav-scroll-list-wrap">
 2     <cube-scroll ref="navScroll" direction="horizontal">
 3         <ul class="nav-wrapper">
 4           <li v-for="(item, index) in labels" :key="index" class="nav-item">{{ item }}</li>
 5         </ul>
 6     </cube-scroll>
 7     <div class="search-icon">
 8         <span class="iconfont icon">&#xe628;</span>
 9     </div>
10 </div>

 

　　這裏說下 labels 是我傳入的導航項數據，是一個本地 mock 數據，共八項

　　樣式部分：這裏是實現的重點！由於對於 Scroll 組件，內容元素.cube-scroll-content在滾動方向上的長度必須大於容器元素，分爲縱向滾動和橫向滾動，這裏實現的是橫向滾動，縱向的原理也是大同小異，取決於滾動的方向採起不一樣的樣式.

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

　　大盒子部分的樣式對於該需求幾乎無影響，這裏主要是想說下，設置爲相對定位，是爲了子元素的定位，子絕父相，而內邊距是爲了騰出一部分位置給採用絕對定位的子元素（搜索圖標），同時這也是一個佈局技巧和滾動的關鍵，爲何這麼說呢？

　　首先，佈局技巧：能夠騰出一部分位置給拓展功能項用，其次能夠解決拓展功能項由於增長 z-index 而將滾動的最後一個導航項遮擋住的問題；

　　滾動的關鍵：假如沒有這個內邊距，那麼我八個導航項根據其佔據的寬度將不能大於容器元素，從而出現沒法滾動的現象，而這個內邊距的出現正好是能夠減少容器元素的寬度，那麼只要導航項足夠且很多的狀況下是能夠實現內容元素在滾動方向上的長度大於容器元素的，但若是在項目初期，導航項過少，只有四五個的狀況下不建議使用這個方法，這種狀況通常都是採起傳統的解決方法：在傳入數組導航的長度基礎上乘以一個數值來動態增長內容元素的寬度，具體作法：

1 <cube-scroll ref="navScroll" direction="horizontal">
2     <ul class="nav-wrapper" :style="{width:navWidth+'px'}">
3         <li v-for="(item, index) in navTxts" :key="index" class="nav-item">{{ item }}</li>
4     </ul>
5 </cube-scroll>

 

 

1 methods: {
2     widthComputed() {
3       this.navWidth=this.navTxts.length*520
4     }
5   },
6   created() {
7     this.widthComputed()
8   }

 

　　其他樣式：基本在官方的文檔中均有說明，我改動了部分，具體的我就不過多贅述了

 1 .cube-scroll-content
 2       display inline-block
 3       .nav-wrapper
 4         display inline-block
 5         white-space nowrap
 6         line-height 80px
 7         .nav-item
 8           display: inline-block
 9           padding: 0 30px
10           font-size 40px

　　這樣，一個橫向滾動條就實現了，若是有不足或者錯誤的地方，歡迎你們指出，一塊兒交流解決哈！