使用 uni-app 开发的微信小程序中,如何在从 B 页面回来时,重新拉取数据?

👨🏻‍💻 热爱摄影的程序员

👨🏻‍🎨 喜欢编码的设计师

🧕🏻 擅长设计的剪辑师

🧑🏻‍🏫 一位高冷无情的全栈工程师

欢迎分享 / 收藏 / 赞 / 在看!

【问题】

使用 uni-app 开发的微信小程序中,如何在从 B 页面回来时,重新拉取数据?

【解决】

可以使用监听事件的方式解决返回页面重新获取数据的需求。

官网-$emit

以登录状态失效后,跳转登录相关功能为例:

当点击 A 页面时发现登录状态失效,此时跳转到 B 页面去登录,登录成功后定义一个全局事件 loginSuccess,并返回上一页:

javascript 复制代码
loginSuccess() {
  this.$modal.hideLoading()
  this.$modal.msgSuccess('登录成功')
  setTimeout(() => {
    uni.$emit('loginSuccess'); // 发送事件
    this.$tab.navigateBack() // 返回上一页
  }, 800)
}

在 A 页面中,onShow 钩子中监听登录成功事件,执行 reloadPageData 方法重新获取页面数据。

javascript 复制代码
onShow() {
  // 页面显示,监听登录成功事件
  uni.$on('loginSuccess', this.reloadPageData);
}

需要注意的是,在页面卸载时,需要移除监听事件。

javascript 复制代码
onUnload() {
  // 页面卸载时,移除监听事件
  uni.$off('loginSuccess', this.reloadPageData);
}

或者使用 uni.$once 方法,只监听一次事件。

javascript 复制代码
onShow() {
  // 页面显示,监听登录成功事件
  uni.$once('loginSuccess', this.reloadPageData);
}
相关推荐
一夜枫林4 小时前
uniapp自定义拖拽排列
前端·javascript·uni-app
良艺呐^O^5 小时前
uniapp实现app自动更新
开发语言·javascript·uni-app
thigh_d17 小时前
uniapp 安卓离线本地打包,Android Studio生成apk包
android·uni-app·android studio
珎珎啊17 小时前
uniapp+vue3移动端实现输入验证码
前端·javascript·uni-app
前端无涯17 小时前
uniapp跨平台开发---switchTab:fail page `/undefined` is not found
uni-app
老李不敲代码17 小时前
榕壹云预约咨询系统:基于ThinkPHP+MySQL+UniApp打造的灵活预约小程序解决方案
mysql·微信小程序·小程序·uni-app·php
fakaifa18 小时前
【最新版】西陆健身系统源码全开源+uniapp前端
前端·小程序·uni-app·开源·php·约课小程序·健身小程序
七七小报18 小时前
uniapp-商城-34-shop 购物车 选好了 进行订单确认
uni-app
万岳软件开发小城21 小时前
基于PHP+Uniapp的互联网医院源码:电子处方功能落地方案
开发语言·uni-app·php·软件开发·互联网医院系统源码·智慧医院app
依辰2 天前
小程序SAAS产品定制化需求解决方案
前端·javascript·微信小程序