欢迎光临,了解微信小程序开发,就上易用通!

小程序极速实战开发《二十》navigator页面链接

发布:2018-01-25 16:28浏览: 来源:网络 作者:tianshu

组件说明:

页面链接。


组件用法:

Tip:

  •  
  • 官方规定小程序最多只能有五个页面同时存在,意思是在不关闭页面的情况,最多新开五个页面,页面深度为5。当页面栈达到5后将无法转跳。
  • 当navigator组件存在redirect属性时(无论redirect的值时true还是false),将会关闭当前页面并转跳到目标页面,页面栈不变化。
  • 当navigator组件不存在redirect属性时,保留当前页面,转跳到目标页面,页面栈加1。


效果图:
 


小程序极速实战开发《二十》navigator页面链接(图1)

 

 

wxml

  1. <!-- sample.wxml -->
  2. <view class="btn-area">
  3.   <navigator url="navigate?title=navigate" hover-class="navigator-hover">跳转到新页面</navigator>
  4.   <navigator url="redirect?title=redirect" redirect hover-class="other-navigator-hover">在当前页打开</navigator>
  5. </view>
  1. <!-- navigator.wxml -->
  2. <view class="title"> {{title}} </view>
  3. <view> 点击左上角返回回到之前页面 </view>
  4.  
  1. <!-- redirect.wxml -->
  2. <view class="title"> {{title}} </view>
  3. <view> 点击左上角返回回到上级页面 </view>

 

js

  1. // redirect.js navigator.js
  2. Page({
  3.   onLoad: function(options) {
  4.     this.setData({
  5.       title: options.title
  6.     })
  7.   }
  8. }

wxss

  1. /** wxss **/
  2. /** 修改默认的navigator点击态 **/
  3. .navigator-hover {
  4.     color:blue;
  5. }
  6. /** 自定义其他点击态样式类 **/
  7. .other-navigator-hover {
  8.     color:red;
  9. }
  10. .title{
  11.     text-align:center;
  12. }

主要属性:
属性名
类型
默认值
说明
url String   应用内的跳转链接
redirect Boolean false 是否关闭当前页面
hover-class String navigator-hover 指定点击时的样式类,当hover-class=”none”时,没有点击态效果





免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。