【快应用】快应用中如何实现tab页面切换时更新tab样式？

​问题背景：

在日常开发中，有时需要实现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

​