Vue如何實現類似頭條效果的橫向滾動導航條

這篇文章主要講解了“Vue如何實現類似頭條效果的橫向滾動導航條”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“Vue如何實現類似頭條效果的橫向滾動導航條”吧！

　　cube-ui 所提供的組件中，有個 Scroll 的組件，是一個基于better-scroll進行封裝的組件.其實現原理我就不過多贅述了。

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

 <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">&#xe628;</span>
   </div>
 </div>

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

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

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

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

　　首先，布局技巧：可以騰出一部分位置給拓展功能項用，其次可以解決拓展功能項因為增加 z-index 而將滾動的最后一個導航項遮擋住的問題；

　　滾動的關鍵：假如沒有這個內邊距，那么我八個導航項根據其占據的寬度將不能大于容器元素，從而出現無法滾動的現象，而這個內邊距的出現正好是可以減小容器元素的寬度，那么只要導航項足夠且不少的情況下是可以實現內容元素在滾動方向上的長度大于容器元素的，但如果在項目初期，導航項過少，只有四五個的情況下不建議使用這個方法，這種情況一般都是采取傳統的解決方法：在傳入數組導航的長度基礎上乘以一個數值來動態增加內容元素的寬度，具體做法：

<cube-scroll ref="navScroll" direction="horizontal">
   <ul class="nav-wrapper" :>
     <li v-for="(item, index) in navTxts" :key="index" class="nav-item">{{ item }}</li>
   </ul>
 </cube-scroll>

 methods: {
   widthComputed() {
    this.navWidth=this.navTxts.length*520
   }
  },
  created() {
   this.widthComputed()
  }

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

 .cube-scroll-content
    display inline-block
    .nav-wrapper
     display inline-block
     white-space nowrap
     line-height 80px
     .nav-item
      display: inline-block
      padding: 0 30px
      font-size 40px

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創建可維護性和可測試性更強的代碼庫，Vue允許可以將一個網頁分割成可復用的組件，每個組件都包含屬于自己的HTML、CSS、JavaScript，以用來渲染網頁中相應的地方，所以越來越多的前端開發者使用vue。

感謝各位的閱讀，以上就是“Vue如何實現類似頭條效果的橫向滾動導航條”的內容了，經過本文的學習后，相信大家對Vue如何實現類似頭條效果的橫向滾動導航條這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！