1.涉及到的技术点
- 选项卡 (Tabs)的使用
官方文档指南:https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkts-navigation-tabs-V5?catalogVersion=V5
2.demo实现过程
@Entry
@Component
struct Index {
build() {
Column() {
Tabs() {
TabContent() {
Text('最新的内容').fontSize(30)
}
.tabBar('最新')
TabContent() {
Text('华语的内容').fontSize(30)
}
.tabBar('华语')
TabContent() {
Text('欧美的内容').fontSize(30)
}
.tabBar('欧美')
TabContent() {
Text('韩国的内容').fontSize(30)
}
.tabBar("韩国")
TabContent() {
Text('日本的内容').fontSize(30)
}
.tabBar("日本")
TabContent() {
Text('中国香港的内容').fontSize(30)
}
.tabBar("中国香港")
TabContent() {
Text('中国台湾的内容').fontSize(30)
}
.tabBar("中国台湾")
TabContent() {
Text('印度的内容').fontSize(30)
}
.tabBar("印度")
TabContent() {
Text('泰国的内容').fontSize(30)
}
.tabBar("泰国")
TabContent() {
Text('其他的内容').fontSize(30)
}
.tabBar("其他")
}
.barMode(BarMode.Scrollable)
}
.width('100%')
.height('100%')
}
}
- 滚动导航栏可以用于顶部导航栏或者侧边导航栏的设置,内容分类较多, 屏幕宽度无法容纳所有分类页签的情况下,需要使用可滚动的导航栏
- 滚动导航栏需要设置Tabs组件的barMode属性,默认值为BarMode.Fixed表示为固定导航栏,BarMode.Scrollable表示可滚动导航栏
- 默认点击TabBar页签时切换TabContent是用动画效果的,如果不想要动画,可以设置animationMode(AnimationMode.NO_ANIMATION) 官方文档指南:https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-container-tabs-V5#animationmode12
3. 运行效果![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/d4542f3c251147f0bc6b2a2b4ffd870c.png)