![微信小程序开发从零开始学](https://wfqqreader-1252317822.image.myqcloud.com/cover/976/44509976/b_44509976.jpg)
上QQ阅读APP看书,第一时间看更新
3.3 导航组件
在前面的章节中,我们讲过页面跳转的两种方式。本节详细讲一下导航组件navigator。该组件除了跳转功能以外,还包括了跳转小程序等功能,所以单独拿出来讲解。
navigator组件通过设置链接和跳转方式来完成页面、小程序间的跳转。navigator的自带属性如表3.11所示。
表3.11 navigator组件的自带属性
![](https://epubservercos.yuewen.com/84397A/23721403209382106/epubprivate/OEBPS/Images/Figure-T52_39671.jpg?sign=1739358320-HkgGUaEgSd4KMQZmVq3K52wnCDVXEVXJ-0-aeea15cf38f189c6b32b3e345260d449)
open-type的合法值如表3.12所示。
表3.12 open-type的合法值
![](https://epubservercos.yuewen.com/84397A/23721403209382106/epubprivate/OEBPS/Images/Figure-T53_39672.jpg?sign=1739358320-CRznqZFwxGubeLgaL7Tdj5R7yyFV4VD8-0-ef55d8a5797b6cc736db47616d194d25)
【示例3-9】
在index.wxml中新增一个页面跳转,测试跳转页为view,代码如下:
![](https://epubservercos.yuewen.com/84397A/23721403209382106/epubprivate/OEBPS/Images/Figure-P53_39673.jpg?sign=1739358320-BLYWqx1a50cBhI57sLfKVL4tHbLW3GU8-0-3ffc785834c4057d2bc9fb04ed71f977)
运行效果如图3.11所示。
![](https://epubservercos.yuewen.com/84397A/23721403209382106/epubprivate/OEBPS/Images/Figure-P53_9952.jpg?sign=1739358320-gCKjf9imumHidVFMjonRnsdQ2sRVGA5C-0-57a98e1e4acb9680a2cb79965e890364)
图3.11 navigator页面跳转
【代码解析】点击图中的“跳转到新页面”按钮即可完成跳转。这种跳转方式可以有效减少JS文件中的代码数量。如果跳转业务逻辑比较简单,推荐使用navigator进行跳转。