美文网首页
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