小程序组件 —— 26 组件案例 - 跳转到商品列表

在上一节实现了商品导航区域，这一节实现跳转到商品列表的功能；当用户在点击商品导航时，需要能够跳转到商品列表页面；在微信小程序中，如果需要进行跳转，需要使用 navigator 组件，navigator 组件有两个常用的属性：

• url：当前小程序内的跳转链接，也就是点击之后需要跳转到的页面路径；
• open-type：跳转方式
  • navigate：保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面；
  • redirect：关闭当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面；
  • switchTab：跳转到 tabbar 页面，并关闭其它所有非 tabbar 页面；
  • reLaunch：关闭所有页面，打开到应用内的某个页面；
  • navigateBack：关闭当前页面，返回上一页面或多级页面；

使用 navigator 时有两个注意事项：

• url 路径后可以带参数。参数和路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔，例如：/list?id=10&name=hua，list 页面可以在 onLoad(options) 生命周期函数中获取传递的参数；
• open-type="switchTab" 时不支持传参；

下面在开发者工具中演示一下具体用法：

在 index.wxml 中添加 navigator 组件，如下：

<navigator url="/pages/list/list">到商品列表页面</navigator>

navigator 组件中的 url 是指小程序内的跳转链接，当点击文本时，进入这个页面对应的路由；在微信小程序中，每个页面的路径都已经存放到根目录的 app.json 文件中的 pages 字段中，如下：

  "pages": [
    "pages/index/index",
    "pages/cate/cate",
    "pages/cart/cart",
    "pages/profile/profile",
    "pages/list/list"
  ]

我们找到 pages 中的 pages/list/list 路由，并粘贴到 navigator 组件的 url 中，注意在复制粘贴过程中，需要在 pages/list/list 前面添加 / ，否则无法正常跳转，填写之后，点击文本，就能实现跳转功能，如下：

下面研究一下 open-type 属性的功能，在 index.wxml 中添加下面的代码：

<navigator url="/pages/list/list" open-type="navigate">到商品列表页面</navigator>
<navigator url="/pages/cate/cate" open-type="navigate">到商品分类页面</navigator>

当我们使用 open-type 属性的 navigate 属性值时，当我们点击第一个文本能够正常跳转，但是点击第二个“跳转到商品分类页面”时，无法正常跳转；这是因为 list 商品列表页面是一个非 tabbar 页面，cate 商品分类页面是一个 tabbar 页面；navigate 属性会导致无法跳转到 tabbar 页面；

red