uniapp编辑或者添加之后使用navigationBack返回上一页时数据不能更新的问题处理。

在数据编辑之后,想要刷新当前界面的数据,但是在网上找了很久的解决方案发现未能解决,最后咨询了一个资深女前端,她为我提供了一个非常好的解决方案。如下:

如果你要从A页面跳转到B页面去做操作,然后B页面使用navigationBack方法返回的时候,发现上个页面被缓存,需要重新加载,这时候会很麻烦,因此为大家分享一段解决方案:

A页面,跳转的时候代码如下:

javascript 复制代码
handleCreateVip() {
  const _this = this
  uni.navigateTo({ 
    url: '/pages/vip/vipUser/vipUserCreate?release=' + this.queryParams.releaseFishing,
      events: {
        updateBlanceData() {
           _this.initPage()
         }
       }
   })
}

此时需要注意,在跳转时,将方法通过events进行注册,你要记住这里注册的方法名称"updateBlanceData",另外注意_this = this这个,因为这里会有this的问题,已经踩过坑了,看到的朋友就别踩了

B页面:

javascript 复制代码
onUnload() {
  const eventChannel = this.getOpenerEventChannel();
  eventChannel.emit('updateBlanceData')
}

A页面跳转到B,B在navigateBack的过程其实就是卸载,因此调用A界面传递的方法,此时就能达到数据刷新的效果啦。

另外:也可以在navigateBack方法中直接调用:

javascript 复制代码
modalConfirm() {
  const _this = this
  uni.navigateBack({
    success() {
      const eventChannel = _this.getOpenerEventChannel();
      eventChannel.emit('updateBlanceData')
    }
 })
}
相关推荐
hongweihao18 小时前
儿子不收拾玩具,我用AI给他量身定制开发一个APP,这下舒服了
uni-app·app·ai编程
Hashan19 小时前
微信小程序:扁平化的无限级树
前端·微信小程序·uni-app
小徐_233319 小时前
uni-app 无法实现全局 Toast?这个方法做到了!
前端·uni-app
xixixin_20 小时前
【HTML】在页面中画一条0.5px的线
前端·css·uni-app·html·css3
&白帝&21 小时前
Uniapp 自定义头部导航栏
前端·javascript·uni-app
&白帝&21 小时前
Uniapp 条件编译详解
uni-app
xkxnq1 天前
uniapp跨端性能优化方案
uni-app
速易达网络1 天前
基于UniApp的新大陆物联网平台温湿度检测系统开发方案
物联网·uni-app
har01d1 天前
在 uniapp 里使用 unocss,vue3 + vite 项目
前端·uni-app·vue·uniapp·unocss
paopaokaka_luck2 天前
校园快递小程序(腾讯地图API、二维码识别、Echarts图形化分析)
vue.js·spring boot·后端·小程序·uni-app