HMOS如何添加新页面并跳转

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

@Entry
@Component
struct UIContainerPage {
	private list = [
		"组件-常用组件",
		"组件-气泡和菜单",
		"页面路由",
		"组件导航",
		"页面路由",
		"显示图片",
		"绘制几何形状",
		"使用动画",
		"下拉刷新组件",
	]
	
	build() {
		Column() {
			Column() {
				Text("鸿蒙学习大纲").fontSize(16).align(Alignment.Center)
					.margin({ top: 10, bottom: 10 })
			}.height(40)

			List() {

				ForEach(this.list, (item: string) => {
					ListItem() {

						Button(item, { type: ButtonType.Normal, stateEffect: true })
							.borderRadius(10)
							.backgroundColor(0xff31abff)
							.width('70%')
							.height(30)
							.align(Alignment.Center)
							.onClick(() => {
								console.info("您进入{}部分学习", item)
							})
					}
					.width('100%')
					.height(40)
				})
			}
			.alignListItem(ListItemAlign.Start)
		}.backgroundColor(Color.White)
	}
}

1
2
3
4
5
6
7

{
  "src": [
    "pages/MainPage",
    "pages/Index",
    "pages/UIContainerPage"
  ]
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

	handleButtonEvent(item: string) {
		let url: string = ''

		switch (item) {
			case "UI开发":
				url = 'pages/UIContainerPage'
				break;
			default:
				console.error(`No page found for item: ${item}`)
				return; 
		}

		if (null == url) {
			return
		}


		router.pushUrl({ url: url }, router.RouterMode.Standard, (err) => {
			if (err) {
				console.error(`Invoke pushUrl failed, code is ${err.code}, message is ${err.message}`)
				return
			}
			console.info('Invoke pushUrl succeeded.')
		});
	}