【uni-app】点击左上角返回按钮,弹出弹窗或者是携带参数返回上一页

news2024/11/19 7:49:46

目录

1、弹出弹窗

2、把这一页的数据带回到上一页(获取下一页的数据 )

3、跳转页面并携带参数,接受页获取参数


1、弹出弹窗

当我返回上一页的时候需要做一个判断是否需要保存

onBackPress 只支持APP和H5 但不支持小程序 ,可以用onUnload生命周期解决,页面销毁的时候执行方法。

注意:onBackPress和methods、onLoad同级

data() {
	return {
		flag: true //是否弹出返回提示框 
	}
},
onBackPress() {
			if (this.flag) {
				uni.showModal({
					title: "确定退出编辑?",
					content: "退出后内容不做保存",
					success: (res) => {
						if (res.confirm) {
							// console.log("确定返回");
							this.flag = false
							uni.navigateBack({
								delta: 1, //返回层数,2则上上页
							})
							return true
						} else {
							this.flag = true
							// console.log("取消");
							return true
						}
					}
				})
				return true
			} else {
				return false
			}
},

另一种写法

注意:不能写options.from === 'backbutton' ,因为 uni.navigateBack() 同样会触发 onBackPress 函数。因此在 onBackPress 中直接调用 uni.navigateBack() 并始终返回 true 会引发死循环。 从而会导致重写 onBackPress 方法不生效的罪魁祸首,然而也没有任何错误提示。

onBackPress(options) {
    if (options.from === 'navigateBack') {
        return false
    }
    uni.navigateBack({
        delta: 1
    })
    return true
}

2、把这一页的数据带回到上一页(获取下一页的数据 )

第一页,点击下一步按钮到第二页

onShow() {
			let that = this
			uni.$on('update1', function(data) {
				that.damagePoint = data
				console.log(that.damagePoint)
			})
},

第二页,点击左上角的返回按钮,携带数据到第一页

onBackPress(event) {
			uni.$emit('update1', this.damagePoint)
},

3、跳转页面并携带参数,接受页获取参数

第一页,跳转页面并携带参数(参数是对象)

methods: {
			change(item, index) {
				uni.navigateTo({
					url: '/pages/word/details?item=' + JSON.stringify(item)
				});
			}
		}

第二页,接受参数

onLoad(e) {
			let item = JSON.parse(e.item)
			console.log(item)
		}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/409262.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Java web—访问http://localhost:8080/xx/xx.jsp报404错误问题

由于我们在eclipse ee中把项目部署在web端经常会出现报404错误。 原因为: 404状态码是一种http状态码,其意思是: 所请求的页面不存在或已被删除。通俗的讲就是当用户输入了错误的链接时,返回的页面。 以下描述几种情况&#xff1a…

IDEA从零到精通(24)之lombok插件的安装与使用

文章目录作者简介引言导航概述安装插件使用小结导航热门专栏推荐作者简介 作者名:编程界明世隐 简介:CSDN博客专家,从事软件开发多年,精通Java、JavaScript,博主也是从零开始一步步把学习成长、深知学习和积累的重要性…

【Vue】 组件封装

目录1 组件封装1.1 全局注册1.2 局部注册1.2.1 命名1.2.2 引用组件1.2.2.1 传统写法1.2.2.2 setup1.2.2.3 easycom1.3 父子组件间的数据传递1.3.1 子组件 data() 中设置数据1.3.2 父组件通过 prop 将数据传递给子组件1.3.3 子组件不能直接修改 prop 中的值1.3.4 子组件通过 emi…

Pinia中action使用详解

