小程序：导航组件

导航组件

navigator

页面链接。

open-type:

navigate 保留当前页面，跳转到应用内的某个页面
redirect 关闭当前页面，跳转到应用内的某个页面
reLaunch 关闭所有页面，打开到应用内的某个页面
switchTab 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

基本使用

 <navigator url="/pages/index/index" >跳转到新页面</navigator>

导航方式

跳转到新页面

 <navigator url="/pages/index/index" >跳转到新页面</navigator>

在当前页打开

<navigator url="/pages/index/index"  open-type="redirect" >在当前页打开</navigator>

跳转到标签页

对比不加open-type="switchTab" 有什么不同：

<navigator url="/page/index/index" open-type="switchTab" >切换 Tab</navigator>
<navigator url="/pages/index/index"  >切换 Tab</navigator>

跳转到其他小程序

<navigator target="miniProgram" open-type="navigate" app-id="" path="" extra-data="" version="release">打开绑定的小程序</navigator>

给导航添加样式

示例代码

.navigator-hover {
  color:blue;
}
.other-navigator-hover {
  color:red;
}

sample.wxml：

<view class="btn-area">
  <navigator url="/pages/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
  <navigator url="/pages/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>

导航传参

navigator/index.wxml

< view style="text-align:center"> {{title}} </view>
<view> 点击左上角返回回到之前页面 </view>

navigator/js:

Page({
  ...
  onLoad: function(options) {
    this.setData({
      title: options.title
    })
  }
  ...
}),

redirect/index.wxml

<view style="text-align:center"> {{title}} </view>
<view> 点击左上角返回回到上级页面 </view>

redirect/index.js:

Page({
  ...
  onLoad: function(options) {
    this.setData({
      title: options.title
    })
  }
  ...
})