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

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

這篇文章主要為大家詳細介紹了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是根據(jù)scrollWidth的長度來自動計算每一個tab-item的寬度的，因為包含這tab-item的tabBox這個div使用的是flex布局，而tab-item是它的子元素，它會自動沾滿tabBox。如果文字超出了tab-item的寬度，文字就會被隱藏。

可以通過修改vux-tab-item這個樣式來自定義樣式，把子元素的彈性屬性去除，并且設置他的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的精準定位跟隨

因為上面的1）改變了布局，所以導致底部bar跟隨不準確的情況，我們可以定制bar。在vux里面，bar是一個div，它有滑動的動畫，我的做法是這樣的，首先通過right讓它置于tab的最左側，然后通過按鈕點擊事件獲得相對應的tab-item元素的下標，然后使用for循環(huán)從第一tab-item開始尋找，如果不為改元素，則把它的元素寬度進行累加，直到找到該需激活的tab-item，然后通過數(shù)學計算可把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會根據(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', '復讀機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會根據(jù)自己的字體長度，自動擴張寬度。
? ? ? ? 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() {
? ? ? // 函數(shù)控制tab-bar的寬度,如果tab標簽頁數(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>

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

詳解Vuex中mapState的具體用法
本篇文章主要介紹了詳解Vuex中mapState的具體用法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-09-09
vue+axios實現(xiàn)post文件下載
這篇文章主要為大家詳細介紹了vue+axios實現(xiàn)post文件下載，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-09-09
Vue中v-html圖片過大導致溢出的問題及解決
這篇文章主要介紹了Vue中v-html圖片過大導致溢出的問題及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-04-04
關于引入vue.js 文件的知識點總結
在本篇文章里小編給大家分享的是關于引入vue.js 文件的知識點總結，有需要的朋友們可以參考學習下。
2020-01-01
vue3使用threejs實現(xiàn)3D卡片水平旋轉效果的示例代碼
這篇文章主要介紹了在vue3中使用threejs實現(xiàn)3D卡片水平旋轉效果,文中通過代碼示例講解的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下
2024-04-04
vue項目打包解決靜態(tài)資源無法加載和路由加載無效(404)問題
這篇文章主要介紹了vue項目打包，解決靜態(tài)資源無法加載和路由加載無效(404)問題,靜態(tài)資源無法使用，那就說明項目打包后，圖片和其他靜態(tài)資源文件相對路徑不對,本文給大家介紹的非常詳細，需要的朋友跟隨小編一起看看吧
2023-10-10
Vue.js在使用中的一些注意知識點
這篇文章主要給大家介紹了Vue.js在使用中的一些注意知識點，文中介紹的非常詳細，對大家學習或者使用Vue.js具有一定的參考學習價值，需要的朋友們下面來一起看看吧。
2017-04-04
Vue項目中該如何解決跨域問題
當協(xié)議,域名,端口其中某一個不一致的時候,就會產生跨域問題,下面這篇文章主要給大家介紹了關于Vue項目中該如何解決跨域問題的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2022-06-06
vue{{}}拼接字符串和換行符方式
這篇文章主要介紹了vue{{}}拼接字符串和換行符方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
2023-12-12
淺析在Vue中watch使用的必要性及其優(yōu)化
這篇文章主要來和大家深入討論一下在Vue開發(fā)中是否有必要一定用watch,如果換成watcheffect會如何,文中的示例代碼講解詳細,需要的可以參考下
2023-12-12