
上QQ阅读APP看书,第一时间看更新
3.3 导航组件
在前面的章节中,我们讲过页面跳转的两种方式。本节详细讲一下导航组件navigator。该组件除了跳转功能以外,还包括了跳转小程序等功能,所以单独拿出来讲解。
navigator组件通过设置链接和跳转方式来完成页面、小程序间的跳转。navigator的自带属性如表3.11所示。
表3.11 navigator组件的自带属性

open-type的合法值如表3.12所示。
表3.12 open-type的合法值

【示例3-9】
在index.wxml中新增一个页面跳转,测试跳转页为view,代码如下:

运行效果如图3.11所示。

图3.11 navigator页面跳转
【代码解析】点击图中的“跳转到新页面”按钮即可完成跳转。这种跳转方式可以有效减少JS文件中的代码数量。如果跳转业务逻辑比较简单,推荐使用navigator进行跳转。