【微信小程序】页面导航

最新推荐文章于 2024-12-26 15:32:15 发布

原创最新推荐文章于 2024-12-26 15:32:15 发布 · 454 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#小程序

本文详细介绍了小程序中的导航方式，包括声明式导航与编程式导航，并解释了如何导航到tabBar页面和非tabBar页面，以及如何进行后退导航。此外，还讲解了导航传参的方法。

声明式导航

设置一个<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);
  	},
})