uniapp页面跳转,返回,刷新,传递数据
uniapp页面跳转,返回,刷新,传递数据
携带参数跳转请看上一篇:uni-app页面跳转传递参数 - 苏槿年 - 博客园 (cnblogs.com)
返回上一页面并刷新
在uniapp中,返回上一页面的写法是:
uni.navigateBack({
delta: 1
})
此时返回上一页面后,上一页面的数据仍旧存在;
如果是传递数据并返回上一页面,那么上一页面的数据肯定是要进行一个刷新的,
例如,A页面为主页面,B为子页面;A跳转到B进行数据修改,B页面修改完数据后返回到A页面,并刷新A页面
注意:B页面并不会传递数据到A页面
A页面的写法如下:
export default {
onShow() {
var pages = getCurrentPages(); // 获取当前页面栈
var currentPage = pages[pages.length - 1]; // 当前页面
if (currentPage.data.refreshIfNeeded) {
currentPage.data.refreshIfNeeded = false;
//这里为要调用的函数,重新获取数据,记得加上this
}
},
}
B页面写法如下:
export default {
methods: {
//操作完成返回消息首页
Operation() {
let pages = getCurrentPages(); // 当前页面
let beforePage = pages[pages.length - 2]; // 上一页
beforePage.data.refreshIfNeeded = true;
uni.navigateBack({
delta: 1
})
},
}
}
如果返回上一页面需要传递数据
A页面跳转到B页面进行数据填写或修改,B页面将新的数据带回A页面
注意:此时A页面的数据并不会刷新
A页面的写法如下:
export default {
onShow() {
uni.$off('UpData')//建议先销毁一次监听,再进行新的一次监听,否则会出现重复监听的现象
uni.$once('UpData',function(data){
console.log(data);
//这的data就是B页面传递过来的数据
})
},
}
B页面写法如下:
export default {
methods: {
//这里的item是点击事件传递过来的数据,也可以不写,使用全局的数据
confirm(item){
var data = item;
//var data = this.option; 传递全局数据
uni.$emit('UpData', data)
uni.navigateBack({
delta: 1
})
}
}
}
如果需要携带数据返回并刷新页面
只需要将两种写法合并一下就行了
A页面:
export default {
onShow() {
uni.$off('UpData')//建议先销毁一次监听,再进行新的一次监听,否则会出现重复监听的现象
uni.$once('UpData',function(data){
console.log(data);
//这的data就是B页面传递过来的数据
})
var pages = getCurrentPages(); // 获取当前页面栈
var currentPage = pages[pages.length - 1]; // 当前页面
if (currentPage.data.refreshIfNeeded) {
currentPage.data.refreshIfNeeded = false;
//这里为要调用的函数,重新获取数据,记得加上this
}
},
}
B页面
export default {
methods: {
//这里的item是点击事件传递过来的数据,也可以不写,使用全局的数据
confirm(item){
let pages = getCurrentPages(); // 当前页面
let beforePage = pages[pages.length - 2]; // 上一页
beforePage.data.refreshIfNeeded = true;
var data = item;
//var data = this.option; 传递全局数据
uni.$emit('UpData', data)
uni.navigateBack({
delta: 1
})
}
}
}