189 8069 5689

创新互联百度小程序教程：navigator页面导航

  • navigator 页面导航
    • 属性说明
      • target 有效值
      • version 有效值
      • open-type 有效值
    • 示例
      • 代码示例
      • 说明
    • 常见问题
      • Q：请问下如何关闭小程序？

    navigator 页面导航

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

    属性说明

    属性名 类型 默认值 必填 说明 最低版本

    target

    String

    self

    否

    在哪个目标上发生跳转，默认当前小程序，有效值 self/miniProgram

    2.5.2
    低版本请做兼容性处理

    url

    String

    否

    应用内的跳转链接

    		 -

    open-type

    String

    navigate

    否

    跳转方式

    		 -

    delta

    Number

    否

    当 open-type 为navigateBack时有效，表示回退的层数

    		 -

    app-id

    String

    否

    当target=”miniProgram”时有效，要打开的小程序 App Key (小程序后台设置-开发设置中)

    2.5.2
    低版本请做兼容性处理

    path

    String

    否

    当target=”miniProgram”时有效，打开的页面路径，如果为空则打开首页

    2.5.2
    低版本请做兼容性处理

    extra-data

    Object

    否

    当target=”miniProgram”时有效，需要传递给目标小程序的数据，目标小程序可在 App.onLaunch、App.onShow 中获取到这份数据

    2.5.2
    低版本请做兼容性处理

    version

    String

    release

    否

    当target=”miniProgram”时有效，要打开的小程序版本，有效值 develop（开发版），trial（体验版），release（正式版），仅在当前小程序为开发版或体验版时此参数有效；如果当前小程序是正式版，则打开的小程序必定是正式版

    2.5.2
    低版本请做兼容性处理

    hover-class

    String

    navigator-hover

    否

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

    hover-stop-propagation

    Boolean

    false

    否

    指定是否阻止本节点的祖先节点出现点击态

    		 -

    hover-start-time

    Number

    50

    否

    按住后多久出现点击态（单位：毫秒）

    		 -

    hover-stay-time

    Number

    600

    否

    手指松开后点击态保留时间（单位：毫秒）

    		 -

    bindsuccess

    String

    否

    当target=”miniProgram”时有效，跳转小程序成功

    2.5.2
    低版本请做兼容性处理

    bindfail

    String

    否

    当target=”miniProgram”时有效，跳转小程序失败

    2.5.2
    低版本请做兼容性处理

    bindcomplete

    String

    否

    当target=”miniProgram”时有效，跳转小程序完成

    2.5.2
    低版本请做兼容性处理

    target 有效值

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

    version 有效值

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

    open-type 有效值

    值 说明 最低版本

    navigate

    保留当前页面，跳转到应用内的某个页面，但是不能跳转到 tabbar 页面。对应 swan.navigateTo 的功能

    redirect

    关闭当前页面，跳转到应用内的某个页面。对应 swan.redirectTo 的功能

    switchTab

    跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面。对应 swan.switchTab 的功能

    navigateBack

    关闭当前页面，返回上一页面或多级页面。对应 swan.navigateBack 的功能

    reLaunch

    关闭所有页面，打开到应用内的某个页面。对应 swan.reLaunch 的功能

    exit

    退出小程序，target=”miniProgram”时生效

    2.5.2

    示例

    跳转编辑工具

    在开发者工具中打开

    在 WEB IDE 中打开

    扫码体验

    代码示例

    请使用百度APP扫码

    代码示例

    • SWAN
    • JS
     
 
 
      
  
  
  
      2.   
  
  
    2.  
      3.   
  
  
    3.  
      4.   
  
  
    4.  
      5.   
  
  
    5.  target="self" 
      6.   
  
  
    6.  open-type="navigate" 
      7.   
  
  
    7.  url="/component/detail/detail?id=新页面,点击左上角返回回到之前页面"
      8.   
  
  
    8.  hover-class="navigator-hover" 
      9.   
  
  
    9.  hover-start-time="50"
      10.   
  
  
    10.  hover-stay-time="600"
      11.   
  
  
    11.  hover-stop-propagation="true">
      12.   
  
  
    12.  跳转到新页面
      13.   
  
  
    13.  
      14.   
  
  
    14.  
      15.   
  
  
    15.  
      16.   
  
  
    16.  
      17.   
  
  
    17.  s-if="{{!isWeb}}" 
      18.   
  
  
    18.  target="self" 
      19.   
  
  
    19.  open-type="redirect" 
      20.   
  
  
    20.  url="/component/detail/detail?id=当前页,点击左上角返回回到上级菜单" 
      21.   
  
  
    21.  hover-class="navigator-hover" 
      22.   
  
  
    22.  hover-start-time="50"
      23.   
  
  
    23.  hover-stay-time="600"
      24.   
  
  
    24.  hover-stop-propagation="true">
      25.   
  
  
    25.  在当前页打开
      26.   
  
  
    26.  
      27.   
  
  
    27.  
      28.   
  
  
      29.   
  
  
    29.  
      30.   
  
  
    30.  
      31.   
  
  
    31.  s-if="{{!isWeb}}" 
      32.   
  
  
    32.  target="self" 
      33.   
  
  
    33.  open-type="navigateBack" 
      34.   
  
  
    34.  hover-class="navigator-hover" 
      35.   
  
  
    35.  hover-start-time="50"
      36.   
  
  
    36.  hover-stay-time="600"
      37.   
  
  
    37.  hover-stop-propagation="true"
      38.   
  
  
    38.  delta="1">
      39.   
  
  
    39.  返回上一页面
      40.   
  
  
    40.  
      41.   
  
  
    41.  
      42.   
  
  
      43.   
  
  
    43.  
      44.   
  
  
    44.  
      45.   
  
  
    45.  s-if="{{!isWeb}}" 
      46.   
  
  
    46.  target="miniProgram" 
      47.   
  
  
    47.  open-type="exit">
      48.   
  
  
    48.  退出当前小程序
      49.   
  
  
    49.  
      50.   
  
  
    50.  
      51.   
  
  
      52.   
  
  
    52.  
      53.   
  
  
    53.  
      54.   
  
  
    54.  target="self" 
      55.   
  
  
    55.  open-type="switchTab" 
      56.   
  
  
    56.  url="/entry/component/component">
      57.   
  
  
    57.  打开一个有Tab的页面
      58.   
  
  
    58.  
      59.   
  
  
    59.  
      60.   
  
  
      61.   
  
  
    61.  
      62.   
  
  
    62.  
      63.   
  
  
    63.  target="self" 
      64.   
  
  
    64.  open-type="reLaunch" 
      65.   
  
  
    65.  url="/component/detail/detail?id=新页面,点击左上角返回回到上级菜单">
      66.   
  
  
    66.  关闭所有页面打开新页面
      67.   
  
  
    67.  
      68.   
  
  
    68.  
      69.   
  
  
      70.   
  
  
    70.  
      71.   
  
  
    71.  
      72.   
  
  
    72.  target="miniProgram" 
      73.   
  
  
    73.  s-if="{{!isWeb}}" 
      74.   
  
  
    74.  open-type="navigate" 
      75.   
  
  
    75.  extra-data="extra-data" 
      76.   
  
  
    76.  app-id="79RKhZ2BTvyyHitg4W3Xle4kkFgwwXyp" 
      77.   
  
  
    77.  version="release" 
      78.   
  
  
    78.  bindsuccess="successHandler" 
      79.   
  
  
    79.  bindfail="failHandler" 
      80.   
  
  
    80.  bindcomplete="completeHandler">
      81.   
  
  
    81.  打开绑定的小程序
      82.   
  
  
    82.  
      83.   
  
  
    83.  
      84.   
  
  
    84.  
      85.   
  
  
      86.

    说明

    navigator-hover默认为：

    • CSS
     
 
 
      
  
  
  
    1. {
      2.   
  
  
    2.  background-color: rgba(0, 0, 0, 0.1);
      3.   
  
  
    3.  opacity: 0.7;
      4.   
  
  
    4. }
      5.

    常见问题

    Q：请问下如何关闭小程序？

    A：可以通过组件进行关闭当前小程序的操作。

    代码示例

    • SWAN
     
 
 
      
  
  
  
      2.   
  
  
    2.  退出当前小程序
      3.   
  
  
      4.

    分享文章：创新互联百度小程序教程：navigator页面导航
    URL链接：http://www.cdxtjz.cn/article/dpgogce.html

    其他资讯

    联系我们

    您好HELLO!
    感谢您来到成都网站建设公司，若您有合作意向，请您为我们留言或使用以下方式联系我们， 我们将尽快给你回复，并为您提供真诚的设计服务，谢谢。
    • 电话：028- 86922220 18980695689
    • 商务合作邮箱：631063699@qq.com
    • 合作QQ： 532337155
    • 成都网站设计地址：成都市青羊区锣锅巷31号五金站写字楼6楼

    小谭建站工作室

    成都小谭网站建设公司拥有多年以上互联网从业经验的团队，始终保持务实的风格，以"帮助客户成功"为已任，专注于提供对客户有价值的服务。 我们已为众企业及上市公司提供专业的网站建设服务。我们不只是一家网站建设的网络公司；我们对营销、技术、管理都有自己独特见解，小谭建站采取“创意+综合+营销”一体化的方式为您提供更专业的服务！

    小谭观点

    相对传统的成都网站建设公司而言，小谭是互联网中的网站品牌策划，我们精于企业品牌与互联网相结合的整体战略服务。
    我们始终认为，网站必须注入企业基因，真正使网站成为企业vi的一部分，让整个网站品牌策划体系变的深入而持久。
    友情链接： 康明斯发电机   虚拟主机   成都茶叶销售   网站改版维护   营山柴油发电机租赁   雅安发电机组租用   scyucang.com   广告旗帜定做   西云机房   篷房出租   
    © Copyright 2023 小谭建站工作室All Rights Reserved.  成都网站建设 / 成都网站建设 / 响应式网站建设 / 成都服务器租用