Represents a component used for implementing link-based page redirection.
Since: 1.0.0
Name | Type | Default Value | Mandatory | Description |
|---|---|---|---|---|
target | string | self | No | Target of page redirection. The default value is self.
|
url | string | - | No | Redirection link within the current atomic service. |
open-type | string | navigate | No | Redirection mode. For details, see "Valid values of open-type." |
delta | number | 1 | No | Number of fallback levels. This parameter is valid only when open-type is set to navigateBack. |
hover-class | string | navigator-hover | No | Style class to be applied when the component is in the pressed state. |
hover-stop-propagation | boolean | false | No | Whether to disable the pressed effect of the ancestor node. |
hover-start-time | number | 50 | No | Delay before the pressed state appears upon pressing, in milliseconds. |
hover-stay-time | number | 600 | No | Retention time of the pressed state after the finger is lifted, in milliseconds. |
Valid values of open-type
Value | Description |
|---|---|
navigate | Provides the same implementation effect as has.navigateTo. |
redirect | Provides the same implementation effect as has.redirectTo. |
switchTab | Provides the same implementation effect as has.switchTab. |
reLaunch | Provides the same implementation effect as has.reLaunch. |
navigateBack | Provides the same implementation effect as has.navigateBack. |
HXML file:
<import src="../../../common/head.hxml"/>
<import src="../../../common/foot.hxml"/>
<view class="container">
<template is="head" data="{{title: 'navigator'}}"/>
<view class="index-bd">
<view class="kind-list">
<block has:for-items="{{list}}" has:key="{{item.id}}">
<view class="kind-list-item">
<view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="kindToggle">
<view class="kind-list-text">{{item.name}}</view>
</view>
<view class="kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}">
<view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}">
<block has:if="{{item.case==0}}">
<navigator url="./arr" hover-class="navigator-hover" class="navigator">
<view class="navigator-text">Default hover state</view>
<view class="navigator-arrow"></view>
</navigator>
<navigator url="./" hover-class="none" open-type="navigate" class="navigator">
<view class="navigator-text">navigator when hover-class is set to none</view>
<view class="navigator-arrow"></view>
</navigator>
<navigator url="./" open-type="navigate" hover-start-time="{{starttime}}" hover-stay-time="{{staytime}}" hover-class="other-navigator-hover" class="navigator" >
<view class="navigator-text">Custom hover and hover-stay-time</view>
<view class="navigator-arrow"></view>
</navigator>
<view class="viewclass" hover-class="ascf-btn__hover_list">
<navigator url="./" hover-class="other-navigator-hover" hover-stop-propagation="{{isstop}}" hover-start-time="{{starttime}}" hover-stay-time="{{staytime}}" class="navigator">
<view class="navigator-text">Disable the pressed state of the ancestor node</view>
<view class="navigator-arrow"></view>
</navigator>
</view>
</block>
<view class="ascf-cell ascf-cell_switch">
<view class="ascf-cell__bd">Whether to disable the pressed state of the ancestor node</view>
<view class="ascf-cell__ft">
<switch checked="{{isstop}}" bindchange="changeisstop"/>
</view>
</view>
<block has:if="{{item.case==1}}">
<navigator url="navigate/navigate" hover-class="navigator-hover" class="navigator">
<view class="navigator-text">Relative path</view>
<view class="navigator-arrow"></view>
</navigator>
<navigator url="/page/component/pages/view/view" hover-class="none" open-type="navigate" class="navigator">
<view class="navigator-text">Absolute path</view>
<view class="navigator-arrow"></view>
</navigator>
<navigator url="navigate/navigate?title=navigate&value=I am a parameter" open-type="navigate" class="navigator">
<view class="navigator-text">Parameter carried</view>
<view class="navigator-arrow"></view>
</navigator>
</block>
<block has:if="{{item.case==2}}">
<navigator url="redirect/redirect" open-type="redirect" class="navigator">
<view class="navigator-text">Relative path</view>
<view class="navigator-arrow"></view>
</navigator>
<navigator url="/page/component/pages/view/view" open-type="redirect" class="navigator">
<view class="navigator-text">Absolute path</view>
<view class="navigator-arrow"></view>
</navigator>
<navigator url="redirect/redirect?title=redirect&value=I am a parameter" open-type="redirect" class="navigator">
<view class="navigator-text">Parameter carried</view>
<view class="navigator-arrow"></view>
</navigator>
</block>
<block has:if="{{item.case==3}}">
<navigator url="/page/component/index" open-type="switchTab" class="navigator">
<view class="navigator-text">Current tab</view>
<view class="navigator-arrow"></view>
</navigator>
<navigator url="/page/API/index" open-type="switchTab" class="navigator">
<view class="navigator-text">Other tabs</view>
<view class="navigator-arrow"></view>
</navigator>
</block>
<block has:if="{{item.case==4}}">
<navigator url="reLaunch/reLaunch" open-type="reLaunch" class="navigator">
<view class="navigator-text">Relative path</view>
<view class="navigator-arrow"></view>
</navigator>
<navigator url="/page/component/pages/view/view" open-type="reLaunch" class="navigator">
<view class="navigator-text">Absolute path</view>
<view class="navigator-arrow"></view>
</navigator>
<navigator url="reLaunch/reLaunch?title=redirect&value=I am a parameter" open-type="reLaunch" class="navigator">
<view class="navigator-text">Parameter carried</view>
<view class="navigator-arrow"></view>
</navigator>
</block>
<block has:if="{{item.case==5}}">
<navigator url="navigateBack1/navigateBack1?title=navigateBack1" class="navigator">
<view class="navigator-text">Return verification</view>
<view class="navigator-arrow"></view>
</navigator>
</block>
<block has:if="{{item.case==6}}">
<navigator url="hoverclass/hoverclass" class="navigator">
<view class="navigator-text">Pressed state verification</view>
<view class="navigator-arrow"></view>
</navigator>
</block>
</view>
</view>
</view>
</block>
</view>
</view>
<template is="foot"/>
</view> JS file:
Page({
onShareAppMessage() {
return {
title: 'Navigation',
path: 'page/component/pages/navigator/navigator'
}
},
data:{
list: [
{
id: 'navigate11',
name: 'Test hover parameters and hover-stop-propagation',
open: false,
case: 0,
},
{
id: 'navigate',
name: 'navigate-Retain the current page',
open: false,
case: 1,
}, {
id: 'redirect',
name: 'redirect-Close the current page',
open: false,
case: 2,
}, {
id: 'switchTab',
name: 'switchTab-Switch tabs',
open: false,
case: 3,
},{
id: 'reLaunch',
name: 'reLaunch-Close all pages',
open: false,
case: 4,
}, {
id: 'navigateBack',
name: 'navigateBack-Go back',
open: false,
case: 5,
},{
id: 'hover-class',
name: 'Pressed state',
open: false,
case: 6,
}
],
isstop:true,
starttime:1000.6,
staytime:2000.5
},
kindToggle(e) {
const id = e.currentTarget.id
const list = this.data.list
for (let i = 0, len = list.length; i < len; ++i) {
if (list[i].id === id) {
list[i].open = !list[i].open
} else {
list[i].open = false
}
}
this.setData({
list
})
},
changeisstop() {
this.setData({
isstop:!this.data.isstop
})
}
}) CSS file:
@import "../../../common/index.css";
.ascf-agree__link {
display: inline;
color: #586c94;
}
.other-navigator-hover {
opacity: 0.9;
background: blue;
color: red;
}
.viewclass{
margin:20px 0;
width: 300px;
height:80px;
background-color: gray;
}
.ascf-btn__hover_list {
opacity: 0.8;
background: #faf602;
}