#### navigator
页面链接。
| 属性名 | 类型 | 默认值 | 说明 | 最低版本 |
| ---------------------- | ------- | --------------- | ---------------------------------------- | ---------------------------------------- |
| url | String | | 应用内的跳转链接 | |
| open-type | String | navigate | 跳转方式 | |
| delta | Number | | 当 open-type 为 'navigateBack' 时有效,表示回退的层数 | |
| hover-class | String | navigator-hover | 指定点击时的样式类,当`hover-class="none"`时,没有点击态效果 | |
| hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 | [1.5.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) |
| hover-start-time | Number | 50 | 按住后多久出现点击态,单位毫秒 | |
| hover-stay-time | Number | 600 | 手指松开后点击态保留时间,单位毫秒 | |
**open-type 有效值:**
| 值 | 说明 | 最低版本 |
| ------------ | ------------------------ | ---------------------------------------- |
| navigate | 对应 `wx.navigateTo` 的功能 | |
| redirect | 对应 `wx.redirectTo` 的功能 | |
| switchTab | 对应 `wx.switchTab` 的功能 | |
| reLaunch | 对应 `wx.reLaunch` 的功能 | [1.1.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) |
| navigateBack | 对应 `wx.navigateBack` 的功能 | [1.1.0](https://mp.weixin.qq.com/debug/wxadoc/dev/framework/compatibility.html) |
**注:navigator-hover 默认为 {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, <navigator/> 的子节点背景色应为透明色**
**示例代码:**
```
/** wxss **/
/** 修改默认的navigator点击态 **/
.navigator-hover {
color:blue;
}
/** 自定义其他点击态样式类 **/
.other-navigator-hover {
color:red;
}
```
```
<!-- sample.wxml -->
<view class="btn-area">
<navigator url="/page/navigate/navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
<navigator url="../../redirect/redirect/redirect?title=redirect" open-type="redirect" hover-class="other-navigator-hover">在当前页打开</navigator>
<navigator url="/page/index/index" open-type="switchTab" hover-class="other-navigator-hover">切换 Tab</navigator>
</view>
```
```
<!-- navigator.wxml -->
<view style="text-align:center"> {{title}} </view>
<view> 点击左上角返回回到之前页面 </view>
<!-- redirect.wxml -->
<view style="text-align:center"> {{title}} </view>
<view> 点击左上角返回回到上级页面 </view>
// redirect.js navigator.js
Page({
onLoad: function(options) {
this.setData({
title: options.title
})
}
})
```
- 简介
- 第一章 公众号开发
- 使用微信JSSDK
- 接口权限配置
- 分享接口
- 隐藏按钮项
- 微信支付
- 第二章 小程序开发
- 基础知识
- 分包加载
- WXSS样式表
- 配置
- app.json配置
- window
- tabBar
- page.json配置
- 逻辑层
- app.js
- 场景值
- page.js
- 初始化数据
- 生命周期函数
- 页面相关事件处理函数
- 事件处理函数
- 页面实例方法
- 路由
- 文件作用域
- 模块化
- 视图层
- 模板语法
- 列表渲染
- 条件渲染
- 模板
- 事件
- 引用
- WXS语法规范
- WXS数据类型
- WXS控制流程
- WXS基础类库
- 组件
- 视图容器
- view
- scroll-view
- swiper
- movable-view
- cover-view
- 基础组件
- icon
- text
- rich-text
- progress
- 表单组件
- button
- checkbox
- form
- input
- label
- picker
- picker-view
- radio
- slider
- switch
- textarea
- 导航组件
- navigator
- 媒体组件
- audio
- image
- video
- camera
- 地图组件
- map
- 画布组件
- canvas
- 开放能力
- web-view
- 自定义组件
- 组件模版和样式
- Component
- 组件传值
- 组件事件
- Behaviors
- 组件间关系
- 网络请求
- wx.request
- 微信登录
- 获取 openid 和 unionid
- 获取用户信息
- 将 wx.request 封装为 promise
- 上传图片接口封装
- 数据存储
- 存储数据和读取数据
- 获取数据缓存信息
- 移除数据缓存
- 获取用户设置
- openSetting
- getSetting
- 第三章 小游戏开发
- 参考资料