Vue.js+cube-ui怎么實現(xiàn)類似頭條效果的橫向滾動導航條

這篇文章主要介紹“Vue.js+cube-ui怎么實現(xiàn)類似頭條效果的橫向滾動導航條”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“Vue.js+cube-ui怎么實現(xiàn)類似頭條效果的橫向滾動導航條”文章能幫助大家解決問題。

我們提供的服務有：成都網(wǎng)站制作、網(wǎng)站建設、外貿(mào)網(wǎng)站建設、微信公眾號開發(fā)、網(wǎng)站優(yōu)化、網(wǎng)站認證、惠水ssl等。為上1000+企事業(yè)單位解決了網(wǎng)站和推廣的問題。提供周到的售前咨詢和貼心的售后服務，是有科學管理、有技術的惠水網(wǎng)站制作公司

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

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

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

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

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

大概的一個 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 是我傳入的導航項數(shù)據(jù)，是一個本地 mock 數(shù)據(jù)，共八項

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

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

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

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

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

<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.js+cube-ui怎么實現(xiàn)類似頭條效果的橫向滾動導航條”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關的知識，可以關注創(chuàng)新互聯(lián)行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。

當前文章：Vue.js+cube-ui怎么實現(xiàn)類似頭條效果的橫向滾動導航條
標題路徑：http://muchs.cn/article14/ihshde.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供微信小程序、定制網(wǎng)站、網(wǎng)站內(nèi)鏈、品牌網(wǎng)站設計、網(wǎng)站排名、云服務器

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉載，或轉載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容