vue可滑動的tab組件如何使用

本文小編為大家詳細介紹“vue可滑動的tab組件如何使用”，內容詳細，步驟清晰，細節處理妥當，希望這篇“vue可滑動的tab組件如何使用”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學習新知識吧。

需求:

1. 每個tab-item的間距是相同的，可定制

2. 每一個tab-item的寬度是隨著文字的增多而寬度增大

3. 當tab-item小于等于4個時，tab-item填滿當前屏幕，平分剩余空間；當tab-item超過4個時，tab可滑動選擇

4. 點擊tab-item時，底部橫線居中顯示，跟隨在點擊的tab-item底部

5. 從上一個頁面點擊一級分類，進入此頁面，顯示上一頁面點擊的一級分類名稱，居中顯示，樣式高亮

先展示效果截圖

前期知識點

1）offsetLeft：子元素相對于父元素最左上角側的橫向偏離位置

2）offsetWidth： 元素的寬度

3）scrollLeft： 滑動到對應的x坐標

4）定位元素style.left的運用

5）vux組件之滑動tab的運用 （需要用到組件自帶的onItemClick()方法，通過dom，可以起到點擊該tab-item的作用）

難點

1）使用vux的可滑動的tab，修改組件css，如何令到每一個tab的間距為響應式的。

原本vux的可滑動的tab是根據scrollWidth的長度來自動計算每一個tab-item的寬度的，因為包含這tab-item的tabBox這個div使用的是flex布局，而tab-item是它的子元素，它會自動沾滿tabBox。如果文字超出了tab-item的寬度，文字就會被隱藏。

可以通過修改vux-tab-item這個樣式來自定義樣式，把子元素的彈性屬性去除，并且設置他的padding，這樣可以呈現出文字能顯示全，并且每個tab-item間距相同的效果，css如下：

/*改變原來tabBox的flex布局*/
.mpm-container .vux-tab .vux-tab-item {
  display: inline-block;
  width: auto;
  height: 100%;
  padding: 0 10px;
  flex: none;
  background: transparent;
  overflow: hidden;
}

2）這個組件最核心之一的就是底部bar的精準定位跟隨

因為上面的1）改變了布局，所以導致底部bar跟隨不準確的情況，我們可以定制bar。在vux里面，bar是一個div，它有滑動的動畫，我的做法是這樣的，首先通過right讓它置于tab的最左側，然后通過按鈕點擊事件獲得相對應的tab-item元素的下標，然后使用for循環從第一tab-item開始尋找，如果不為改元素，則把它的元素寬度進行累加，直到找到該需激活的tab-item，然后通過數學計算可把bar定位在該元素的底部并且居中，代碼如下：

onItemClick(keyword, index) {
      let barLeft = 0;
      document.getElementsByClassName('vux-tab-ink-bar')[0].style.right = '100%';
      for (let i = 0; i < this.list.length; i++) {
        if (document.getElementsByClassName('vux-tab-item')[i].innerText === keyword) {
          barLeft += document.getElementsByClassName('vux-tab-item')[i].offsetWidth / 2;
          //為什么是15？因為底部bar長度為30px，這樣做可以讓bar的中心對齊tab-item的中心
          barLeft -= 15;
          break;
        }
        barLeft += document.getElementsByClassName('vux-tab-item')[i].offsetWidth;
      }
      document.getElementsByClassName('vux-tab-ink-bar')[0].style.left = (barLeft + 'px');
    },

3）從前一個頁面點擊一級分類進入商品列表頁，自動選中并在屏幕居中顯示被選中的tab-item

當超出手機的可視寬度時,獲取當前屏幕寬度，然后評分長度，計算之后，平均分給tab-item，因為每一個tab-item自己的樣式中有設置的padding屬性，所以間距相同，不需要額外為間距分配空間。

否則則不需要分配寬度，因為是flex布局的子元素，每一個tab-item會根據自己的文字得到自己的寬度。

