Property | Type | Valid values and description | Default value | Required | Description |
target | string | self: The current mini program miniProgram: Other mini programs | self | False | Specifies the target for the navigation. Default is the current mini program. |
url | string | - | - | False | URL for navigation within the current mini program. |
open-type | string | navigate: Corresponds to the feature of wx.navigateTo or wx.navigateToMiniProgram redirect: Corresponds to the feature of wx.redirectTo switchTab: Corresponds to the feature of wx.switchTab reLaunch: Corresponds to the feature of wx.reLaunch navigateBack: Corresponds to the feature of wx.navigateBack exit: Exits the mini program. Effective when target="miniProgram" | navigate | False | Specifies the navigation method. |
delta | number | - | 1 | False | Effective when open-type is 'navigateBack', indicates the number of layers to go back. |
app-id | string | - | - | False | Effective when target="miniProgram" and open-type="navigate", specifies the appId of the mini program to open. |
path | string | - | - | False | Effective when target="miniProgram", specifies the page path to open. If empty, opens the home page. |
extra-data | object | - | - | False | Effective when target="miniProgram", specifies data to pass to the target mini program. The target mini program can retrieve this data in App.onLaunch() andApp.onShow() . |
version | string | develop: The development version trial: The Preview release: The released version. This property is valid only when the version of the mini program is the development version or Preview. If the current mini program version is released, the version of the mini program to be opened must be the released version. | release | False | Effective when target="miniProgram" and open-type="navigate", specifies the version of the mini program to open. |
hover-class | string | - | navigator-hover | False | Specifies the style class when tapped. If hover-class="none" , there is no tap effect. |
hover-stop-propagation | boolean | - | false | False | Specifies whether to prevent ancestor nodes from showing the tap effect. |
hover-start-time | number | - | 50 | False | Time in milliseconds before the tap effect appears after pressing. |
hover-stay-time | number | - | 600 | False | Time in milliseconds the tap effect remains after the finger is released. |
bindsuccess | string | - | - | False | Effective when target="miniProgram", triggered when navigation to the mini program is successful. |
bindfail | string | - | - | False | Effective when target="miniProgram", triggered when navigation to the mini program fails. |
bindcomplete | string | - | - | False | Effective when target="miniProgram", triggered when navigation to the mini program is complete. |
fail cancel
will be triggered.navigator-hover
defaults to{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;},
The background color of the child nodes of <navigator>
should be transparent.<view class="btn-area"><navigatorurl="/page/navigate/navigate?title=navigate"hover-class="navigator-hover">Navigate to a new page.</navigator><navigatorurl="../../redirect/redirect/redirect?title=redirect"open-type="redirect"hover-class="other-navigator-hover">Open on the current page.</navigator></view>
<view style="text-align:center"> {{title}} </view><view> Tap the top left corner to return to the previous page. </view>
<view style="text-align:center"> {{title}} </view><view> Tap the top left corner to return to the parent page. </view>
Page({onLoad: function(options) {this.setData({title: options.title})}})
/** wxss **//** Modify the default tap effect of navigator. **/.navigator-hover {color: blue;}/** Customize the style classes for other tap effect. **/.other-navigator-hover {color: red;}
Was this page helpful?