小程序轮播图跳转到公众号链接_21. 教你零基础搭建小程序：小程序的常见组件（4）- 导航标签...

艾瑞巴蒂，今天这一章再续前缘，继续唠一唠小程序的常见组件—— navigator 导航标签。

导航组件 类似超链接标签 ，用法基本相同，但是也有不一样的地方，接下来，一起来瞅瞅吧。

（一）属性1：url

1、老规矩，新建 页面 demo11

2、在demo11.wxml 文件中，删除原有代码，加入navigator 标签

保存后，左侧的页面显示“轮播图页面“，但是点击后跳转没有反应，

很正常，因为不知道要跳转到哪个页面。所以我们要设置跳转的页面路径，用到属性 url

属性 url : 要跳转的页面路径，这里的路径可以是绝对路径，也可以加相对路径。

这里补充小知识，绝对路径vs 相对路径，不了解的童鞋可以看看下方链接。

文件的绝对路径与相对路径 - 爱努力的小疯子 - 博客园​www.cnblogs.com

这里，我们加的是一个轮播图页面的路径，上节课讲到的，在页面demo10中，我们这节课就用这个做演示。

3、右键单击目录 demo10.wxml ，复制相对路径，

4、在demo11.wxml 中，加入url 属性和页面路径，代码如下：

<navigator url="/pages/demo10/demo10">
轮播图页面
</navigator>

ps: 这里一定要注意第三步复制的相对路径为”pagesdemo10demo10.wxml“，

我们需将其变化写法，为”/pages/demo10/demo10“

否则，保存后，页面不会跳转！这里一定要主要格式！！

5、保存后，点击页面中”轮播图页面“字样，发生跳转，点击左上角箭头可返回。

6、复制以上代码，粘贴一行，保存后，可发现左侧页面的内容自动换行。

这表示，此内容是块级元素，默认会自动换行，可单独设置高度、内边距等。

（二）属性2：target

target属性：可指定在哪个⽬标上发⽣跳转，默认当前⼩程序（self），

可选值 self/miniProgram (其他小程序)

（三）属性3：open- type

此属性用来设置当前的跳转⽅式。

open- type的有效值有以下几种：

下面我们一一讲解哈。

1、navigate

用法：保留当前⻚⾯，跳转到应⽤内的某个⻚⾯，但是不能跳到 tabbar ⻚⾯ 。

大家还记得 tabbar ⻚⾯是存在于哪个文件中吗？

对，tabbar在全局配置文件中。

关于tabbar字段的使用介绍，我们之前详细讲过，忘记的盆友再点回去康康昂

相信自己：06. 教你零基础搭建小程序（解读全局配置文件-tabBar字段）​zhuanlan.zhihu.com

本章我们使用的是轮播图页面，这肯定不存在tabbar，tabbar 指的是小程序下方的标签页。

比如，下面这个：

正向思维解决了，那我们逆向思考一下：

如果我们非要直接跳转至 tabbar 页面，会发生什么呢？

在demo11.wxml 中，修改url 下的路径，直接跳转至tabbar 页面，看会发生什么。

<navigator url="/pages/index/index">
轮播图页面
 </navigator>

保存后，点击”轮播图页面“，无任何反应。。。。

这就是结果。。。哈哈

2、redirct

用法：关闭当前⻚⾯，跳转到应⽤内的某个⻚⾯，但是不允许跳转到tabbar ⻚⾯。

我们在demo11.wxml 中，导航标签下，加入这一属性，页面路径不变

有以上两个图片可以看到，加入redirct属性后，可跳转到轮播图页面，但是不能返回，没有返回键。

3、switchTab

用法：跳转到 tabBar ⻚⾯，并关闭其他所有⾮ tabBar ⻚⾯

演示一下：

在demo11.wxml 中，导航标签下，这一代码中，

<navigator url="/pages/index/index"> 轮播图页面  </navigator>

加上 switchTab ，看看会发生什么？

保存后，页面显示”轮播图页面“

点击”轮播图页面“，跳转至首页，但是不能返回。

4、reLaunch

用法：关闭所有⻚⾯，打开到应⽤内的某个⻚⾯ ，包括tabbar页面。

这就是redirect 的升级版本吧。

演示一下：

在demo11.wxml 中，导航标签下，加入reLaunch，代码如下：

<navigator open-type="reLaunch" url="/pages/demo10/demo10">
轮播图页面 reLaunch属性
</navigator>

保存后，点击轮播图页面，自动跳转页面，但是不能返回。

那这里不包括tarbbar页面，大家可以自己实践一下，看在tarbbar页面应用这个属性是否可行哈。

实践出真知，毕竟。

5、navigateBack

用法：关闭当前⻚⾯，返回上⼀⻚⾯或多级⻚⾯。可通过 getCurrentPages() 获取当

前的⻚⾯栈，决定需要返回⼏层

这里指在某一界面，比如首页页面中。 点击后，跳转至首页，里面再放一个超链接，点击超链接，就可重新跳转回原来的界面，类似一个返回按钮。

6、exit

用法：退出⼩程序，target= miniProgram 时⽣效

这个有效值是要和miniProgram（其他小程序）一起使用的。

ending~~~

ending~~~关于导航组件的介绍讲完了，大家一定要多敲多练习才能牢记哦~~~

有任何有疑问的地方，欢迎下方留言或者私信我哦~~~

搜索并关注微信公众号：飞寝旺食

获取更多小程序运营干货、免费的开发教程、源代码等！

小程序开发，我们是认真的！