(三) uni 页面通讯

最新推荐文章于 2023-07-15 11:01:40 发布
最新推荐文章于 2023-07-15 11:01:40 发布
阅读量149 收藏 1
点赞数 1
分类专栏： UNI
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34440345/article/details/106619221
版权

在手机端 经常碰见 B页面 返回 A 页面  或者上一个页面 需要 携带参数给上一个页面

思路: A 页面 监听 B 页面某个动作，比如返回，确定。

具体代码

A 界面 

this.searchData 是一个方法 监听到会执行这个方法

B 界面

总结

实际应用场景很多

这段代码应用场景是 A 界面 有个搜索，点击搜索 进入B界面，在B界面选择搜索条件，并返回到A界面

A界面根据搜索条件刷新列表数据。

qq_34440345
关注
专栏目录
uni-app 常用的页面间通讯方式
前端博客典中典
12-08 830
uni-app 是一个使用 vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。 一、利用url传参进行通讯 A页面向B页面传递参数 uni.navigateTo({ url: 'test/test?id=1&url=' + encodeURIComponent('https://dcloud.io') }); B页面接收A页面传递的参数
uni-app中的页面通讯$on与$emit
weixin_45932157的博客
03-27 1067
在页面与页面之间通讯时，很多人会直接选择使用在navigato的时候直接拼接字符串来传递。可是当需要传依个比较多数据的的对象的时候这个方式就不是很管用了，为此uniapp给我们提供了页面与页面之间通讯的极为简便的方法。 比如我在下订单页面的时候需要用户选择一个地址去配送，因此我们需要点击之后跳转到选择收货地址页面。而在选择完了收货地址以后需要关闭那个页面返回该订单页面。因此在该订单页面我们需要开启监听用户选择地址的事件。注意在订单页面卸载的时候也要记得关闭该监听。 下面为订单页面的代码： onLoad()
uniapp页面通信
m0_67388537的博客
07-15 1772
在uni中，想要实现页面通讯，比较主流的有5中方式，这4中方式各有各的优缺点，请谨慎选择。优缺点:路由传参和本地缓存是长久存储，刷新页面数据不会丢失，但路由传参适用于数据比较少的情形。globalData适用于小型项目，vuex适用于中大型项目。
uniapp的页面通讯
weixin_45625349的博客
01-13 369
uni.$emit 触发全局的自定事件。附加参数都会传给监听器回调。 uni.$emit('update',{msg:'页面更新'}) uni.$on 监听全局的自定义事件。事件可以由 uni.$emit 触发，回调函数会接收所有传入事件触发函数的额外参数。 uni.$on('update',function(data){ console.log('监听到事件来自 update ，携带参数 msg 为：' + data.msg); }) uni.$once 监听全局的自定义
uniapp页面通信方法总汇
油墨香^-^的博客
02-22 1063
uni-app 是一个使用 vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。A页面向B页面传递参数B页面接收A页面传递的参数自 HBuilderX 2.0.0 起支持 uni.$emit、 uni.$on 、 uni.$once 、uni.$off ，可以方便的进行页面的通讯 ，触发的事件都是 App 全局级别的，跨任意组件，页面，nvue，vue 等。
uni-app中的页面通讯
单飞吧的博客
03-30 169
A 页面 uni.$on // 监听事件 uni.$on('leaveList', (data) => { this.data = data ; }) B 页面 uni.$emit uni.$emit("leaveList", this.data)
微信小程序路由跳转及传值(多值)
qq_41619567的博客
10-29 993
//yuan.js wx.navigateTo({ url: 'test?id=1', events: { // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据 acceptDataFromOpenedPage: function(data) { console.log(data) }, someEvent: functi...
uni-app如何页面传参数的几种方法总结
10-15
以下是一个简单的例子，展示了如何正确使用`uni.$emit()`和`uni.$on()`进行页面间的通讯： 发送页面（`sender.vue`）： ```html 点击发射 import Vue from "vue"; export default { methods: { click() ...
uni-app案例 仿微信页面（无响应）
06-16
【uni-app案例 仿微信页面（无响应）】 在移动应用开发领域，uni-app是一个备受开发者欢迎的跨平台框架，它允许开发者使用一套代码库来构建iOS、Android、H5、小程序等多个平台的应用。本案例将探讨如何使用uni-app...
该项目主要为解决uni-app创建的小程序和网页之间通讯示例方案.zip
10-27
【uni-app创建的小程序与网页...通过以上讲解，我们了解到uni-app如何在小程序与网页间实现通讯，并提供了具体的示例项目供开发者参考。深入理解和实践这个示例，可以帮助开发者更高效地在多平台上构建功能丰富的应用。
uniapp中页面之间通信
qq_39695210的博客
03-20 1027
uniapp中页面之间通信
uni-app页面间通信
记录点滴
12-28 1672
关于页面间跳转传值 1、使用页面路径传参 **（1）uni.navigateTo( ) / uni.redirectTo( ) 参数与路径之间使用 ? 分割，参数键 与 参数值 用等号 = 相连，不同的参数用& 分割。 **（2）url 传参方式会有长度限制，太长字符串会传递失败！！！ **（3）跳转到另一页面，在onLoad 生命周期函数中 通过参数，可以获取到传递的参数 uni.nav...
uni-app 页面通信
qq_42143163的博客
01-03 871
示例 传值页面 <template> <view> <text @click="communication"> uni-app页面通讯 </text> </view> </template> <script> export default{ data(){ return{ ...
uni组件和页面之间的通信（所有页面共用工具栏）
学而不思则罔 思而不学则殆
08-03 4489
uni官方文档中写有页面通信方式： https://uniapp.dcloud.io/api/window/communication?id=emit uni.$emit(eventName,OBJECT) 触发全局的自定事件。附加参数都会传给监听器回调。 示例： uni.$emit('update',{msg:'页面更新'}) uni.on(eventName,callback)监听全局的自定...
uni-app页面通讯总结
weixin_45308139的博客
09-29 1110
uni-app组件间的传值方法，是结合了vue及uni-app两种语法，这篇总结来讲解组件传值，较为基础，也较好理解。
(五) uni 实现文件预览（解决 IOS端 文件名乱码问题）
SsStr的博客
04-28 2477
先贴代码 tapDown(fileId) { const userInfo = this.$apiCache.getUserInfo(); uni.downloadFile({ url: 'http://192.168.100.4:31173/My_OAModule/ResourceFile/downFile?loginMark=' + userInfo.loginMark + ...
(二) uni 实现个人中心头像上传
SsStr的博客
06-08 1703
先看效果 说下实现思路，在用户点击头像的时候 弹出选项 选择相册打开，选择头像后跳转到 头像裁剪页面，裁剪完成点击上传图像 上传到服务器上，返回个人主页并刷新本地个人图像 大概实现方式 ...
（七）uni 返回刷新上个页面并传参数
SsStr的博客
09-19 526
在uni 页面生命周期中 有一个这样的函数 监听页面返回动作 在子页面需要 onBackPress(e) { uni.$emit("refreshData", null); }, 在父页面（页面在加载时候就开始监听子页面返回事件，同时这样做 子页面可以传参数给父页面） onLoad(o) { this.initData(); this.refreshData(); }, methods: { refreshData(){ uni.$once('refreshD.
uni-app跨页面传递数据
最新发布
11-15
uni-app跨页面传递数据可以使用uni.navigateTo和uni.redirectTo的参数传递，也可以使用uni.$emit和uni.$on进行页面间通讯。具体方法如下： 1.使用uni.navigateTo和uni.redirectTo的参数传递 在跳转到目标页面时，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值