卓象程序员 | 哈尔滨IT培训 | 品质教育,口碑传承 | 为做出口口相传,好口碑的教育品牌而奋斗!

卓象程序员让每一位学员高薪就业 联系我们13101507057

加微信,了解详情
您所在的位置:首页 > 文章 >小程序连载

「小程序入门连载九」小程序组件—导航
时间: 2018-11-08 16:17:00     来源: 卓象IT实训基地【原创】

上一篇文章讲解了“小程序组件 - 媒体组件”,本篇文章讲解“小程序组件 - 导航”。


导航

1. navigator——导航(页面链接,相当于a链接)

在小程序中,页面跳转链接为navigator。

1)属性——url

「小程序入门连载九」小程序组件—导航


url为应用内的跳转链接,不允许跳外链。

依旧使用test页面,test.wxml文件(也可以自行新建页面进行测试):

「小程序入门连载九」小程序组件—导航


编译预览:

「小程序入门连载九」小程序组件—导航


点击链接,跳转到日志页面:

「小程序入门连载九」小程序组件—导航


2)属性——open-type

「小程序入门连载九」小程序组件—导航


open-type属性的属性值有:

「小程序入门连载九」小程序组件—导航


①redirect——重定向

设置open-type属性的值为redirect。

「小程序入门连载九」小程序组件—导航


编译预览,加open-type属性对链接的展示样式不影响:

「小程序入门连载九」小程序组件—导航


点击链接,跳转到日志页面:

「小程序入门连载九」小程序组件—导航


页面进行重定向,没有可以点击的返回按钮。

redirect重定向可以用在检测用户登录信息是否失效,如果失效跳转到登录页面,那么这个登录页面就不能有返回按钮。

②switchTab——跳转tab栏页面使用

当不设置open-type属性时,跳转的页面为tabBar栏中的页面时,是不好使的。

跳转到首页页面,首页页面在tabBar栏。

「小程序入门连载九」小程序组件—导航


编译预览:

「小程序入门连载九」小程序组件—导航


点击链接,跳转到首页,无任何反应,跳转失败。

注意: 在小程序中,当需要跳转到tabBar栏中存在的页面时,需要将open-type属性值设为switchTab。

设置open-type属性:

「小程序入门连载九」小程序组件—导航


小程序还有很多组件,其他组件自行学习。

「小程序入门连载九」小程序组件—导航


小程序组件开始

关注卓象程序员,定期发布技术文章

下一篇文章讲解“小程序注册页面 - 生命周期”

「小程序入门连载九」小程序组件—导航


「小程序入门连载九」小程序组件—导航