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

對(duì)于這樣的效果，在各大移動(dòng)端項(xiàng)目中幾乎是隨處可見，為什么呢？

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

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

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

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

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

　　在開始實(shí)現(xiàn)之前，本博主也是踩了不少坑啊，吐槽就不說了，說多了都是淚?。∠旅孢M(jìn)入主題：

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

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

 <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 是我傳入的導(dǎo)航項(xiàng)數(shù)據(jù)，是一個(gè)本地 mock 數(shù)據(jù)，共八項(xiàng)

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

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

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

　　首先，布局技巧：可以騰出一部分位置給拓展功能項(xiàng)用，其次可以解決拓展功能項(xiàng)因?yàn)樵黾?z-index 而將滾動(dòng)的最后一個(gè)導(dǎo)航項(xiàng)遮擋住的問題；

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

<cube-scroll ref="navScroll" direction="horizontal">
   <ul class="nav-wrapper" :style="{width:navWidth+'px'}">
     <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()
  }

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

 .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

總結(jié)

以上所述是小編給大家介紹的Vue.js+cube-ui（Scroll組件）實(shí)現(xiàn)類似頭條效果的橫向滾動(dòng)導(dǎo)航條,希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！

最新評(píng)論