#鸿蒙通关秘籍#如何实现Tabs组件的标签切换效果及样式变化？

可以在HarmonyOS中，通过脚本动态更改属性，实现点击标签切换时的样式变换效果：

1. 设置.hml文件，使用tabs组件，并通过for指令进行重复生成元素： html <div class="container"> <tabs onchange="changeTabactive"> <tab-content> <div class="item-container" for="datas.list"> <div if="{{$item.title=='List1'?true:false}}"> <image src="common/images/bg-tv.jpg" style="object-fit: contain;"> </image> </div> <div if="{{$item.title=='List2'?true:false}}"> <image src="common/images/img1.jpg" style="object-fit: none;"> </image> </div> <div if="{{$item.title=='List3'?true:false}}"> <image src="common/images/img2.jpg" style="object-fit: contain;"> </image> </div> </div> </tab-content> <tab-bar class="tab_bar mytabs" mode="scrollable"> <div class="tab_item" for="datas.list"> <text style="color: {{$item.color}};">{{$item.title}}</text> <div class="underline-show" if="{{$item.show}}"></div> <div class="underline-hide" if="{{!$item.show}}"></div> </div> </tab-bar> </tabs> </div>

2. 设置.js文件，通过changeTabactive方法控制切换效果： javascript import promptAction from '@ohos.promptAction'; export default { data() { return { datas: { color_normal: '#878787', color_active: '#ff4500', show: true, list: [{ i: 0, color: '#ff4500', show: true, title: 'List1' }, { i: 1, color: '#878787', show: false, title: 'List2' }, { i: 2, color: '#878787', show: false, title: 'List3' }] } } }, changeTabactive (e) { for (let i = 0; i < this.datas.list.length; i++) { let element = this.datas.list[i]; element.show = false; element.color = this.datas.color_normal; if (i === e.index) { element.show = true; element.color = this.datas.color_active; } } } }

通过这样的设计，当点击不同标签时，可以在界面中直观地看到相应标签选中文字变红及下划线显示的效果。