uniapp uni.navigateback返回上一页并返回参数

您所在的位置:网站首页 eback uniapp uni.navigateback返回上一页并返回参数

uniapp uni.navigateback返回上一页并返回参数

#uniapp uni.navigateback返回上一页并返回参数| 来源: 网络整理| 查看: 265

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(); } }

这样就可以在关掉子页面的同时把数据传回主页面啦 更多详情大家也可以去官方文档一探究竟: https://uniapp.dcloud.io/api/router?id=navigateto 官方文档截图: 在这里插入图片描述

结尾

如果用官网的方法还有问题的话可以直接私信我或者在评论区问我,十分乐意为您解答,或者是我也不明白的情况,可以一起探讨一下

补充更新

后来我无意间看到还可以直接把要传的数据先存到缓存里面,页面返回后直接从缓存里面取,也是大开眼界,这又多了一种方法参考

uni.setStorageSync() uni.setStorage()


【本文地址】


今日新闻


推荐新闻


CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3