​問題背景：

在日常開發中，有時需要實現tab頁面切換時更新tab樣式，比如使tab文字突出顯示。

解決方案：

快應用中，tabs配套tab-content元件實現選項卡樣式。在js程式碼中，動態繫結tabs的index屬性，監聽tabs的change事件，實現頁籤與內容頁的聯動。

實現方法：

1、通過點選頁籤，將index值賦給currentIndex。

2、通過監聽tabs，將evt.index值賦給currentIndex。

3、tab選中的時候樣式設為active；未選中的時候設為''或者初始化預設的樣式。

實現程式碼：

<template>

<div class="tutorial-page">

<div class="flexible-tabs">

<div class="flexible-tabbar">

<text class="{{currentIndex === 0 ? 'active' : ''}}" "clickTabBar(0)">聊天</text>

<text class="{{currentIndex === 1 ? 'active' : ''}}" "clickTabBar(1)">發現</text>

<text class="{{currentIndex === 2 ? 'active' : ''}}" "clickTabBar(2)">通訊錄</text>

</div>

<tabs "changeTabactive" index="{{currentIndex}}">

<tab-content class="flexible-tab-content">

<div class="tab-content-section">

<text>聊天</text>

</div>

<div class="tab-content-section">

<text>發現</text>

</div>

<div class="tab-content-section">

<text>通訊錄</text>

</div>

</tab-content>

</tabs>

</div>

</div>

</template>

<style lang="less">

.tutorial-page {

flex: 1;

.flexible-tabs {

flex: 1;

flex-direction: column;

.flexible-tabbar {

height: 100px;

padding: 0 30px;

background-color: #f1f1f1;

align-items: center;

text {

flex-grow: 1;

height: 100px;

margin: 0 30px;

text-align: center;

border: 0px solid #f1f1f1;

border-bottom-width: 5px;

}

image {

height: 50px;

width: 50px;

resize-mode: contain;

}

.active {

color: #0faeff;

border-bottom-color: #0faeff;

}

}

.flexible-tab-content {

flex: 1;

.tab-content-section {

flex: 1;

background-color: #ffffff;

justify-content: center;

}

}

}

}

</style>

<script>

export default {

private: {

currentIndex: 0

},

onInit() {

this.$page.setTitleBar({ text: 'tabs' })

},

changeTabactive(evt) {

this.currentIndex = evt.index

},

clickTabBar(index) {

this.currentIndex = index

},

}

</script>
 

效果截圖：

​

欲瞭解更多更全技術文章，歡迎訪問https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh

​