navigate

导航组件

（对应33页，1.6.4节的扩展知识）

1navigator页面链接组件

navigator页面链接组件，是用在WXML页面中跳转的导航，它有三种类型：第一种是

保留当前页跳转，跳转后可以返回当前页，它与teTo跳转效果是一样的；第二种

是关闭当前页跳转，是无法返回当前页，它与ctTo跳转效果是一样的；第三种是跳

转到底部标签导航指定的页面，它与Tab跳转效果是一样的；navigator页面链接

组件这些跳转效果都是通过open-type属性来控制，具体属性如表所示。

属性类型默认值说明

urlString应用内的跳转链接

redirectBooleanfal

打开方式为页面重定向，对应ctTo（将被废弃，推荐使

用open-type）

open-typeStringnavigate

可选值'navigate'、'redirect'、'switchTab'，对应于

teTo、ctTo、Tab的功能

hover-classString

navigator-

hover

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

hover-start-timeNumber50按住后多久出现点击态，单位毫秒

hover-stay-timeNumber600手指松开后点击态保留时间，单位毫秒

navigato页面链接属性

下面来演示一下open-type不同导航类型的跳转效果。

（1）新建一个navigator项目，进入到文件，在pages属性里设置页面路径"pa

ges/index/index"、"pages/navigator/navigator"、"pages/redirect/redirect"，具体代码如下所示。

{

"pages":[

"pages/index/index",

"pages/navigator/navigator",

"pages/redirect/redirect"

],

"window":{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor":"#fff",

"navigationBarTitleText":"导航",

"navigationBarTextStyle":"black"

},

}

（2）进入到pages/index/文件里，设计导航三种跳转方式：保留当前页跳转、

关闭当前页跳转、跳转到tabBar页面，具体代码如下所示。

ator-hover">teTo保留当前页跳转

ator-hover">ctTo关闭当前页跳转

Tab跳转到tabBar页面

（3）进入到pages/navigator/文件里，进行界面布局，具体代码如下所

示。

保留当前页进行跳转，单击左上角可以返回到当前页

（4）进入到pages/redirect/文件里，进行界面布局，具体代码如下所示。

关闭当前页进行跳转，跳转后无法返回到当前页

（5）teTo保留当前页跳转、ctTo关闭当前页跳转这两种方式可以正

常跳转，但是Tab跳转到tabBar页面无法需要跳转，它需要在文件的tab

Bar属性里设置底部标签导航，具体代码如下所示。

{

"pages":[

"pages/index/index",

"pages/navigator/navigator",

"pages/redirect/redirect"

],

"window":{

"backgroundTextStyle":"light",

"navigationBarBackgroundColor":"#fff",

"navigationBarTitleText":"导航",

"navigationBarTextStyle":"black"

},

"tabBar":{

"lectedColor":"red",

"list":[{

"pagePath":"pages/index/index",

"text":"首页",

"iconPath":"iconPath",

"lectedIconPath":"lectedIconPath"

},{

"pagePath":"pages/redirect/redirect",

"text":"当前页打开导航",

"iconPath":"iconPath",

"lectedIconPath":"lectedIconPath"

}]

}

}

（6）Tab跳转到tabBar页面可以跳转到指定的底部标签导航页面里，但是可

以发现teTo保留当前页跳转、ctTo关闭当前页跳转这两种方式无法跳转，

是因为在里配置tabBar属性里设置底部标签导航。

（7）navigator页面链接组件，设置的跳转路径，如果带参数，像url="../navigator/navi

gator?title=navigator"，获取title的值，可以在跳转页面里js的onLoad函数里获得，具体代

码如下所示。

Page({

data:{},

onLoad:function(options){

("title="+options);

}

})

teTo保留当前页跳转

teTo保留当前页面，跳转到应用内的某个页面，使用teBack可以返

回到原页面，具体属性如表所示。

属性类型必填说明

urlString是

需要跳转的应用内非tabBar的页面的路径,路径后可以带参

数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同

参数用&分隔；如'path?key=value&key2=value2'

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

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

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

teTo属性

（1）进入到pages/index/文件里，添加一个跳转按钮，保留当前页进行跳转，

具体代码如下所示。

vigator-hover">teTo保留当前页跳转

ator-hover">ctTo关闭当前页跳转

Tab跳转到tabBar页面

保留当前页跳转

（2）进入到pages/index/文件里，添加一个navigateBtn事件函数，保留当前页

进行跳转到pages/navigator/页面里，具体代码如下所示。

Page({

navigateBtn:function(){

teTo({

url:'../navigator/navigator',

success:function(res){

(res);

},

fail:function(){

//fail

},

complete:function(){

//complete

}

})

}

})

ctTo关闭当前页跳转

