本文已参与「新人创作礼」活动,一起开启掘金创作之路。
uniapp - uni.navigateback返回上一页并返回参数
前言
毕设的前端需要点击一个输入框,跳转到一个选择页面,点击选项后返回页面并且将刚才所选择的内容绑定到输入框中,所以我就想着返回页面的时候传参,主页面接收参数并绑定到对应表单控件。 但是在一顿搜索之后发现网上搜到的大多数都是一样的,我也理解不了是为什么,于是就去看uniapp的官方文档,结果发现文档里就有方法,所以我就模仿了官方文档的方法实现了
实现
其实就是把官方的复制黏贴过来改改就能用了 主页面(部分代码)
methods: {
selectArticleType() {
var that = this;
uni.navigateTo({
url: '../selectArticleType/selectArticleType',
events: {
//自定义一个监听器名, data为选择页面返回的数据
selectType(data) {
that.model.typeName = data.name;
that.model.typeId = data.id;
}
}
})
},
...
}
选择页面(部分代码)
methods: {
select(id, name) {
// #ifdef APP-NVUE
const eventChannel = this.$scope.eventChannel; // 兼容APP-NVUE
// #endif
// #ifndef APP-NVUE
const eventChannel = this.getOpenerEventChannel();
// #endif
var vm = {
id: id,
name: name
}
//注意,这里的第一个参数要和主页面的监听器名称一致
//第二个就是要传的数据,我这里是传了一个对象回去
eventChannel.emit('selectType', vm);
uni.navigateBack();
}
}
这样就可以在关掉子页面的同时把数据传回主页面啦
更多详情大家也可以去官方文档一探究竟:
uniapp.dcloud.io/api/router?…
官方文档截图:
结尾
如果用官网的方法还有问题的话可以直接私信我或者在评论区问我,十分乐意为您解答,或者是我也不明白的情况,可以一起探讨一下
补充更新
后来我无意间看到还可以直接把要传的数据先存到缓存里面,页面返回后直接从缓存里面取,也是大开眼界,这又多了一种方法参考
uni.setStorageSync()
uni.setStorage()