【 UniApp 】页面导航

声明式导航

• 设置一个<navigator> 导航组件 点击实现页面跳转
• <navigator> 需要制定url和open-type属性
  • url 需要跳转的页面地址 必须以 / 开头
  • open-type 表示跳转的方式 必须是 switchTab

导航到tabBar页面

{
  "pages":[
    "pages/index/index",
    "pages/home/home",
    "pages/contact/contact"
  ],
}
// index.wxml
<view class="container">
  <text>Index Page</text>
  <navigator url= "/pages/home/home" open-type="switchTab">声明式导航</navigator>
</view>

// Home .wxml
<view class="container">
  <text>Home Page</text>
  <navigator url= "/pages/contact/contact" open-type="switchTab">声明式导航</navigator>
</view>

// Contact .wxml
<view class="container">
  <text>Contact Page</text>
  <navigator url= "/pages/index/index" open-type="switchTab">声明式导航</navigator>
</view>

导航到非tabBar页面

• <navigator> 需要制定url和open-type属性
  • url 需要跳转的页面地址 必须以 / 开头
  • open-type必须设置为声明式导航

// info页面没有设置tabBar
<!-- 跳转到非tabBar页面 -->
<navigator url= "/pages/info/info" open-type="navigate">声明式导航</navigator>

后退导航

• 后退到上一页面或者多个页面 需要设置open-type和delta属性
  • open-type = "navigateBack"
  • delta= "需要返回的页面数 <number>"
  • 如果只是返回到上一个页面 就可以省略delta 默认是 1

   <navigator open-type="navigateBack" delta="1">后退导航</navigator>

编程式导航

调用小程序的API 实现页面跳转
导航到tabBar页面

• wx.switchTab()

// 绑定跳转函数 xxx.wxml
<button bindtap="goTocontact">跳转到contact tabBar页面</button>

// 实现函数 xxx.js
Pages({
	goTocontact(){
	 	 wx.switchTab({
	 	 	// 必填url
	      	url: '/pages/contact/contact',
	      	success(){},
	      	fail(){},
	      	complete(){}
	    })
	}
})

导航到非tabBar页面

• wx.navigateto()

// 绑定跳转函数 xxx.wxml
<button bindtap="goToInfo">跳转到info 非tabBar页面</button>

// 实现函数 xxx.js
Pages({
	goToInfo(){
	 	 wx.switchTab({
	 	 	// 必填url
	      	url: '/pages/contact/contact',
	      	success(){},
	      	fail(){},
	      	complete(){}
	    })
	}
})

后退导航
wx.navigateBack()
- 设置delta 默认是1 可以取消设置delta

// 绑定跳转函数 xxx.wxml
<button bindtap="backIndex">后退导航</button>

// 实现函数 xxx.js
 backIndex(){
        wx.navigateBack({
          delta: 1,
        })
    },

导航传参

• 路径的后面可以携带参数
• 参数与路径之间使用 ? 分隔
• 参数键与参数值使用 = 相连
• 不同参数使用 & 分隔

声明式导航传参

  <navigator url="/pages/info/info?name=zs&age=20">声明式导航传参</navigator>

编程式导航传参

// 绑定跳转函数 xxx.wxml
<button bindtap="goInfo">编程式传参</button>
// 实现函数 xxx.js
goInfo(){
    wx.navigateto({
      url: '/pages/info/info?name=ls&age=15',
    })
  }

接收导航传参

onLoad生命周期里面的options接收参数

Page({
	data: {
        // 接收导航传递的参数
        query:{}
    },
 	onLoad:function(options){
	    console.log(options);
	     this.setData({
	        query:options
	    })
	    console.log(this.data.query);
  	},
})