位置: IT常识 - 正文

【uni-app】点击左上角返回按钮，弹出弹窗或者是携带参数返回上一页(uni-app怎么样)

编辑：rootadmin

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

1、弹出弹窗

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

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

1、弹出弹窗

推荐整理分享【uni-app】点击左上角返回按钮，弹出弹窗或者是携带参数返回上一页(uni-app怎么样)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:uni-app入门教程,uni-app实战教程,uni-app loading,uni -app,uni'app,uni'app,uni app ui,uni'app,内容如对您有帮助，希望把文章链接给更多的朋友！

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

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

【uni-app】点击左上角返回按钮，弹出弹窗或者是携带参数返回上一页(uni-app怎么样)

注意：onBackPress和methods、onLoad同级

data() {return {flag: true //是否弹出返回提示框 }},onBackPress() {if (this.flag) {uni.showModal({title: "确定退出编辑？",content: "退出后内容不做保存",success: (res) => {if (res.confirm) {// console.log("确定返回");this.flag = falseuni.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 = thisuni.$on('update1', function(data) {that.damagePoint = dataconsole.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)}

本文链接地址:https://www.jiuchutong.com/zhishi/285105.html 转载请保留说明！

上一篇：若依 vue前端动态设置路由path不同参数在页面容器里打开新页面（新路由），面包屑和标签页标题根据参数动态改变，面包屑多级标题，侧边栏对应菜单亮起(前端vue后端node)

下一篇：工程复现 -- grid map和elevation map(工程复工程序是什么)