0


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

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)
        }
标签: uni-app 前端

本文转载自: https://blog.csdn.net/Qxn530/article/details/126829861
版权归原作者 哇哦Q 所有, 如有侵权,请联系我们删除。

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

还没有评论