创新互联百度小程序教程：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页面导航
    文章网址：http://www.shufengxianlan.com/qtweb/news18/428668.html

    网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

    广告

    声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

    猜你还喜欢下面的内容

    营销型网站建设知识

    行业网站建设

    成都建网站　　 　成都小程序　　 　物流公司网站建设方案　　 　成都微信公众号开发　　 　腾讯免备案主机　　 　南京护栏钻孔机　　 　高端网站建设　　 　营销型网站建设　　 　成都微信二次开发公司　　 　主机租用　　 　混凝土搅拌车　　 　绵阳科技城电信IDC机房　　 　青羊总部基地　　 　国泰民安消防　　 　网络营销公司　　 　成都营销网站制作　　 　交互设计　　 　专业网站设计　　 　成都微信小程序　　 　400电话办理