actions的使用 动作相当于组件中的方法。它们可以使用actionsin 属性进行定义。 并且在pinia中的action既可以有同步函数也可以有异步函数。 在actions中可以通过this访问该仓库所有实例 export const useUsers defineStore(users,{state:()>{userData:null},actions:{a…

【SpringMVC】集成Web、MVC执行流程、数据响应、数据交互

文章目录前言一.Spring集成Web二.对于SpringMVC的理解三.MVC执行流程(🏳️‍🌈)1.组件解析2.RequestMapping四.SpringMVC数据响应页面跳转回写数据五.SpringMVC获得请求数据前言 SpringMVC确实很麻烦,零碎的点太多 一…

小程序自定义tabbar导航栏、动态控制tabbar功能实现(uniapp)

uniapp开发小程序,不同角色/已登录未登录,都有不一样的底部导航栏,这些情况下就需要自行定义tabbar,从而实现动态tabbar的实现。 1.首先我们需要在pages.json配置tabbar 我这里并没有开启custom(自定义),不开启的话&a…

vue实现思维导图

介绍 前景: 仿幕布实现思维导图效果 技术实现:jsmind 完整代码:vue-jsmind 参考文章: 在vue中使用jsmind组织架构或思维导图 实现效果: 功能描述: 编辑、删除、插入、拖拽、展开/收起节点分布结构切换…

数字IC前端面试问题总结

本篇主要参考了 1、新芯设计(3条消息) 新芯设计的博客_CSDN博客-如何成为一名高级数字 IC 设计工程师,数字 IC 技能拓展,基于 SoC 的卷积神经网络车牌识别系统设计领域博主 2、小汪的IC自习室 (3条消息) 小汪的IC自习室的博客_CSDN博客-数字IC设计,SystemVerilog & I…

前端使用xlsx插件读取excel文件数据(保姆级教程)

本人属于一个实习菜鸟,大神请谨慎阅读............ 在开发过程中,难免会碰到用前端来处理excel文件的需求,我们需要解析出excel文件的内容然后在以对象的形式展示或者与后端对接 功能的实现思路: 文件选择 > FileReader对象…

微信小程序中使用vant框架,方法步骤清晰,简单适用

1.说到vant框架相信大家应该并不陌生了吧,做过移动端开发的小伙伴们应该都知道它吧。 2.Vant 是有赞前端团队开源的移动端组件库,于 2017 年开源,已持续维护 4 年时间。Vant 对内承载了有赞所有核心业务,对外服务十多万开发者&am…

Vue 权限菜单(动态路由)详解

今天记录一下Vue的权限菜单(动态路由),在我们写后台的时候用的比较多,Vue的权限菜单分两种,一种是通过本地进行,根据账号的权限进行筛选出可用的权限,组合菜单并在页面上渲染显示,另…

Vue3 从入门到放弃 (第一篇.环境准备)

什么是 Vue?# Vue (发音为 /vjuː/,类似 view) 是一款用于构建用户界面的 JavaScript 框架。它基于标准 HTML、CSS 和 JavaScript 构建,并提供了一套声明式的、组件化的编程模型,帮助你高效地开发用户界面。无论是简单还是复杂的…

uniapp-路由uni-simple-router

背景 专为uniapp打造的路由器,和uniapp深度集成通配小程序、App和H5端H5能完全使用vue-router开发模块化、查询、通配符、路由参数使 uni-app实现嵌套路由(仅H5端完全使用vue-router)uniapp用到了很多vue的api,但在路由管理的功能…

vue 上传文件和下载文件

vue 上传文件和下载文件1. 上传文件2. 下载文件1. 上传文件 上传文件我所使用的组件是element ui 的 el-upload&#xff0c;我一共进行了如下两步&#xff0c;第一步&#xff1a;修改样式&#xff0c;因为el-upload的样式不是我所要的&#xff0c;我想要这种的 代码如下 <…

【Vue 项目】使用 vuedraggable 实现拖拽效果时遇到的问题及解决方案总结(允许 el-table 行拖拽、部分元素不允许拖拽、拖拽避免影响文字复制和输入框输入文字)

由于在自己的工作和学习过程中&#xff0c;只查看某个大佬的教程或文章无法满足自己的学习需求和解决遇到的问题&#xff0c;所以自己在追赶大佬们步伐的基础上&#xff0c;又自己总结、整理、汇总了一些资料&#xff0c;方便自己理解和后续回顾&#xff0c;同时也希望给大家带…

【Node.js】深度解析常用核心模块-path模块

✅ 作者简介&#xff1a;一名将要迈入大三的大学生&#xff0c;致力于提高前端开发能力 ✨ 个人主页&#xff1a;前端小白在前进的主页 &#x1f525; 系列专栏 &#xff1a; node.js学习专栏 ⭐️ 个人社区 : 个人交流社区 &#x1f340; 学习格言: ☀️ 打不倒你的会使你更强…

本地存储(Local Storage) 和 会话存储(Session Storage)

我不会告诉你任何定义和概念&#xff0c;上车&#xff0c;读完这篇博客&#xff0c;你就会对本地存储(Local Storage) 和 会话存储(Session Storage)有一个清晰的认识。 目录前提知识范例示例1&#xff1a;将键值对提供给本地存储示例2: 本地存储中设置键值对示例3: 获取空值示…

浏览器链接跳转进入小程序指定页面(适用安卓和iOS)

安卓和ios 浏览器外部链接跳转进入小程序 需求&#xff1a;用户点击链接进入小程序 第一步&#xff1a; 需要后端配合调用微信官方提供的接口方法 生成小程序的链接。 官方文档如下&#xff1a; https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/url-…

async与await异步编程

ECMA2017中新加入了两个关键字async与await 简单来说它们是基于promise之上的的语法糖&#xff0c;可以让异步操作更加地简单明了 首先我们需要用async关键字&#xff0c;将函数标记为异步函数 async function f() {} f()异步函数就是指&#xff1a;返回值为promise对象的函…

IDEA如何完美配置Servlet(适用于IDEA 2022及以下版本)

目录 准备Java文件 导入servlet-api.jar 配置Tomcat服务器 准备Java文件 1.首先新建Java项目 选择新建项目&#xff0c;构建系统选择Maven&#xff0c;点击创建 2.选择添加框架支持&#xff08;英文为Add Framework Support&#xff09; 3.选择添加web应用程序&#xff08;…