uniapp页面跳转的几种方式

2024年06月27日 uniapp 跳转 页面跳转 共享博客

项目中,鹏仔偶尔使用uniapp开发,经常用到跳转页面方面代码,一直没有整理,本次抽个空,顺手整理一下自己写的,方便使用。

鹏仔平时是将如下代码放置公共的 mixins 中,然后直接调用即可,当然您可以自行将代码封装js引入调用。

// 页面跳转
goPage(type,val){
	if(type == '1'){
		// 保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack可以返回到原页面
		uni.navigateTo({url: val});
	}
	if(type == '2'){
		// 可以关闭当前界面并跳转到其他的非tabbar界面
		uni.redirectTo({url: val});
	}
	if(type == '3'){
		// 关闭所有页面,打开到应用内的某个页面
		uni.reLaunch({url: val});
	}
	if(type == '4'){
		// 跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
		uni.switchTab({url: val});
	}
	if(type == '5'){
		// 关闭当前页面,返回上一页面或多级页面(delta 返回页面层数)
		uni.navigateBack({url: val});
		// uni.navigateBack({
		// 	delta: 2
		// });
	}
}


页面调用(就不详细描述了,使用很简单)

this.goPage('1','subPackages/mine/index');


如果您是自定义的顶部返回事件,点击返回可能需要先判断是否有历史界面,如果有则返回上一页,没有则返回首页,如下

// 返回
returnBtn(){
	let pageNum = getCurrentPages();
	if(pageNum.length > 1){
		uni.navigateBack()
	} else {
		uni.switchTab({
			url:'/pages/home/index'
		});
	}
}


vue判断没有上页返回首页 https://www.lmcjl.com/post/215.html


本文链接:http://so.lmcjl.com/news/7346/

展开阅读全文