微信小程序开发，使用navigator实现商品分类导航

1. 官方文档指南

1.navigator（导航）： https://developers.weixin.qq.com/miniprogram/dev/component/navigator.html

2. 功能描述

页面链接。

1. navigator 在 Skyline 下视为文本节点，只能嵌套文本节点（如 text），不能嵌套 view、button 等普通节点

错误示例：

 <button> <navigator>foo</navigator> </button>

2. 新增 span 组件用于内联文本和图片如：

<span> <image> </image> <navigator>bar</navigator> </span>

3. 通用属性

属性	类型	默认值	必填	说明	最低版本
target	string	self	否	在哪个目标上发生跳转，默认当前小程序	2.0.7
url	string	-	否	当前小程序内的跳转链接	1.0.0
open-type	string	navigate	否	跳转方式	1.0.0
delta	number	1	否	当 open-type 为 ‘navigateBack’ 时有效，表示回退的层数	1.0.0
app-id	string	-	否	当 target=“miniProgram” 且 open-type=“navigate” 时有效，要打开的小程序 appId	2.0.7
path	string	-	否	当 target=“miniProgram” 且 open-type=“navigate/navigateBack” 时有效，打开的页面路径，如果为空则打开首页	2.0.7
extra-data	object	-	否	当 target=“miniProgram” 且 open-type=“navigate” 时有效，需要传递给目标小程序的数据，目标小程序可在 App.onLaunch(), App.onShow() 中获取到这份数据	2.0.7
version	string	release	否	当 target=“miniProgram” 且 open-type=“navigate” 时有效，要打开的小程序版本	2.0.7
short-link	string	-	否	当 target=“miniProgram” 时有效，当传递该参数后，可以不传 app-id 和 path。链接可以通过【小程序菜单】>【复制链接】获取。	2.18.1

更多详情，请阅读官方文档

open-type 合法值

合法值	说明	最低版本
navigate	对应wx.navigateTo 或 wx.navigateToMiniProgram的功能	-
redirect	对应wx.redirectTo 的功能	-
switchTab	对应wx.switchTab 的功能	-
reLaunch	对应wx.reLaunch 的功能	1.1.0
navigateBack	对应wx.navigateBack 或 wx.navigateBackMiniProgram（基础库 2.24.4 版本支持）的功能	1.1.0
exit	退出小程序，target=“miniProgram” 时生效	2.1.0

温馨提示：

1. 当open-type取值为navigate时 ：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面
2. 当open-type取值为 redirect时 ：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。
3. 当open-type取值为 switchTab时 ：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
4. 当open-type取值为 reLaunch时 ： 关闭所有页面，打开到应用内的某个页面
5. 当open-type取值为 navigateBack时 ： 关闭当前页面，返回上一页面或多级页面

4. 代码实现过程

index.wxml布局

 <view class="good-nav">
    <navigator url="/pages/list/list">
      <view>
        <image src="https://imgpub.chuangkit.com/designTemplate/2017/11/21/35566198_thumb?v=1587447600000&amp;x-oss-process=image/resize,w_600/sharpen,100/format,webp" />
        <text>鲜花玫瑰</text>
      </view>
    </navigator>
    <navigator url="/pages/list/list">
      <view>
        <image src="https://imgpub.chuangkit.com/designTemplate/2017/11/21/35566198_thumb?v=1587447600000&amp;x-oss-process=image/resize,w_600/sharpen,100/format,webp" />
        <text>鲜花玫瑰</text>
      </view>
    </navigator>
    <navigator url="/pages/list/list">
      <view>
        <image src="https://imgpub.chuangkit.com/designTemplate/2017/11/21/35566198_thumb?v=1587447600000&amp;x-oss-process=image/resize,w_600/sharpen,100/format,webp" />
        <text>鲜花玫瑰</text>
      </view>
    </navigator>
    <navigator url="/pages/list/list">
      <view>
        <image src="https://imgpub.chuangkit.com/designTemplate/2017/11/21/35566198_thumb?v=1587447600000&amp;x-oss-process=image/resize,w_600/sharpen,100/format,webp" />
        <text>鲜花玫瑰</text>
      </view>
    </navigator>
    <navigator url="/pages/list/list">
      <view>
        <image src="https://imgpub.chuangkit.com/designTemplate/2017/11/21/35566198_thumb?v=1587447600000&amp;x-oss-process=image/resize,w_600/sharpen,100/format,webp" />
        <text>鲜花玫瑰</text>
      </view>
    </navigator>
  </view>

index.wxss 样式

.good-nav {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 20rpx;
}

.good-nav view {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.good-nav image {
  width: 80rpx;
  height: 80rpx;
  border-radius: 40rpx;
}
.good-nav text {
  font-size: 24rpx;
  margin-top: 12rpx;
}

5. 运行效果图

6 运行可能存在的问题

1. 在模拟上，可能会出现点击不跳转，但运行在真机上面没问题

解决方案： 修改【调试基础库版本】，如下图所示：

2. 跳转的地址url格式不规范，一定要以/ 反斜杠打头

正确示例：

 <navigator url="/pages/list/list"> </navigator>

错误示例：

 <navigator url="pages/list/list"> </navigator>