在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.(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)
})
的方法进行赋值
网友评论