微信小程序页面跳转组件navigator

官方navigator组件文档 https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

在index.wxml文件中定义一个navigator

<navigator url="../list/list">访问list列表页</navigator>

跳转的页面是…/list/list

list.wxml文件的内容

<view>这里是列表页，huangbaokang</view>

编译测试，跳转默认是当前小程序跳转，跳转之后有一个回退的按钮。

如果open-type=“redirect”，在没有回退箭头。
增加点击时相关样式

index.wxml

<navigator url="../list/list" hover-class="buleTheme" >访问list列表页</navigator>

index.wxss

.buleTheme{
  color: blue;
}

跳转到新页面参数传递

<!--index.wxml-->
<navigator url="../list/list?author=huangbaokang" >访问list列表页</navigator>

<!--list.wxml-->
<view>这里是列表页，{{author}}</view>

<!--list.js-->
/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    this.setData({
      author : options.author
    })
  },

如果open-type=“switchTab”，则url不支持queryString

<!--index.wxml-->
<navigator url="../list/list" open-type="switchTab" >马上去支付</navigator>

<!--list.wxml-->
<view>支付中心页面</view>

app.json配置tabBar

  "tabBar": {
    "list": [{
      "pagePath": "pages/index/index",
      "text": "huangbaokang"
    },
    {
      "pagePath": "pages/list/list",
      "text": "支付中心"
    }
    ]
  },

点击去支付，将跳转tabBar