這篇文章主要介紹Vue.js+cube-ui如何實現(xiàn)類似頭條效果的橫向滾動導(dǎo)航條,文中介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們一定要看完!
創(chuàng)新互聯(lián)專注為客戶提供全方位的互聯(lián)網(wǎng)綜合服務(wù),包含不限于網(wǎng)站制作、做網(wǎng)站、東方網(wǎng)絡(luò)推廣、重慶小程序開發(fā)、東方網(wǎng)絡(luò)營銷、東方企業(yè)策劃、東方品牌公關(guān)、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等,從售前售中售后,我們都將竭誠為您服務(wù),您的肯定,是我們大的嘉獎;創(chuàng)新互聯(lián)為所有大學(xué)生創(chuàng)業(yè)者提供東方建站搭建服務(wù),24小時服務(wù)熱線:18980820575,官方網(wǎng)址:muchs.cn對于這樣的效果,在各大移動端項目中幾乎是隨處可見,為什么呢?
我們都知道,對于移動端也就是手機(jī)上,我們頁面的寬度并不像PC端那樣大,可以顯示很長的導(dǎo)航項,但對于我們移動端來說,由于功能的拓展,或者業(yè)務(wù)的細(xì)分,往往導(dǎo)航項也會隨之增多,一旦超過移動端在一行的頁面顯示寬度,那便會出現(xiàn)導(dǎo)航項換行的現(xiàn)象,雖說也有這樣布局,但一旦導(dǎo)航項增多到一定程度的時候,我們的頁面(首頁)將均被導(dǎo)航項霸占,這樣不僅影響重點內(nèi)容的展示同時對用戶的體驗度也有很大程度的影響!所以,為了解決這相關(guān)問題,出現(xiàn)了橫向滾動條,主要有幾點好處:
?毫無疑問的一點,用戶體驗好:用戶可以根據(jù)自己的需要,滑動導(dǎo)航的方式選擇自己的方式
?便于管理與維護(hù)
?使得頁面變得更為美觀
?突出主體業(yè)務(wù)
那么這么一個用戶體驗好,然后又實用的效果是怎么實現(xiàn)的呢?
為了堅持“不重復(fù)造輪子,在理解研究輪子的基礎(chǔ)上進(jìn)行改革創(chuàng)新”的原則,我選擇了滴滴團(tuán)隊的開源框架 —— cube-ui
cube-ui 框架的官方文檔地址:https://didi.github.io/cube-ui/#/zh-CN/docs/introduction
在開始實現(xiàn)之前,本博主也是踩了不少坑啊,吐槽就不說了,說多了都是淚啊!下面進(jìn)入主題:
cube-ui 所提供的組件中,有個 Scroll 的組件,是一個基于better-scroll進(jìn)行封裝的組件.其實現(xiàn)原理我就不過多贅述了,去看了文檔或者平時弄過相關(guān)效果的大家都知道.
大概的一個 HTML 結(jié)構(gòu)就是:一個大的盒子套了兩個小盒子,一個是滾動導(dǎo)航,另一個是額外拓展(對本效果不影響,可以忽略)
<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 是我傳入的導(dǎo)航項數(shù)據(jù),是一個本地 mock 數(shù)據(jù),共八項
樣式部分:這里是實現(xiàn)的重點!因為對于 Scroll 組件,內(nèi)容元素.cube-scroll-content在滾動方向上的長度必須大于容器元素,分為縱向滾動和橫向滾動,這里實現(xiàn)的是橫向滾動,縱向的原理也是大同小異,取決于滾動的方向采取不同的樣式.
.nav-scroll-list-wrap position relative padding-right 120px
大盒子部分的樣式對于該需求幾乎無影響,這里主要是想說下,設(shè)置為相對定位,是為了子元素的定位,子絕父相,而內(nèi)邊距是為了騰出一部分位置給采用絕對定位的子元素(搜索圖標(biāo)),同時這也是一個布局技巧和滾動的關(guān)鍵,為什么這么說呢?
首先,布局技巧:可以騰出一部分位置給拓展功能項用,其次可以解決拓展功能項因為增加 z-index 而將滾動的最后一個導(dǎo)航項遮擋住的問題;
滾動的關(guān)鍵:假如沒有這個內(nèi)邊距,那么我八個導(dǎo)航項根據(jù)其占據(jù)的寬度將不能大于容器元素,從而出現(xiàn)無法滾動的現(xiàn)象,而這個內(nèi)邊距的出現(xiàn)正好是可以減小容器元素的寬度,那么只要導(dǎo)航項足夠且不少的情況下是可以實現(xiàn)內(nèi)容元素在滾動方向上的長度大于容器元素的,但如果在項目初期,導(dǎo)航項過少,只有四五個的情況下不建議使用這個方法,這種情況一般都是采取傳統(tǒng)的解決方法:在傳入數(shù)組導(dǎo)航的長度基礎(chǔ)上乘以一個數(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)類似頭條效果的橫向滾動導(dǎo)航條”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對大家有幫助,更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
分享文章:Vue.js+cube-ui如何實現(xiàn)類似頭條效果的橫向滾動導(dǎo)航條-創(chuàng)新互聯(lián)
本文URL:http://muchs.cn/article6/dejpog.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供用戶體驗、定制網(wǎng)站、網(wǎng)站設(shè)計公司、網(wǎng)站收錄、靜態(tài)網(wǎng)站、外貿(mào)網(wǎng)站建設(shè)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容