
4.5 导航组件
导航组件<navigator>用于单击跳转页面链接,其对应的属性如表4-40所示。
表4-40 navigator组件属性

其中open-type属性对应的5种取值如表4-41所示。
表4-41 open-type属性

注意:上述等同功能的用法详见第11章“界面API”。
例如:

上述代码表示在导航组件<navigator>中内嵌按钮组件<button>来实现跳转功能。当前<navigator>组件并未声明open-type属性,因此表示默认情况,即跳转新页面打开new.wxml。
如果需要传递数据给新页面,<navigator>组件的url属性值可以使用如下格式
<navigator url="跳转的新页面地址?参数1=值1&参数2=值2&…参数N=值N">
其中参数名称可以由开发者自定义,参数个数为一个至若干个均可,多个参数之间使用&符号隔开。例如:

上述代码表示在打开新页面的同时传递了date=20180803这条数据给新页面使用。
在新页面JS文件的onLoad()函数中可以获取到该参数,代码如下:

【例4-21】 导航组件navigator的简单应用
主页面WXML(pages/demo04/navigator/navigator.wxml)的代码片段如下:

视频讲解

新页面新内容的WXML(pages/demo04/new/new.wxml)的代码片段如下:
<text>新窗口打开的新页面,可以返回navigator.wxml</text>
当前页面新内容的WXML(pages/demo04/redirect/redirect.wxml)的代码片段如下:
<text>重定向的新页面,无法返回navigator.wxml</text>
运行效果如图4-35所示。

图4-35 导航组件navigator的简单应用
【代码说明】
本示例共有3个页面,即初始页面navigator.wxml、新页面内容new.wxml、重定向内容redirect.wxml。在初始页面使用了两个<navigator>组件分别用于打开new.wxml和redirect.wxml。由图4-35可见,新页面打开的新内容可以返回初始页面,相当于在初始页面上方又覆盖了一层新页面;而重定向打开的新内容是无法返回初始页面的,相当于直接替换掉了初始页面的内容。