Navigation 导航
Navigation组件的页面包含主页和内容页。主页由标题栏、内容区和工具栏组成,
分栏模式
NavigationMode.Split
完整代码:
@Entry
@Component
struct NavigationExample {
private arr: string[] = ['男装', '女装', '童装'];
build() {
Column() {
Navigation() {
TextInput({ placeholder: '搜索...' })
.width("90%")
.height(40)
.backgroundColor('#FFFFAA')
List({ space: 12 }) {
ForEach(this.arr, (item) => {
ListItem() {
NavRouter() {
Text("" + item)
.width("100%")
.height(72)
.backgroundColor('#FFFFCC')
.borderRadius(24)
.fontSize(16)
.fontWeight(500)
.textAlign(TextAlign.Center)
NavDestination() {
Text("内容" + item)
}
.title("主题" + item)
}
}
}, item => item)
}
.width("90%")
.margin({ top: 12 })
}
.title("主导航")
.mode(NavigationMode.Split)
//设置菜单栏
.menus([
{value: "", icon: "./common/image/a5.svg", action: ()=> {}},
// {value: "", icon: "./common/image/a5.svg", action: ()=> {}}
])
//设置导航栏
.toolBar({items: [
{value: "首页", icon: "./common/image/a2.svg", action: ()=> {}},
{value: "购物车", icon: "./common/image/a3.svg", action: ()=> {}},
{value: "订单", icon: "./common/image/a4.svg", action: ()=> {}}
]})
}
.height('100%')
.width('100%')
.backgroundColor('#F1F3DD')
}
}
自适应模式
Navigation() { …} .mode(NavigationMode.Auto)
单页面模式
Navigation() {
…
}
.mode(NavigationMode.Stack)
Mini模式
普通型标题栏,用于一级页面不需要突出标题的场景。
Full模式
强调型标题栏,用于一级页面需要突出标题的场景。
Navigation() { …}
.titleMode(NavigationTitleMode.Full)
以上内容参考“官方文档”