附完整代碼:

<template>
  <div class="mpm-container">
    <div >
      <tab ref="tabBox" bar-active-color="#149c81" active-color="#149c81" :line-width="4" :custom-bar-width="getBarWidth" v-model="tabD" :>
        <tab-item v-for="(item,index) in list" :key="index" @on-item-click="onItemClick(item, index)">{{item}}
        </tab-item>
      </tab>
    </div>
  </div>
</template>
 
<script>
import {
  Tab, TabItem
} from 'vux';
 
export default {
  data() {
    return {
      list: ['打印機', '訂書機11111111', '訂書機5', '打印機333333', '復讀機333333',],
      tabD: 0,
      // tab標簽div長度
      tabWidth: document.body.clientWidth,
    }
  },
  computed: {},
  components: {
    Tab, TabItem
  },
  mounted() {
    setTimeout(() => {
      this.$refs.tabBox.$children[0].onItemClick();
    }, 200)
    this.setTabWidth();
  },
  methods: {
    setTabWidth() {
      // 頁面完成刷新之后
      this.$nextTick(() => {
        var realW = 0, offW = 0;
        // realW為每一個tab-item的長度總和,因為tab-item的父級為flex布局,而tab-item的flex: none，所以初始化的時候，tab-item會根據自己的字體長度，自動擴張寬度。
        for (let i = 0; i < this.$refs.tabBox.$children.length; i++) {
          realW += this.$refs.tabBox.$children[i].$el.offsetWidth;
        }
        // 同樣是計算初始化的時候，每一個tab-item的總寬度，但當tab-item總長度大于tab的總長度時，立馬退出程序
        for (let i = 0; i < this.$refs.tabBox.$children.length; i++) {
          offW += this.$refs.tabBox.$children[i].$el.offsetWidth;
          if (offW > (document.body.clientWidth)) break
        }
        // 假如tab-item的總寬度小于顯示tabwidth，則評分tab的剩余空間，加到每一個tab-item中
        if (offW < (document.body.clientWidth)) {
          var offD = (document.body.clientWidth) - offW;
          for (let i = 0; i < this.$refs.tabBox.$children.length; i++) {
            this.$refs.tabBox.$children[i].$el.style.width = this.$refs.tabBox.$children[i].$el.clientWidth + offD / this.$refs.tabBox.$children.length + 'px';
          }
        } else {
          this.tabWidth = realW;
        }
      })
    },
    getBarWidth() {
      // 函數控制tab-bar的寬度,如果tab標簽頁數量為1，則隱藏tab-bar
      if (this.list && this.list.length === 1) {
        return '0px';
      }
      return '30px';
    },
    onItemClick(keyword, index) {
      let barLeft = 0;
      document.getElementsByClassName('vux-tab-ink-bar')[0].style.right = '100%';
      for (let i = 0; i < this.list.length; i++) {
        if (document.getElementsByClassName('vux-tab-item')[i].innerText === keyword) {
          barLeft += document.getElementsByClassName('vux-tab-item')[i].offsetWidth / 2;
          //為什么是15？因為底部bar長度為30px，這樣做可以讓bar的中心對齊tab-item的中心
          barLeft -= 15;
          break;
        }
        barLeft += document.getElementsByClassName('vux-tab-item')[i].offsetWidth;
      }
      document.getElementsByClassName('vux-tab-ink-bar')[0].style.left = (barLeft + 'px');
    },
 
  }
}
 
</script>
 
<style scoped lang="less">
/*改變原來tabBox的flex布局*/
.mpm-container .vux-tab .vux-tab-item {
  display: inline-block;
  width: auto;
  height: 100%;
  padding: 0 10px;
  flex: none;
  background: transparent;
  overflow: hidden;
}
</style>

讀到這里，這篇“vue可滑動的tab組件如何使用”文章已經介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領會，如果想了解更多相關內容的文章，歡迎關注億速云行業資訊頻道。