navigator

Component Type：UniNavigatorElement

页面链接

Attributes

name	type	default	description
target	string	-	在哪个目标上发生跳转，默认当前应用
url	string(string.PageURIString)	-	当前应用内的跳转链接
open-type	string	-	跳转方式 open-type
delta	number	-	当 open-type 为 navigateBack 时有效，表示回退的层数
app-id	string	-	当target="miniProgram"时有效，要打开的小程序 appId
path	string	-	当target="miniProgram"时有效，打开的页面路径，如果为空则打开首页
extra-data	Object	-	当target="miniProgram"时有效，需要传递给目标应用的数据，目标应用可在 App.onLaunch()，App.onShow() 中获取到这份数据
version	string	-	当target="miniProgram"时有效，要打开的小程序版本，有效值 develop（开发版），trial（体验版），release（正式版），仅在当前小程序为开发版或体验版时此参数有效；如果当前小程序是体验版或正式版，则打开的小程序必定是正式版
animation-type	string	-	当 open-type="navigateTo" 或 open-type="navigateBack" 时有效，窗口的显示/关闭的动画类型。 animation-type
animation-duration	number	-	当 open-type="navigateTo" 或 open-type="navigateBack" 时有效，窗口的显示/关闭动画的持续时间。
hover-class	string	-	指定按下去的样式类。当 hover-class="none" 时，没有点击态效果
hover-stop-propagation	boolean	-	指定是否阻止本节点的祖先节点出现点击态
hover-start-time	number	-	按住后多久出现点击态，单位毫秒
hover-stay-time	number	-	手指松开后点击态保留时间，单位毫秒

open-type

name	description
navigate	对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能
redirect	对应 wx.redirectTo 的功能
switchTab	对应 wx.switchTab 的功能
reLaunch	对应 wx.reLaunch 的功能
navigateBack	对应 wx.navigateBack 的功能

animation-type

name	description
auto	自动选择动画效果
none	无动画效果
slide-in-right	从右侧横向滑动效果
slide-in-left	左侧横向滑动效果
slide-in-top	从上侧竖向滑动效果
slide-in-bottom	从下侧竖向滑动效果
fade-in	从透明到不透明逐渐显示效果
zoom-out	从小到大逐渐放大显示效果
zoom-fade-out	从小到大逐渐放大并且从透明到不透明逐渐显示效果
pop-in	从右侧平移入栈动画效果
slide-out-right	横向向右侧滑出屏幕动画
slide-out-left	横向向左侧滑出屏幕动画
slide-out-top	竖向向上侧滑出屏幕动画
slide-out-bottom	竖向向下侧滑出屏幕动画
fade-out	从不透明到透明逐渐隐藏动画
zoom-in	从大逐渐缩小关闭动画
zoom-fade-in	从大逐渐缩小并且从不透明到透明逐渐隐藏关闭动画
pop-out	从右侧平移出栈动画效果

Example

hello uni-app x

<template>
 <view>
   <page-head :title="title"></page-head>
   <view class="uni-padding-wrap uni-common-mt">
     <navigator class="navigator navigate" url="navigate?title=navigate">
       <button type="default">跳转到新页面</button>
     </navigator>
     <navigator class="navigator redirect" url="redirect?title=redirect" open-type="redirect">
       <button type="default">在当前页打开</button>
     </navigator>
   </view>
 </view>
</template>

<script>
 export default {
   data() {
     return {
       title: 'navigator'
     }
   }
 }
</script>

<style>
 .navigator {
   margin-bottom: 15px;
 }
</style>

Compatibility

	Android version	Android uni-app	Android uni-app-x	iOS version	iOS uni-app	iOS uni-app-x
navigator	5.0	√	3.9+	9.0	√	x
url	5.0	√	3.9+	9.0	√	x
open-type	5.0	√	3.9+	9.0	√	x
path	5.0	√	3.9+	9.0	√	x
animation-type	5.0	√	3.9+	9.0	√	x
animation-duration	5.0	√	3.9+	9.0	√	x

See also

• Related Bug