uni-app常用的几种页面跳转方式总结
作者:丿TK丶灬丨爱悦 发布时间:2023-08-23 20:31:26
标签:uni-app,页面,跳转
一、uni.navigateTo(OBJECT)
保留当前页面,跳转到应用内的某个页面,使用uni.navigateBack
可以返回到原页面
uni.navigateTo(OBJECT) | uni-app官网 (dcloud.io)
methods: {
//gonavigate()为点击响应事件,可在HTML部分设置 @tap="gonavigate()"
gonavigate(){
uni.navigateTo({
//保留当前页面,跳转到应用内的某个页面
url: '/pages/detail/detail'
})
}
}
二、uni.navigateBack(OBJECT)
关闭当前页面,返回上一页面或多级页面。可通过 getCurrentPages()
获取当前的页面栈,决定需要返回几层。
uni.navigateTo(OBJECT) | uni-app官网 (dcloud.io)
methods: {
//goBack()为点击响应事件,可在HTML部分设置 @tap="goBack()"
goBack(){
uni.navigateBack({
//关闭当前页面,返回上一页面或多级页面。
delta:1
});
}
}
三、uni.redirectTo(OBJECT)
关闭当前页面,跳转到应用内的某个页面。
uni.navigateTo(OBJECT) | uni-app官网 (dcloud.io)
methods: {
//goregirect()为点击响应事件,可在HTML部分设置 @tap="goregirect()"
goregirect(){
uni.redirectTo({
//关闭当前页面,跳转到应用内的某个页面。
url:'/pages/about/about'
});
}
}
四、uni.switchTab(BOJECT)
跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
uni.navigateTo(OBJECT) | uni-app官网 (dcloud.io)
methods: {
checklogin(){
uni.request({
url: 'http://localhost:8081/api/user/login',
data: {
email: this.emailone,
password: this.password,
},
success: (res) => {
//登录成功
if (res.data.success == true) {
uni.showToast({
title: '登录成功', //显示的文字
icon: 'success' //显示的图标
});
//跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面。
uni.switchTab({
url: '../tabbor/index/index'
});
} else {
uni.showToast({
title: '用户名或密码错误', //显示的文字
icon: 'none' //显示的图标
});
}
}
})
}
}
五、openURL
调用第三方程序打开指定的URL
HTML5+ API Reference (html5plus.org)
methods: {
//goopenurl()为点击响应事件,可在HTML部分设置 @tap="goopenurl()"
goopenurl(){
boid plus.runtime.openURL('https://www.baidu.com/')
}
}
补充:传值与接收
通过跳转传值一般套路就是在URL中把需要传的值带过去,然后再接收的页面onLoad函数中,利用参数接回来。
跳转页面:
uni.navigateTo({
url:'页面路径?id=1'
})
接收页面:
onLoad: function (option) { //option为object类型,会序列化上个页面传递的参数
console.log(option.id);
//打印出上个页面传递的参数。传递的是id=1,则获取到的就是option.id
}
来源:https://blog.csdn.net/qq_53966033/article/details/124538656
0
投稿
猜你喜欢
- 如何用ASP建立Index Server查询对象并为其参数赋值?我们有两个方法可以做到这一点。一个方法是利用Index Server que
- 在《JavaScript语言精粹》的第72页有这样一段:用正则表达式字面量创建的RegExp对象来共享同一个单实例:function mak
- 以下为在asp中增加一个sql server2000用户函数,并为建立一个数据库,给他dbo的权限。注意:sql server的验证方式不要
- 1.建立设计规范的意义 建立设计文档的根本目的
- 确定数据库内有多少记录,或者确定有多少记录达到了某些标准,这些用ASP完成并非难事。如果你采用了正确的游标类型,你可以用RecordCoun
- #HelloWorld是文件名称,Hello是类from HelloWorld import Hello调用,Hello类的方法:>&
- 如何修改数据库名(db_name)及实例名(Instance_name or Service_name) Nid是Oracle从9iR2开始
- python 根据正则表达式提取指定的内容正则表达式是极其强大的,利用正则表达式来提取想要的内容是很方便的事。 下面演
- 在你要导出数据字典的数据空中右键,新建查询,执行如下代码即可 代码如下:SELECT (case when a.colorder=1 th
- 在单个HTML元素上利用CSS2.1实现拥有3张背景图片和2张内容图效果,或者多重边框的效果。这种渐进增强的方式适用于所有支持CSS2.1伪
- 在设计中保持一致性(uniformity)是网页设计中一个重要的组成部分,它能使你的设计有效地传达信息而不会导致用户迷惑或焦虑。保证一致性的
- using System; using System.Collections; using System.Configuration; us
- 在查询语句中使用 NOLOCK 和 READPAST 处理一个数据库死锁的异常时候,其中一个建议就是使用 NOLOCK 或者 READPAS
- 这些日子,几乎每个人都在谈论XML (Extensible Markup Language),但是很少有人真正理解其含义。XML的推崇者认为
- http://swik.net/Ajax/Ajax+Mistakes在某网站瞎逛时,发现这个链接,进去逛了逛,觉得很有意思,大家也可以去看看
- ewebeditor支持兼容IE8 的方法方法:前几天ie8正式公布了,当天中午我就去下载了一个迫不急待的将自己的浏览器升级到ie8,偶还刻
- 导语:简洁并不等于极简主义,在保持网站简洁的外观的同时,辅以其它元素的使用,同样能够达到要求。那如何做到这一点呢?通过本文你能从中学到一些经
- 要选择有助于使查询执行更快的列,应遵循如下规则(这里,“BLOB 类型”应该理解为即包含B L O
- 声明,本文中所称CSS雪碧即为CSS Sprites,这个词组一直没有一个固定或者约定俗成的中文翻译,一些人开始称之为CSS雪碧,我们且当作
- 1.获取所有数据库名: SELECT Name FROM Master..SysDatabases ORDER BY Name2.获取所有表