Vue實現(xiàn)tab導(dǎo)航欄并支持左右滑動功能
本文主要介紹:利用Vue實現(xiàn)tab導(dǎo)航欄,并且通過flex布局實現(xiàn)左右滑動,計算按鈕的位置,當(dāng)點擊第一屏展示的最后一個且還有元素未展示時,自動滑動顯示出未顯示的元素。
tab導(dǎo)航欄布局:
<section class="theme-list"> <div class="fixed-nav" ref="fixednav"> <div class="fixed-nav-content"> <p v-for="(item, index) in theme" :key="index" :class="['tab-title', activeId === index && 'select-tab']" @click="changeTab(index, $event)" > {{ item }} </p> </div> </div> </section>
theme: ['CSDN博客', '博客園', '高考加油', '中考加油', '小歡喜', '七十周年'], activeId: 0
導(dǎo)航欄樣式代碼:
.theme-list { margin-top: 12px; } .fixed-nav { overflow-x: scroll; -webkit-overflow-scrolling: touch; } .fixed-nav-content { display: flex; } .tab-title { padding: 0 13px; margin-right: 12px; color: #141414; border-radius: 13px; font-size: 12px; flex-shrink: 0; height: 0.52rem; line-height: 0.52rem; }
此時我們可以實現(xiàn)下面的樣式,并且可以左右滑動tab:
需要注意的是,在樣式代碼中需要添加flex-shrink : 0
,這樣才會當(dāng)tab寬度大于外部容器寬度時不會收縮。
這樣,我們基本的tab導(dǎo)航欄已經(jīng)實現(xiàn)了,現(xiàn)在我們來實現(xiàn):點擊“中考加油”時,整個tab向左滑動,顯示出剩下的tab元素。
changeTab(id, event) { // 如果選擇的和當(dāng)前激活的不同 if (id !== this.activeId) { this.activeId = id; // 計算當(dāng)前按鈕的位置,看是否需要移動 const spanLeft = event.clientX; // 當(dāng)前點擊的元素左邊距離 const divBox = document.querySelector(".select-tab").clientWidth / 2; // 點擊的元素一半寬度 const totalWidths = document.body.clientWidth; // 屏幕總寬度 const widths = totalWidths / 2; // 一半的屏幕寬度 const spanRight = totalWidths - spanLeft; // 元素的右邊距離 const scrollBox = document.querySelector(".fixed-nav"); // 獲取最外層的元素 const scrollL = scrollBox.scrollLeft; // 滾動條滾動的距離 // 當(dāng)元素左邊距離 或者 右邊距離小于100時進行滑動 if (spanRight < 100 || spanLeft < 100) { scrollBox.scrollLeft = scrollL + (spanLeft - widths) + divBox; } } }
通過這個方法可以實現(xiàn)tab的自動滾動了,但是此時還有一個問題是:在滑動的時候會顯示出滾動條,顯然是不太美觀的。
/*定義滾動條高寬及背景 高寬分別對應(yīng)橫豎滾動條的尺寸*/ ::-webkit-scrollbar { width: 0.01rem; opacity: 0; display: none; } /*定義滾動條軌道 內(nèi)陰影+圓角*/ ::-webkit-scrollbar-track { background-color: #fff; opacity: 0; } /*定義滑塊 內(nèi)陰影+圓角*/ ::-webkit-scrollbar-thumb { width: 0.01rem; border-radius: 0.01rem; opacity: 0; }
這樣,一個導(dǎo)航條就實現(xiàn)了,可以在結(jié)合公司的業(yè)務(wù)修改一下導(dǎo)航條的樣式就可以啦!
到此這篇關(guān)于Vue實現(xiàn)tab導(dǎo)航欄,支持左右滑動的文章就介紹到這了,更多相關(guān)Vue左右滑動導(dǎo)航欄內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Vue3封裝ElImageViewer預(yù)覽圖片的示例代碼
本文主要介紹了Vue3封裝ElImageViewer預(yù)覽圖片的示例代碼,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07vue.js實現(xiàn)含搜索的多種復(fù)選框(附源碼)
這篇文章主要給大家介紹了利用vue.js實現(xiàn)含搜索的多種復(fù)選框的相關(guān)資料,文中給出了簡單的介紹,但提供了完整的實例源碼供大家下載學(xué)習(xí),相信對大家具有一定的參考價值,需要的朋友們下面來一起看看吧。2017-03-03Vue通過moment插件實現(xiàn)獲取當(dāng)前月的第一天和最后一天
這篇文章主要介紹了Vue 結(jié)合插件moment 實現(xiàn)獲取當(dāng)前月的第一天和最后一天,本文通過實例代碼給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-10-10vue-pdf實現(xiàn)pdf在線預(yù)覽并實現(xiàn)自定義預(yù)覽框高度
這篇文章主要介紹了vue-pdf實現(xiàn)pdf在線預(yù)覽并實現(xiàn)自定義預(yù)覽框高度方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-03-03