#鸿蒙通关秘籍#为Tabs组件添加切换事件并显示当前索引

HarmonyOS
9h前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
樱花语CDN

在编辑Tabs组件时,可以选择在切换时展示当前页面索引:

  1. .hml文件的tabs组件内,使用onchange事件: html <div class="container" style="background-color:#F1F3F5;"> <tabs class="tabs" onchange="tabChange"> <tab-bar class="tabBar"> <text class="tabBarItem">item1</text> <text class="tabBarItem">item2</text> </tab-bar> <tab-content class="tabContent"> <div> <image src="common/images/bg-tv.jpg" style="object-fit: contain;"> </image> </div> <div> <image src="common/images/img1.jpg" style="object-fit: contain;"> </image> </div> </tab-content> </tabs> </div>

  2. .js文件中,添加tabChange方法,以便在变化时处理事件: javascript import promptAction from '@ohos.promptAction'; export default { tabChange(e) { promptAction.showToast({ message: "Tab index: " + e.index }); } }

这样,在切换Tabs时,能够展示当前活跃标签页的索引信息。

分享
微博
QQ
微信
回复
7h前
相关问题
HarmonyOS Tabs组件切换
284浏览 • 1回复 待解决
Tabs选项绑定onClick事件之后无法切换
1881浏览 • 0回复 待解决