美文网首页
uniapp带参返回上一页功能实现

uniapp带参返回上一页功能实现

作者: 2025丶10丶16 | 来源:发表于2020-11-04 15:47 被阅读0次

    在uniapp开发过程中经常会遇到这种情况:
    列表页面A点击item进入详情页B,详情页B进行操作后返回A列表页并从A列表移除刚才操作的item,或者修改item的值,又或者返回之后直接刷新。
    由于uniapp的uni.navigateBack没有提供带参的返回方法,所以我们只能另辟蹊径。

    这里我要实现的场景是A列表点击item跳转B页面,B页面提交表单后,点击完成按钮,返回A列表页,并刷新当前列表组件(refs="apply")

    我们注意到uniapp中可以通过getCurrentPages()获取页面栈。
    我们先在A页面data中定义:

    data(){
        return{
            doReflash:false, //是否刷新
            reflashPage:''     //刷新的组件的ref值
        }
    }
    

    并在onShow中获取当前页面对象currPage:

    var pages = getCurrentPages();
    var currPage = pages[pages.length - 1];
    

    将页面对象遍历出来可以看到currPage中有一个属性vm,该属性为当前页面A的Vue实例对象,通过currPage.vm.(data中的值)可以取到当前页面data中的值,所以onShow中:

    let doReflash = currPage.$vm.doReflash?currPage.$vm.doReflash:false;
    let reflashPage = currPage.$vm.reflashPage?currPage.$vm.reflashPage:'';
    if(doReflash){
        if(reflashPage == 'apply'){
            this.$refs.applying.mescroll.resetUpScroll()
        }else{
            this.$refs.process.mescroll.resetUpScroll()
        }
    }
    

    接着在详情页面B中点击完成按钮获取上个页面对象prevPage:

    var pages = getCurrentPages();
    var prevPage = pages[pages.length - 2];
    

    修改上个页面的值并返回上个页面:

    prevPage.$vm.doReflash = true,
    prevPage.$vm.reflashPage = 'apply'
    uni.navigateBack({
        delta:-1
     })
    

    此处修改的值在A页面的onShow中即可获取到,根据onShow中取到的值再进行判断是否需要刷新列表组件。
    需要注意的是:
    1、当A页面为tabBar页面时,从B页面使用uni.navigateBack返回A页面时,不会触发onShow生命周期(不知道是框架bug还是有意设置区别),建议使用:

    uni.switchTab({
        url:'A页面'
    })
    

    即可正常触发onShow
    2、通过$vm修改data值在app-plus中可以使用,在微信小程序中需要使用

    (页面对象).setData({
            (data中的值):(value)
    })
    

    的方法进行赋值

    相关文章

      网友评论

          本文标题:uniapp带参返回上一页功能实现

          本文链接:https://www.haomeiwen.com/subject/tqegvktx.html