小程序f2自定义html,小程序示例 - 不同页面间的消息传递

场景

假设有两个页面:用户列表页、信息编辑页

在列表中点击后某条信息后,进入编辑页面

e33e16455ee5f770aa87a6f0964418c8.png

修改了用户信息后,返回到列表页,列表中需要显示修改后的信息

例如把 “李四” 改为了 “李六”,那么返回列表页后,第2条记录就应该显示的是 “李六”

如何更新?

例如可以重新加载列表,返回到列表页时,触发的是onShow事件,那么就在 onShow 处理函数中重新请求数据进行加载

但这样做不太好处理用户体验问题,例如修改的是经过多次下拉翻页后的某条用户信息

也可以不用重新加载,在保存之后设置缓存,指明修改的用户ID、修改后的数据,然后在列表页的onShow处理函数中读取缓存,直接修改现有列表中的数据

解决

上面的更新方式都不太优雅,建议使用 broadcast广播机制

列表页设置监听,编辑页修改完成后发送广播通知

列表页const broadcast = require("../../utils/broadcast")

...

onLoad: function (options) {

...

// 设置广播监听

broadcast.on("broadcast_user_modified", (data) => {

// 处理逻辑

...

});

}

...

编辑页const broadcast = require("../../utils/broadcast")

...

// 广播

broadcast.fire("broadcast_user_modified",

{

userid:user_id,

...

}

)

...

列表页收到广播后就会触发处理函数,取得广播传递过来的数据,对现有列表数据进行修改,使用setData更新

从详细页返回到列表页时,列表中的数据就已经是最新的了

小结

broadcast是一个非常小巧实用的广播工具,非常适合在不同页面间传递消息

项目地址:https://github.com/binnng/broadcast.js

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值