智能小程序也是由一个一个的页面所组成的,所以,这就会涉及到一个页面切换的问题。那么,在传统的html里面,页面的切换一般都是使用链接a标签完成的。那么,在智能小程序中,链接a标签,是否还依然适用呢?这就是本文中,苏南大叔要讨论的问题。

苏南大叔:百度智能小程序,页面之间如何利用navigator进行切换? - smartapp-navigator
百度智能小程序,页面之间如何利用navigator进行切换?(图2-1)

本文测试环境:mac百度开发者工具@2.4.0。注意:本文中的navigator,并不仅仅相当于a标签。要比a标签强大复杂的多。当然,最简化使用navigator的时候,确实就是相当于a标签的。

概述

在苏南大叔的本地测试中,传统的链接a标签可以用。但是对于使用内部链接的情况,明显会出错。所以,大家还是尽量不要使用a标签,使用百度智能小程序官方推荐的navigator组件吧。

navigator组件的官方文档链接是:

官方文档里面,参数挺多的。不过,苏南大叔就推荐您记住下面的这个用法,就可以了,别的写法基本上用到的概率不大。最常见的用法是:

<navigator url="/pages/navigate/navigate" class="nav" hover-class="navigator-hover">跳转到新页面</navigator>

当然,这里可以改写classhover-class,来实现样式切换。注意,这里并不是使用伪类:hover进行定义的!因为这对于纯正的html来说,是个第三方组件!

可能存在的问题

当把一个已经存在的页面,设置为tabbar的项目后,那么原有的指向这个页面的navigator就可以会失效。错误提示如下:

{errCode: -1, errMsg: "不允许使用navigateTo方法打开一个tabbar页面"}

苏南大叔:百度智能小程序,页面之间如何利用navigator进行切换? - tabbar-switch-navigator
百度智能小程序,页面之间如何利用navigator进行切换?(图2-2)

解决方案就是:修改对应的navigator标签的open-type属性,切换为switchTab

<navigator url="/pages/next/next" open-type="switchTab"></navigator>

或者使用js进行切换:

swan.switchTab({
  url: '/pages/next/next'
});

对于这个错误的发生,说实话,苏南大叔表示无力吐槽,难以理解。

总结

链接a就这么变成了navigator,是不是还有些不习惯?更多经常智能小程序文章解析,请参见苏南大叔的博客:

如果本文对您有帮助,或者节约了您的时间,欢迎打赏瓶饮料,建立下友谊关系。
本博客不欢迎:各种镜像采集行为。请尊重原创文章内容,转载请保留链接作者。
本站采用创作共用版权协议, 要求署名、非商业用途和相同方式共享。
转载本站内容必须也遵循“署名-非商业用途-相同方式共享”的创作共用协议。
未经许可,规模化镜像抄袭本站内容的行为,将会根据有关法律法规进行维权。
程序如此灵动~》下所有原创文章,如被用于商业用途,请您按规定支付稿费。

 【加群】加入QQ群【175454274】和大家一起讨论这个问题

 【源码】本文代码片段及相关软件,请点此获取

 【绝密】秘籍文章入口,仅传授于有缘之人   baidu    智能小程序

本站的忠实读者小伙伴,正在阅读下面这些文章: