tencent cloud

Feedback

Navigation Component

Last updated: 2024-11-27 18:07:22
    Feature description:Page URL.
    Parameter and description:
    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 inApp.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. Ifhover-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.
    Restrictions:User confirmation is required for navigation.
    Before navigating to another mini program, a pop-up will appear asking for user confirmation. Navigation will proceed only if the user confirms. If the user cancels, thefail cancelwill be triggered.
    Notes:
    navigator-hoverdefaults to{background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}, The background color of the child nodes of <navigator>should be transparent.
    Example:
    sample.wxml
    navigator.wxml
    redirect.wxml
    JAVASCRIPT
    WXSS
    <view class="btn-area">
    &lt;navigator
    url="/page/navigate/navigate?title=navigate"
    hover-class="navigator-hover"
    >
    Navigate to a new page.
    </navigator>
    &lt;navigator
    url="../../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;
    }
    
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support