Vue實(shí)現tab導航欄并支持左右滑動(dòng)功能

本文主要介紹：利用Vue實(shí)現tab導航欄，并且通過(guò)flex布局實(shí)現左右滑動(dòng)，計算按鈕的位置，當點(diǎn)擊第一屏展示的最后一個(gè)且還有元素未展示時(shí)，自動(dòng)滑動(dòng)顯示出未顯示的元素。

tab導航欄布局：

<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

導航欄樣式代碼：

.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;
}

此時(shí)我們可以實(shí)現下面的樣式，并且可以左右滑動(dòng)tab：

需要注意的是，在樣式代碼中需要添加flex-shrink : 0，這樣才會(huì )當tab寬度大于外部容器寬度時(shí)不會(huì )收縮。

這樣，我們基本的tab導航欄已經(jīng)實(shí)現了，現在我們來(lái)實(shí)現：點(diǎn)擊“中考加油”時(shí)，整個(gè)tab向左滑動(dòng)，顯示出剩下的tab元素。

changeTab(id, event) {
  // 如果選擇的和當前激活的不同
  if (id !== this.activeId) {
    this.activeId = id;
    // 計算當前按鈕的位置，看是否需要移動(dòng)
    const spanLeft = event.clientX; // 當前點(diǎn)擊的元素左邊距離
    const divBox = document.querySelector(".select-tab").clientWidth / 2; // 點(diǎn)擊的元素一半寬度
    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)條滾動(dòng)的距離
    // 當元素左邊距離 或者 右邊距離小于100時(shí)進(jìn)行滑動(dòng)
    if (spanRight < 100 || spanLeft < 100) {
      scrollBox.scrollLeft = scrollL + (spanLeft - widths) + divBox;
    }
  }
}

通過(guò)這個(gè)方法可以實(shí)現tab的自動(dòng)滾動(dòng)了，但是此時(shí)還有一個(gè)問(wèn)題是：在滑動(dòng)的時(shí)候會(huì )顯示出滾動(dòng)條，顯然是不太美觀(guān)的。

/*定義滾動(dòng)條高寬及背景 高寬分別對應橫豎滾動(dòng)條的尺寸*/
::-webkit-scrollbar {
  width: 0.01rem;
  opacity: 0;
  display: none;
}
/*定義滾動(dòng)條軌道 內陰影+圓角*/
::-webkit-scrollbar-track {
  background-color: #fff;
  opacity: 0;
}
/*定義滑塊 內陰影+圓角*/
::-webkit-scrollbar-thumb {
  width: 0.01rem;
  border-radius: 0.01rem;
  opacity: 0;
}

這樣，一個(gè)導航條就實(shí)現了，可以在結合公司的業(yè)務(wù)修改一下導航條的樣式就可以啦！

到此這篇關(guān)于Vue實(shí)現tab導航欄，支持左右滑動(dòng)的文章就介紹到這了,更多相關(guān)Vue左右滑動(dòng)導航欄內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！