问题背景：
在日常开发中，有时需要实现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
标签：flex,tab,index,tabs,content,currentIndex,应用,页面 From： https://blog.51cto.com/u_14772288/5899970