百变鹏仔-专注前端行业精选
uniapp页面跳转的几种方式
作者:鹏仔先生日期:2024-06-25 17:11:04浏览:393分类:JavaScript
项目中,鹏仔偶尔使用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://sharedbk.com/post/215.html
猜你还喜欢
- 08-09 vue动态修改网站的icon图标
- 07-08 VUE中ECharts提示框tooltip自动切换
- 07-03 网页中生成微信小程序二维码
- 06-28 vue实现表格自动滚动功能 vue-seamless-scroll
- 04-19 VUE实现点击复制
- 04-16 vue将页面生成图片 vue生成海报
- 04-16 vue路由切换滑动效果 vue页面跳转交互 vue实现动画跳转
- 04-07 vue跳转页面清除历史记录,页面跳转删除历史记录
- 02-22 VUE You are using the runtime-only build of Vue where the template compiler is not available. Either
- 10-08 vue按钮限制连点封装 自定义指令限制连点
- 08-19 使用HBuilderX将vue或H5项目打包app
- 07-15 小程序嵌入网页向小程序跳转并传参,微信小程序中实现公众号授权获取openId
取消回复欢迎 你 发表评论:
- 搜索
- 随机tag
暂无评论,来添加一个吧。