微信小程序顶部导航栏跳转设置方法

　　一般来说，小程序跳转页面是需要开发者在前期先进行相应的设置，但是有很多用户都表示，如果能够在小程序导航栏就进行跳转就好了，那么微信小程序顶部导航栏跳转怎么设置呢?一起来看看吧。

　　微信小程序顶部导航栏跳转，共有三种形式，页面中使用navigator组件做页面链接形式路由跳转，js中可以使用wx.navigateTo--保留当前页面，跳转到应用内的某个页面，wx.redirectTo--关闭当前页面，跳转到应用内的某个页面 wx.navigateBack()--关闭当前页面，回退前一页面。

　　navigator组件做小程序页面链接

　　页面链接。

　　属*名类型默认值说明

　　urlString 应用内的跳转链接

　　redirectBooleanfalse是否关闭当前页面

　　hover-classStringnavigator-hover指定点击时的样式类，当hover-class="none"时，没有点击态效果

　　注：navigator-hover默认为{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, 的子节点背景色应为透明色

　　示例代码：

　　/** wxss **/

　　/** 修改默认的navigator点击态 **/

　　.navigator-hover {

　　color:blue;

　　}

　　/** 自定义其他点击态样式类 **/

　　.other-navigator-hover {

　　color:red;

　　}

　　跳转到新页面

　　在当前页打开(关闭了当前页面)

　　{{title}}

　　点击左上角返回回到之前页面

　　{{title}}

　　点击左上角返回回到上级页面

　　// redirect.js navigator.js

　　Page({

　　onLoad: function(options) {

　　this.setData({

　　title: options.title

　　})

　　}

　　})

　　wx.navigateTo(OBJECT)

　　保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面。

　　OBJECT参数说明：

　　参数类型必填说明

　　urlString是需要跳转的应用内页面的路径

　　successFunction否接口调用成功的回调函数

　　failFunction否接口调用失败的回调函数

　　completeFunction否接口调用结束的回调函数(调用成功、失败都会执行)

　　示例代码：

　　wx.navigateTo({

　　url: 'test?id=1'

　　})

　　注意：为了不让用户在使用小程序时造成困扰，我们规定页面路径只能是五层，请尽量避免多层级的交互方式。

　　wx.redirectTo(OBJECT)

　　关闭当前页面，跳转到应用内的某个页面。

　　OBJECT参数说明：

　　参数类型必填说明

　　urlString是需要跳转的应用内页面的路径

　　successFunction否接口调用成功的回调函数

　　failFunction否接口调用失败的回调函数

　　completeFunction否小程序接口调用结束的回调函数(调用成功、失败都会执行)

　　示例代码：

　　wx.redirectTo({

　　url: 'test?id=1'

　　})

　　以上就是关于微信小程序顶部导航栏跳转设置的全步骤了，希望大家能够参照这份资料开发成功，如果还有不懂的地方，可以在微信小程序商店搜索相关资料。

　　小程序修改导航栏颜色怎么做?

　　微信小程序导航栏返回怎么弄

　　微信小程序导航栏跳转怎么设置