页面链接。
组件用法:
Tip:
- 官方规定小程序最多只能有五个页面同时存在,意思是在不关闭页面的情况,最多新开五个页面,页面深度为5。当页面栈达到5后将无法转跳。
- 当navigator组件存在redirect属性时(无论redirect的值时true还是false),将会关闭当前页面并转跳到目标页面,页面栈不变化。
- 当navigator组件不存在redirect属性时,保留当前页面,转跳到目标页面,页面栈加1。
效果图:
wxml
- <!-- sample.wxml -->
- <view class="btn-area">
- <navigator url="navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
- <navigator url="redirect?title=redirect" redirect hover-class="other-navigator-hover">在当前页打开</navigator>
- </view>
- <!-- navigator.wxml -->
- <view class="title"> {{title}} </view>
- <view> 点击左上角返回回到之前页面 </view>
- <!-- redirect.wxml -->
- <view class="title"> {{title}} </view>
- <view> 点击左上角返回回到上级页面 </view>
js
- // redirect.js navigator.js
- Page({
- onLoad: function(options) {
- this.setData({
- title: options.title
- })
- }
- }
wxss
- /** wxss **/
- /** 修改默认的navigator点击态 **/
- .navigator-hover {
- color:blue;
- }
- /** 自定义其他点击态样式类 **/
- .other-navigator-hover {
- color:red;
- }
- .title{
- text-align:center;
- }
主要属性:
属性名
|
类型
|
默认值
|
说明
|
url | String | 应用内的跳转链接 | |
redirect | Boolean | false | 是否关闭当前页面 |
hover-class | String | navigator-hover | 指定点击时的样式类,当hover-class=”none”时,没有点击态效果 |