写在前面:
观众老爷们好呀,这里是前端小刘不怕牛牛频道,小程序系列又更新了呀,今天的内容是微信小程序的页面导航,非常重要,赶紧拿起小本本记起来呀!


这样我们就实现了点击跳转到tarBar设置的页面中啦。

<navigator url="/pages/list/list">点击跳转</navigator>

你还可以在里面嵌套其他组件,比如嵌套一个button

1.1.2 导航到非tarBar页面

tarBar页面就是你在page文件夹已经定义的页面,但是没有在app.json中的tarBar配置。

在实际开发中,这种场景也是非常多见了,一个比较复杂的小程序都会有比较多的页面,而这么多页面又不会都在tarBar中配置,所有这么页面的跳转就得靠这个方法来实现啦。

与上文一样,也是需要urlopen-type两个属性,url的写法不变,有变化的是open-type的值需要该为navigate

<navigator url="/pages/list/list" open-type='navigate'></navigator>

1.1.3 后退导航

还可以实现页面后退功能。

这时候我们就不用设置url属性了,需要更改的是,设置open-type的值为navigateBack

我们可以通过设置delta设置回退的层级,如果不设置,那么默认值将会为1。

<navigator open-type="navigateBack" delta='1'></navigator>

1.2 编程式导航

编程式导航是利用微信小程序顶级对象wx下面的几个方法来实现,接下来我们来一一讲解。

1.2.1 导航到tarBar页面

我们将使用wx下的switchTab(obj)方法,其中obj为对象。

对象中有四个属性,urlsuccessfailcomplete

其中`

  • url是需要跳转的页面地址
  • success 是接口调用成功执行的回调函数
  • fail是接口调用失败执行的回调函数
  • complete是完成调用执行的回调函数,无论成功与否,都会执行。
wx.swithTab({url : '/pages/list/list',...)}

1.2.2 导航到非tarBar页面

实现该功能我们需要调用wx下的navigateTo(obj)方法。

对象中的参数类型与1.2.1一致。

wx.navigateTo({url : '/page/list/list',success : function(){console.log('success');}})

1.2.3 后退导航

这里的后退导航功能,同样的我们需要用到wx顶级对象下的navigateBack(obj)方法。

不过不同的是,obj对象中的参数,url改为delta,表示会退的 层级,默认值为1,也就是后退一页。

1.3 导航传参

如果我们实现页面跳转之后,下一个页面想要调用前一个页面的参数时,我们该怎么办?

这时候就可以用到导航传参了,导航传参其实和在浏览器中使用GET请求很像,可以把参数设置在url中,传递到下一个页面。

在格式上也是通过键值对的方法,路径跟参数之间用?隔开,键与值之间用=隔开,每个参数之间着用&隔开。

如下所示:

url= "/pages/list/list?name=myname&pass=yes"

今天的小程序文章到这里就结束啦,如果觉得对您有帮助的话,可以关注牛牛接下来的文章,感谢您对支持,您的支持是我创作的最大动力!!!

债见~~