ctTo关闭当前页面，跳转到应用内的某个页面，具体属性如表所示。

属性类型必填说明

urlString是

需要跳转的应用内非tabBar的页面的路径,路径后可以带参

数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同

参数用&分隔；如'path?key=value&key2=value2'

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

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

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

ctTo属性

（1）进入到pages/index/文件里，添加一个跳转按钮，关闭当前页进行跳转，

具体代码如下所示。

vigator-hover">teTo保留当前页跳转

ator-hover">ctTo关闭当前页跳转

Tab跳转到tabBar页面

保留当前页跳转

关闭当前页跳转

（2）进入到pages/index/文件里，添加一个redirectBtn事件函数，保留当前页

进行跳转到pages/navigator/页面里，具体代码如下所示。

Page({

navigateBtn:function(){

teTo({

url:'../navigator/navigator',

success:function(res){

(res);

},

fail:function(){

//fail

},

complete:function(){

//complete

}

})

},

redirectBtn:function(){

ctTo({

url:'../navigator/navigator',

success:function(res){

(res);

},

fail:function(){

//fail

},

complete:function(){

//complete

}

})

}

})

Tab跳转到tabBar页面

跳转到tabBar页面，并关闭其他所有非tabBar页面，具体属性如表所示。

属性类型必填说明

urlString是

需要跳转的tabBar页面的路径（需在的tabBar字段

定义的页面），路径后不能带参数

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

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

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

Tab属性

（1）进入到pages/index/文件里，添加一个跳转按钮，跳转到tabBar页面，

具体代码如下所示。

vigator-hover">teTo保留当前页跳转

ator-hover">ctTo关闭当前页跳转

Tab跳转到tabBar页面

保留当前页跳转

关闭当前页跳转

跳转到tabBar页面

（2）进入到pages/index/文件里，添加一个navigateBtn事件函数，保留当前页

进行跳转到pages/redirect/页面里，具体代码如下所示。

Page({

navigateBtn:function(){

teTo({

url:'../navigator/navigator',

success:function(res){

(res);

},

fail:function(){

//fail

},

complete:function(){

//complete

}

})

},

redirectBtn:function(){

ctTo({

url:'../navigator/navigator',

success:function(res){

(res);

},

fail:function(){

//fail

},

complete:function(){

//complete

}

})

},

switchBtn:function(){

Tab({

url:'../redirect/redirect',

success:function(res){

//success

},

fail:function(){

//fail

},

complete:function(){

//complete

}

})

}

})

teTo和ctTo不允许跳转到tabbar页面，只能用Tab跳

转到tabBar页面。

teBack返回上一页

teBack关闭当前页面，返回上一页面或多级页面。可通过getCurrentPages())获

取当前的页面栈，决定需要返回几层。具体属性如表所示。

属性类型必填说明

deltaNumber1返回的页面数，如果delta大于现有页面数，则返回到首页。

teBack属性

（1）进入到pages/navigator/文件里，添加一个返回按钮，单击返回按钮，

可以返回到上一级页面，具体代码如下所示。

保留当前页进行跳转，单击左上角可以返回到当前页

返回上一页

（2）进入到pages/navigator/文件里，添加backBtn事件返回函数，具体代码

如下所示。

Page({

data:{},

onLoad:function(options){

("title="+options);

},

backBtn:function(){

teBack({

delta:1

})

}

})

（3）在pages/index/文件里，单击保留当前页跳转按钮，可以进行页面跳转，

在跳转的页面里单击返回上一页按钮，可以返回到上一级页面，如图所示。

页面页面

3.4.6设置导航条

igationBarTitle(OBJECT)动态设置当前页面的标题。具体属性如表所示。

属性类型必填说明

titleString是页面标题

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

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

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

Tab属性

（1）进入到pages/navigator/文件里，对页面窗口标题重新设计，具体代码

如下所示。

Page({

data:{},

onLoad:function(options){

("title="+options);

igationBarTitle({

title:'新页面'

})

},

backBtn:function(){

teBack({

delta:1

})

}

})

（2）在pages/index/文件里，单击保留当前页跳转按钮，可以进行页面跳转，

跳转后标题变为新页面，如图所示。

页面页面

（3）在pages/navigator/文件里，如果在当前页面显示导航条加载动画，可

以使用vigationBarLoading()函数，具体代码如下所示。

Page({

data:{},

onLoad:function(options){

("title="+options);

igationBarTitle({

title:'新页面'

});

vigationBarLoading();

},

backBtn:function(){

teBack({

delta:1

})

}

})

界面效果如图所示。

导航加载效果

（4）在当前页面显示导航条加载动画，可以使用vigationBarLoading()函数，

如果想隐藏导航条加载动画，可以使用vigationBarLoading()函数。