navigator
更新时间：2025-04-10 15:29:41
navigator
navigator组件
属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| url | string | 当前小程序内的跳转链接 | ||
| open-type | string | navigate | 跳转方式 | |
| delta | number | 1 | 当 open-type 为 'navigateBack' 时有效，表示回退的层数 | |
| hover-class | string | navigator-hover | 指定点击时的样式类，当hover-class=none时，没有点击态效果 | |
| hover-stop-propagation | boolean | false | 指定是否阻止本节点的祖先节点出现点击态 | |
| hover-start-time | number | 50 | 按住后多久出现点击态，单位毫秒 | |
| hover-stay-time | number | 600 | 手指松开后点击态保留时间，单位毫秒 | |
| bindsuccess | eventhandle | 跳转小程序成功回调 | ||
| bindfail | eventhandle | 跳转小程序失败回调 | ||
| bindcomplete | eventhandle | 跳转小程序完成回调 |
open-type 的合法值
值 | 说明 |
|---|---|
| navigate | 对应 xhs.navigateTo 的功能 |
| redirect | 对应 xhs.redirectTo 的功能 |
| switchTab | 对应 xhs.switchTab 的功能 |
| reLaunch | 对应 xhs.reLaunch 的功能 |
| navigateBack | 对应 xhs.navigateBack 的功能 |
| exit | 对应 xhs.exitMiniProgram 的功能 |
扫码预览
组件示例
html
<div class="container">
<div class="section">
<h3>普通页面跳转</h3>
<navigator
url="/pages/targetPage"
open-type="navigate"
hover-class="navigator-hover"
hover-start-time="100"
hover-stay-time="300">
跳转到目标页面
</navigator>
</div>
<div class="section">
<h3>重定向页面</h3>
<navigator
url="/pages/redirectPage"
open-type="redirect"
hover-class="navigator-hover">
重定向到目标页面
</navigator>
</div>
<div class="section">
<h3>切换 Tab 页面</h3>
<navigator
url="/pages/tabPage"
open-type="switchTab"
hover-class="navigator-hover">
切换到 Tab 页面
</navigator>
</div>
<div class="section">
<h3>重新启动页面</h3>
<navigator
url="/pages/reLaunchPage"
open-type="reLaunch"
hover-class="navigator-hover">
重新启动到目标页面
</navigator>
</div>
<div class="section">
<h3>返回上一页</h3>
<navigator
open-type="navigateBack"
delta="1"
hover-class="navigator-hover">
返回上一页
</navigator>
</div>
<div class="section">
<h3>退出小程序</h3>
<navigator
open-type="exit"
hover-class="navigator-hover">
退出小程序
</navigator>
</div>
</div>
该文档是否对您有帮助？