tencent cloud

Feedback

Navigation Component

Last updated: 2024-03-04 23:04:16

    navigator

    Feature Description: Page link
    Parameter and Description
    Attribute
    Type
    Default value
    Required
    Description
    target
    string
    self
    -
    Specifies the target where the redirection occurs, with the default being the current mini program. The optional values are 'self' or 'miniProgram'.
    url
    string
    -
    No
    Redirection within the current mini program
    open-type
    string
    navigate
    No
    Redirection method
    path
    string
    -
    -
    When 'target' is set to 'miniProgram', this specifies the path of the page to be opened. If left blank, the home page will be opened.
    extra-data
    object
    -
    -
    When 'target' is set to 'miniProgram', this represents the data to be passed to the target mini program. The target mini program can get this data through App.onLaunch() or App.onShow().
    hover-class
    string
    navigator-hover
    -
    Specifies the style class when clicked. When
    hover-stop-propagation
    boolean
    false
    -
    Specifies whether to prevent the ancestor nodes of this node from appearing in the click status.
    hover-start-time
    number
    50
    -
    The duration before the click status appears after pressing, measured in milliseconds.
    hover-stay-time
    number
    600
    -
    The retention time of the click status after the finger is released, measured in milliseconds.
    bindsuccess
    string
    -
    -
    When 'target' is set to 'miniProgram', this indicates a successful transition to the mini program.
    bindfail
    string
    -
    -
    When 'target' is set to 'miniProgram', this indicates a failed transition to the mini program.
    bindcomplete
    string
    -
    -
    When 'target' is set to 'miniProgram', this indicates a completed transition to the mini program.
    aria-label
    string
    -
    -
    Accessibility, (Attribute) Additional description of the element.
    Valid values of 'open-type':
    Valid Values
    Description
    navigate
    Corresponds to the functionality of 'wx.navigateTo' or 'wx.navigateToMiniProgram'.
    redirect
    Corresponds to the functionality of 'wx.redirectTo'.
    switchTab
    Corresponds to the functionality of 'wx.switchTab'.
    reLaunch
    Corresponds to the functionality of 'wx.reLaunch'.
    navigateBack
    Corresponds to the functionality of 'wx.navigateBack'.
    Usage Limitations: User confirmation is required for redirection.
    Before redirecting to another mini program, a unified pop-up window will be added, asking whether to redirect. The user can only redirect to another mini program after confirmation. If the user clicks cancel, the callback fail cancel will be triggered.
    Note:
    navigator-hover defaults to {background-color: rgba(0, 0, 0, 0.1); opacity: 0.7;}. The background color of the <navigator></2> child nodes should be transparent.
    Sample Code
    / wxss /
    / Modify the default navigator click status /
    .navigator-hover {
    color: blue;
    }
    / Customize other click status style classes /
    .other-navigator-hover {
    color: red;
    }
    <!-- sample.wxml -->
    <view class="btn-area">
    <navigator
    url="/page/navigate/navigate?title=navigate"
    hover-class="navigator-hover"
    >
    Redirect to a new page
    </navigator>
    <navigator
    url="../../redirect/redirect/redirect?title=redirect"
    open-type="redirect"
    hover-class="other-navigator-hover"
    >
    Open on the current page
    </navigator>
    <navigator
    url="/page/index/index"
    open-type="switchTab"
    hover-class="other-navigator-hover"
    >
    Switch Tab
    </navigator>
    </view>
    <!-- navigator.wxml -->
    <view style="text-align:center">{{title}}</view>
    <view>Click the top left corner to return to the previous page</view>
    // redirect.js navigator.js
    Page({
    onLoad(options) {
    this.setData({
    title: options.title
    })
    }
    })
    
    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