首页IT科技uniapp页面跳转方式(【uni-app】点击左上角返回按钮,弹出弹窗或者是携带参数返回上一页)

uniapp页面跳转方式(【uni-app】点击左上角返回按钮,弹出弹窗或者是携带参数返回上一页)

时间2025-05-02 16:43:32分类IT科技浏览5359
导读:目录...

目录

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) }

创心域SEO版权声明:以上内容作者已申请原创保护,未经允许不得转载,侵权必究!授权事宜、对本内容有异议或投诉,敬请联系网站管理员,我们将尽快回复您,谢谢合作!

展开全文READ MORE
支付宝五福抢红包图片(支付宝哪些游戏有红包活动-支付宝五福红包活动开始啦!“敬业福”获取攻略在这里呦~) gentoo安装到u盘(将Gentoo LiveCD系统复制到硬盘HOWTO)