Harmony OS【 Tabs 导航篇】

最新推荐文章于 2025-06-27 18:33:53 发布

原创最新推荐文章于 2025-06-27 18:33:53 发布 · 219 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#Harmony

设计图：

在这里插入图片描述

代码层：

@Entry
@Component
struct Index {
	build() {
		Tabs({ barPosition: BarPosition.End }) {
		}
		.scrollable(false)
		.vertical(false)
		.divider({
			strokeWidth:  0.5,
			color: '#0d182431'
		})
		.backgroundColor('#F1f3f5')
		.padding({ top: 36, bottom: 28 })
	}
}

小技术点总结

scrollable(value: true|false)：设置是否可以通过滑动页面进行页面切换.
vertical(value: true|false)：设置是否为纵向Tab.
barPosition: BarPosition.Start|End：设置Tabs的页签位置
aliginItem()：设置子组件在水平方向上的对齐格式
justifyContent()：设置子组件在垂直方向上的对齐格式