navigator 页面导航

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

属性说明

target 有效值

version 有效值

open-type 有效值

示例

在开发者工具中预览效果

扫码体验

请使用百度APP扫码

代码示例1

在开发者工具中预览效果

  1. <view class="card-area">    <button type="primary">    <navigator target="self" open-type="navigate" url="/pages/detail/detail?id=新页面,点击左上角返回回到之前页面" hover-class="navigator-hover" hover-stop-propagation="true">        跳转到新页面    </navigator>    </button>    <button type="primary">    <navigator target="self" open-type="redirect" url="/pages/detail/detail?id=当前页,点击左上角返回回到上级菜单" hover-class="other-navigator-hover">在当前页打开</navigator>    </button>    <button type="primary">    <navigator target="self" open-type="navigateBack" hover-class="other-navigator-hover" delta="1">返回上一页面</navigator>    </button>    <button type="primary">    <navigator target="miniProgram" open-type="exit">退出当前小程序</navigator>    </button>    <button type="primary">    <navigator target="self" open-type="switchTab" url="/pages/component/component">打开一个有Tab的页面</navigator>    </button>    <button type="primary">    <navigator target="self" open-type="reLaunch" url="/pages/detail/detail?id=新页面,点击左上角返回回到上级菜单">        关闭所有页面打开新页面    </navigator>    </button>    <button type="primary">    <navigator target="miniProgram"         open-type="navigate" extra-data="extra-data"             app-id="79RKhZ2BTvyyHitg4W3Xle4kkFgwwXyp" version="release"         bindsuccess="successHandler" bindfail="failHandler"         bindcomplete="completeHandler"        >        打开绑定的小程序    </navigator>    </button></view>
  1. Page({    data: {},    successHandler: function (e) {        console.log('success');    },    failHandler: function (e) {        console.log('fail');    },    completeHandler: function(e){        console.log('complete');    }});

代码示例2

在开发者工具中预览效果 -

  1. <web-view src="{{url}}"></web-view>
  1. Page({
  2.     data: {
  3.         src: ''
  4.     },
  5.    //接收H5页传过来的参数
  6.     onLoad(options) {
  7.         this.setData({'src': options.webViewUrl})
  8.     },
  9.     onShow(){
  10.         this.onLoad()
  11.     }
  12. });

-

  1. <view class="wrap">
  2.     <button type="primary">
  3.         <navigator target="self" open-type="navigate" url="/detail/detail?webViewUrl=https://smartprogram.baidu.com&Math.radom()" hover-class="navigator-hover" hover-stop-propagation="true">
  4.             跳转到新页面
  5.         </navigator>
  6.     </button>
  7. </view>

说明 :

navigator-hover 默认为:

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