uniapp返回上一级选择性刷新数据，不重新加载页面

最新推荐文章于 2024-06-06 09:53:33 发布
最新推荐文章于 2024-06-06 09:53:33 发布
阅读量3.2k 收藏 7
点赞数 4
分类专栏： uniapp 文章标签： uni-app 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhiyuan1208/article/details/119797022
版权

在我们使用uniapp返回上一级页面时用到uni.navigateBack(),但是无法进行页面刷新，重新刷新整个页面又不能满足我们大部分时间的需求，此时可以通过监听器的方式，在页面触发返回时监听到变化，同时修改我们需要重新获取的数据。

话不多说，直接上代码

1. 返回上一个页面

 2. 获取上一级页面并触发更新

 通过getCurrentPages() 获取页面栈

 3. wacth监听 refresh

简单来说就是通过监听器来触发我们需要修改的数据

keke 可乐
关注
  • 4
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
解决vue项目F5刷新mounted里的函数不执行问题
10-16
在Vue.js开发过程中，我们经常会遇到这样一个问题：在F5刷新页面后，`mounted`钩子函数中的逻辑没有被执行，导致页面的一些功能无法正常运行。本文将深入解析这个问题的原因，并提供解决方案。 首先，理解Vue的生命...
uniapp 实现更换主题皮肤
06-24
在开发移动应用时，主题皮肤的可更换性是提升用户体验的重要功能之一。uniAPP作为一个跨端开发框架，允许开发者用一套代码实现多平台部署，包括iOS、Android、H5等。本文将详细介绍如何在uniAPP中实现主题皮肤的更换...
uniapp 返回上一页带参数并不刷新页面 uni.$on, uni.$emit , getCurrentPages， redirectTo，navigateTo，navigateBack，选择地址，
AAAXiaoApple的博客
01-18 1708
【代码】uniapp 返回上一页带参数并不刷新页面。 解决 使用 uni.navigateTo ， uni.redirectTo 重新返回某一页面，点击左上角返回键，页面重复问题
uniapp微信小程序 页面返回使用navigateBack，返回后页面不刷新问题解决方案
Heartnottowake的博客
07-11 6061
2,组件之间的跳转，使用redirectTo,通过关闭当前页面，跳转到指定页面再加载，这种适合二级页面到三级页面数据不更新问题。on 进行调用，触发的钩子需要放在mounted生命周期里，组件内的onShow不会生效。3，当一级页面使用了某个组件，组件内跳转二级页面，返回也不会刷新数据。放在父组件，也就是请求数据的那个页面或者组件里，尝试了众多方法，比如vuex，本地缓存，都不行。可以使用onShow生命周期请求数据。1，如果是页面之间的跳转。
uniapp编辑或者添加之后使用navigationBack返回上一页时数据不能更新的问题处理。
Jimmy的前端博客
06-06 654
uniapp编辑或者添加之后使用navigationBack返回上一页时数据不能更新的问题处理。
uniapp使用navigateBack方法返回上级页面并刷新
Achong999的博客
05-06 2281
目前想出的方案是在回退之前修改上页判断条件,回退后重新获取判断条件在决定是否刷新。修改状态成功后,准备回退到上一页之前,将上一页的是否刷新参数值改为是的状态。需刷新:在第二页编辑后,上一页列表中与之对应的数据状态一起改变。分析:一般调用navigateBack返回上一页时有两种情况。需要在onshow钩子中获取判断条件。不需刷新:查看内容,状态未改变.
uniapp 自定义tabbar页面不刷新
Dj_Fairy的博客
10-12 2164
最近在做自定义tabbar时，每次切换页面都要刷新，页面渲染很慢，需要实现切换页面不刷新问题。1.pages.json中配置tabbar，如下,设置高度为0，界面只需要设置路径。结局思路，原生的tabbar切换页面时就不选新，用switchTab来跳转。3.在自定义tab页面中用switchTab跳转。2. app.vue中隐藏原生tabbar。
uniapp、小程序选择数据后携带数据返回上一页且不刷新页面
weixin_52941842的博客
11-09 5199
uniapp、小程序选择数据后携带数据返回上一页且不刷新页面
uniapp页面跳转不刷新问题
weixin_51411364的博客
03-27 2335
在B页面设置一个变量isOnShow为false，使用onHide生命周期，在进入C页面时将isOnShow设置为true，C页面修改完内容返回到B页面时使用onShow判断isOnShow为true请求最新数据。问题描述：此时有A,B,C三个页面，A页面跳转B页面带了一个参数id，B页面通过id请求数据，B页面使用uni.navigateTo跳转至C页面修改内容，修改完成后返回B页面则不会刷新B页面重新获取数据。保留当前页面，跳转到应用内的某个页面，使用。
uniapp vue瀑布流自定义控件资源包
06-12
2. **上拉加载（Infinite Loading）**：当用户滚动到底部时，自动触发加载更多数据的功能，提升用户体验，减少手动刷新的操作。 3. **下拉刷新（Pull to Refresh）**：用户可以通过下拉页面的方式，轻松刷新当前显示...
uniapp-仿京东商城首页、分类页实现
最新发布
06-20
4. **加载更多**：为了优化用户体验，我们可以实现下拉刷新和上拉加载更多。uniapp提供了`uni-refresh`和`uni-load-more`组件来轻松实现这一功能。 在实践过程中，确保代码结构清晰、组件复用性高是关键。此外，还...
UniApp最近辛苦了 连续作战本周的APP项目
10-11
【标题】: " UniApp开发实战：一周连续作战APP项目经验分享" 【描述】: "在快节奏的软件开发行业中，UniApp凭借其跨平台、高效能的优势，成为了许多开发者的选择。本周，我们集中精力使用UniApp进行了一次连续的APP...
uniapp中监听用户返回
m0_50278775的博客
04-27 1万+
业务需求：小程序中有一个index页面专门用来处理通过链接，然后拿到参数之后跳转相应的页面，跳转到指定页面之后，用户点击左上角返回，返回到首页。但是默认的返回按钮应该是按历史路径返回的，所以返回的时候一直会返回到启动页index页面。 然后我就记得uniapp中有一个可以监听左上角返回按钮的方法（之前用uniapp开发app的时候使用过），onBackPress()跟onLoad()等生命周期同级，然后我就拿过来一放，一测果然不行，为什么不行呢，之前明明可以，再细看文档，发现人家只支持H5、app、支付宝
解决uniapp项目开发从某一页面返回到tabbar页面时，页面不刷新，无法重新获取跟新后的数据，无法重新渲染页面问题。
m0_55315930的博客
05-12 8815
解决uniapp项目开发从某一页面返回到tabbar页面时，页面不刷新，无法重新获取跟新后的数据，无法重新渲染页面问题。
uni-app ：从子页面回到父级页面（父级页面退回到子页面），父级不刷新的方法
m0_45218136的博客
09-05 804
从子页面回到父级页面（父级页面退回到子页面）
解决uni-app返回页面不触发页面刷新问题
热门推荐
qq_42306286的博客
11-29 1万+
针对问题：A 进入B页面并传递参数 data，B进入C页面操作了一番，然后从C页面返回，但是C的操作影响了B，B需要再次刷新页面。然而从C返回B页面却是不刷新的。 解决办法onhide() 和 onshow() 代码如下，首先设置ifOnShow为false，当页面离开onhide()时设置ifOnShow为true。 onload()加载的数据，在进入深层次页面之后还是保留的。直接用就...
干货，在uniapp项目中使用uni.navigateBack()方法返回上一页或多页时携带参数的方法！
徐飞的博客
09-19 1万+
干货，在uniapp项目中使用uni.navigateBack()方法返回上一页或多页时携带参数的方法！ getCurrentPages()函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
uni-app 返回上一级页面 并传递参数
lyq1948的博客
11-11 1049
【代码】uni-app 返回上一级页面 并传递参数。
uniapp返回上一页面并刷新页面重新根据接口获取数据
05-13
你可以使用uni-app提供的页面生命周期函数和uni.navigateTo()方法来实现返回上一页面并刷新页面重新根据接口获取数据的功能。 具体实现方法如下： 1. 在页面的onLoad()生命周期函数中，调用接口获取数据并将数据保存在页面的data中。 2. 在页面的onShow()生命周期函数中，判断是否需要重新获取数据。如果需要，则调用接口获取数据并将数据保存在页面的data中。 3. 在页面的onUnload()生命周期函数中，清空页面的data数据。 4. 在页面中设置一个返回按钮，并在按钮的点击事件中使用uni.navigateTo()方法返回上一页面。 5. 在上一页面的onShow()生命周期函数中，判断是否需要刷新数据。如果需要，则调用接口获取数据并更新页面。 下面是一个示例代码： ``` // 返回按钮的点击事件 goBack() { uni.navigateTo({ url: '../previousPage/previousPage' }) } // 当前页面的生命周期函数 onLoad() { // 调用接口获取数据并保存在data中 // ... }, onShow() { if (this.needRefresh) { // 调用接口获取数据并保存在data中 // ... this.needRefresh = false; } }, onUnload() { // 清空data中的数据 // ... } // 上一页面的生命周期函数 onShow() { if (this.needRefresh) { // 调用接口获取数据并更新页面 // ... this.needRefresh = false; } } ``` 需要注意的是，示例代码中的this.needRefresh是一个标记变量，用于判断是否需要重新获取数据或刷新数据。你可以根据实际情况进行调整。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值