vue可滑動的tab組件使用詳解

更新時間：2022年07月20日 17:07:03 作者：黎&&軒

這篇文章主要為大家詳細(xì)介紹了vue可滑動的tab組件使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了vue可滑動tab組件使用的具體代碼，供大家參考，具體內(nèi)容如下

需求:

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

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

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

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

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

先展示效果截圖

前期知識點

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

2）offsetWidth：元素的寬度

3）scrollLeft：滑動到對應(yīng)的x坐標(biāo)

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

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

難點

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

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

可以通過修改vux-tab-item這個樣式來自定義樣式，把子元素的彈性屬性去除，并且設(shè)置他的padding，這樣可以呈現(xiàn)出文字能顯示全，并且每個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的精準(zhǔn)定位跟隨

因為上面的1）改變了布局，所以導(dǎo)致底部bar跟隨不準(zhǔn)確的情況，我們可以定制bar。在vux里面，bar是一個div，它有滑動的動畫，我的做法是這樣的，首先通過right讓它置于tab的最左側(cè)，然后通過按鈕點擊事件獲得相對應(yīng)的tab-item元素的下標(biāo)，然后使用for循環(huán)從第一tab-item開始尋找，如果不為改元素，則把它的元素寬度進行累加，直到找到該需激活的tab-item，然后通過數(shù)學(xué)計算可把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

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

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

附完整代碼:

<template>
? <div class="mpm-container">
? ? <div style="width: 100%;overflow:scroll; -webkit-overflow-scrolling:touch;">
? ? ? <tab ref="tabBox" bar-active-color="#149c81" active-color="#149c81" :line-width="4" :custom-bar-width="getBarWidth" v-model="tabD" :style="{width: tabWidth + 'px'}">
? ? ? ? <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', '復(fù)讀機333333',],
? ? ? tabD: 0,
? ? ? // tab標(biāo)簽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會根據(jù)自己的字體長度，自動擴張寬度。
? ? ? ? for (let i = 0; i < this.$refs.tabBox.$children.length; i++) {
? ? ? ? ? realW += this.$refs.tabBox.$children[i].$el.offsetWidth;
? ? ? ? }
? ? ? ? // 同樣是計算初始化的時候，每一個tab-item的總寬度，但當(dāng)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() {
? ? ? // 函數(shù)控制tab-bar的寬度,如果tab標(biāo)簽頁數(shù)量為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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: