navigator 页面导航

解释:页面链接,控制小程序的跳转,既可在当前小程序内部进行跳转,也可跳转至其他小程序。navigator 的子节点背景色应为透明色。

属性说明

属性名类型默认值必填说明最低版本
targetStringself在哪个目标上发生跳转,默认当前小程序,有效值self/miniProgram2.5.2低版本请做兼容性处理
urlString应用内的跳转链接-
open-typeStringnavigate跳转方式-
deltaNumber当 open-type 为 'navigateBack' 时有效,表示回退的层数-
app-idString当target="miniProgram"时有效,要打开的小程序 App Key (小程序后台设置-开发设置中)2.5.2低版本请做兼容性处理
pathString当target="miniProgram"时有效,打开的页面路径,如果为空则打开首页。2.5.2低版本请做兼容性处理
extra-dataObject当target="miniProgram"时有效,需要传递给目标小程序的数据,目标小程序可在 App.onLaunch(),App.onShow() 中获取到这份数据。详情2.5.2低版本请做兼容性处理
versionStringrelease当target="miniProgram"时有效,要打开的小程序版本,有效值 develop(开发版),trial(体验版),release(正式版),仅在当前小程序为开发版或体验版时此参数有效;如果当前小程序是正式版,则打开的小程序必定是正式版。2.5.2低版本请做兼容性处理
hover-classStringnavigator-hover指定点击时的样式类,当hover-class="none"时,没有点击态效果。
hover-stop-propagationBooleanfalse指定是否阻止本节点的祖先节点出现点击态。-
hover-start-timeNumber50按住后多久出现点击态,单位毫秒。-
hover-stay-timeNumber600手指松开后点击态保留时间,单位毫秒。-
bindsuccessString当target="miniProgram"时有效,跳转小程序成功。2.5.2低版本请做兼容性处理
bindfailString当target="miniProgram"时有效,跳转小程序失败。2.5.2低版本请做兼容性处理
bindcompleteString当target="miniProgram"时有效,跳转小程序完成。2.5.2低版本请做兼容性处理

target 有效值

说明
self当前小程序
miniProgram跳转到另一个小程序

version 有效值

说明
develop开发版
trial体验版
release正式版

open-type 有效值

说明最低版本
navigate对应 swan.navigateTo 的功能
redirect对应 swan.redirectTo 的功能
switchTab对应 swan.switchTab 的功能
navigateBack对应 swan.navigateBack 的功能
reLaunch对应 swan.reLaunch 的功能
exit退出小程序,target="miniProgram"时生效2.5.2

示例

在开发者工具中预览效果

扫码体验

navigator 页面导航 - 图1请使用百度APP扫码

代码示例1

在开发者工具中预览效果

  1. <view class="card-area">
  2. <button type="primary">
  3. <navigator target="self" open-type="navigate" url="/pages/detail/detail?id=新页面,点击左上角返回回到之前页面" hover-class="navigator-hover" hover-stop-propagation="true">
  4. 跳转到新页面
  5. </navigator>
  6. </button>
  7. <button type="primary">
  8. <navigator target="self" open-type="redirect" url="/pages/detail/detail?id=当前页,点击左上角返回回到上级菜单" hover-class="other-navigator-hover">在当前页打开</navigator>
  9. </button>
  10. <button type="primary">
  11. <navigator target="self" open-type="navigateBack" hover-class="other-navigator-hover" delta="1">返回上一页面</navigator>
  12. </button>
  13. <button type="primary">
  14. <navigator target="miniProgram" open-type="exit">退出当前小程序</navigator>
  15. </button>
  16. <button type="primary">
  17. <navigator target="self" open-type="switchTab" url="/pages/component/component">打开一个有Tab的页面</navigator>
  18. </button>
  19. <button type="primary">
  20. <navigator target="self" open-type="reLaunch" url="/pages/detail/detail?id=新页面,点击左上角返回回到上级菜单">
  21. 关闭所有页面打开新页面
  22. </navigator>
  23. </button>
  24. <button type="primary">
  25. <navigator target="miniProgram"
  26. open-type="navigate" extra-data="extra-data"
  27. app-id="79RKhZ2BTvyyHitg4W3Xle4kkFgwwXyp" version="release"
  28. bindsuccess="successHandler" bindfail="failHandler"
  29. bindcomplete="completeHandler"
  30. >
  31. 打开绑定的小程序
  32. </navigator>
  33. </button>
  34. </view>
  1. Page({
  2. data: {},
  3. successHandler: function (e) {
  4. console.log('success');
  5. },
  6. failHandler: function (e) {
  7. console.log('fail');
  8. },
  9. completeHandler: function(e){
  10. console.log('complete');
  11. }
  12. });

代码示例2

在开发者工具中预览效果

  • 在 detail 文件中
  1. <web-view src="{{url}}"></web-view>
Page({
    data: {
        src: ''
    },
   //接收H5页传过来的参数
    onLoad(options) {
        this.setData({'src': options.webViewUrl})
    },
    onShow(){
        this.onLoad()
    }
});
  • 在 index 文件中
<view class="wrap">
    <button type="primary">
        <navigator target="self" open-type="navigate" url="/detail/detail?webViewUrl=https://smartprogram.baidu.com&Math.radom()" hover-class="navigator-hover" hover-stop-propagation="true">
            跳转到新页面
        </navigator>
    </button>
</view>

说明 :

navigator-hover 默认为:

{
    background-color: rgba(0, 0, 0, 0.1);
    opacity: 0.7;
}