【mpvue】微信小程序调用switchTab重定向到页面,不会自动刷新,调用page.onLoad()方法没有效果

简介: 1、小程序效果演示(1)点击添加基金按钮,跳转到添加基金的页面,目前该页面(pages/index/main)有两个基金。

1、小程序效果演示


(1)点击添加基金按钮,跳转到添加基金的页面,目前该页面(pages/index/main)有两个基金。


image.png


(2)在添加基金页面填写基金代码,会跳出弹框是否继续添加基金


image.png


(3)点击取消,会自动跳转到首页,显示刚刚添加的基金


image.png


2、需求描述,在添加基金页面添加完基金之后,点击showModal提醒框的取消按钮,自动跳转到首页并自动刷新首页,显示出刚刚添加的基金(/pages/index/main)


错误示范


目前我是像下面这样写的,首页不会自动刷新


wx.showModal({
  title: '成功',
  confirmText: '继续',
  content: `${res.code}(${res.name})添加成功,要继续添加基金吗?`,
  success: function (res) {
    if (res.cancel) {
      wx.switchTab({
        url: '/pages/index/main'
      })
    }
  }
})


3、通过page.onLoad()来解决自动刷新的问题


wx.showModal({
  title: '成功',
  confirmText: '继续',
  content: `${res.code}(${res.name})添加成功,要继续添加基金吗?`,
  success: function (res) {
    if (res.cancel) {
      wx.switchTab({
        url: '/pages/index/main',
        success: function (e) { 
          var page = getCurrentPages().pop();
          console.log('page',page)
          if (page == undefined || page == null) return;
          page.onLoad();
        } 
      })
    }
  }
})


只是写上面语句page.onLoad();语句还不会生效,需要到url:

'/pages/index/main'对应的index.vue页面中,添加onLoad函数,其中this.getFunds()是我在methods中定义的获取目前添加的所有基金的方法。


onLoad () {
  this.getFunds()
}


这样onload就生效了。


4、通过page.onPullDownRefresh()来解决自动刷新的问题


(1)首先将page.onLoad();改成page.onPullDownRefresh();


wx.showModal({
  title: '成功',
  confirmText: '继续',
  content: `${res.code}(${res.name})添加成功,要继续添加基金吗?`,
  success: function (res) {
    if (res.cancel) {
      wx.switchTab({
        url: '/pages/index/main',
        success: function (e) { 
          var page = getCurrentPages().pop();
          console.log('page',page)
          if (page == undefined || page == null) return;
          page.onPullDownRefresh();
        } 
      })
    }
  }
})


(2)再在pages/index/index.vue文件中添加上onPullDownRefresh,其中this.getFunds()是我在methods中定义的获取目前添加的所有基金的方法


<script>
export default {
  onPullDownRefresh () {
  this.getFunds()
  }
}
</script>


(3)在pages/index/main.json中添加代

"enablePullDownRefresh":true,设置允许下拉刷新


{
  "enablePullDownRefresh":true
}


这样添加完基金,返回到显示基金的页面,就会显示刚刚添加的基金了。



目录
相关文章
|
1月前
|
移动开发 小程序
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
如何让uni-app开发的H5页面顶部原生标题和小程序的顶部标题不一致?
|
6天前
|
小程序
小程序和页面生命周期详解
小程序和页面生命周期详解
13 0
|
23天前
|
小程序
uniapp 实现当前页面分享至微信好友或朋友圈功能(带参数和无参数)
uniapp 实现当前页面分享至微信好友或朋友圈功能(带参数和无参数)
65 0
|
1月前
|
小程序 数据库
【微信小程序7】云开发中实时聊天系统的实现方法
【微信小程序7】云开发中实时聊天系统的实现方法
24 0
|
1月前
|
小程序
【微信小程序6】引入第三方UI的方法(ColorUi)
【微信小程序6】引入第三方UI的方法(ColorUi)
22 0
|
1月前
|
存储 缓存 小程序
微信小程序页面传值的几种方式
微信小程序页面传值的几种方式
|
1月前
|
存储 小程序
小程序路由传参的方法?
小程序路由传参的方法?
11 0
|
1月前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。
|
1月前
|
小程序 安全 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的身份认证与授权机制。身份认证包括手机号验证、微信登录和第三方登录,而授权机制涉及角色权限控制、ACL和OAuth 2.0。实践中,开发者可利用微信登录获取用户信息,集成第三方登录,以及实施角色和ACL进行权限控制。注意点包括安全性、用户体验和合规性,以保障小程序的安全运行和良好体验。通过这些方法,开发者能有效掌握小程序全栈开发技术。
|
1月前
|
JavaScript 前端开发 小程序
微信小程序全栈开发之性能优化策略
【4月更文挑战第12天】本文探讨了微信小程序全栈开发的性能优化策略,包括前端的资源和渲染优化,如图片压缩、虚拟DOM、代码分割;后端的数据库和API优化,如索引创建、缓存使用、RESTful API设计;以及服务器的负载均衡和CDN加速。通过这些方法,开发者可提升小程序性能,优化用户体验,增强商业价值。