uni-app返回上一层页面后数据刷新重置解决办法,uni-app页面不刷新,强制刷新页面方法!

页面跳转后返回之前页面数据全部重置刷新了
大概意思就是从a页面去b页面办了点事,在回到a页面时之前填写的数据没了,页面数据重置了怎么办,这个应该只有新手会犯这个错误,可以看看官方文档:uni-app页面跳转方法
可以看看你的代码,从b返回a是不是使用了uni.navigateTo({}) ,如果是返回直接使用uni.navigateBack()就可以了,使用uni.navigateTo({})视为打开一个新页面,所以你的数据都没了,uni.navigateBack()是返回上一页,只是返回,所以之前的数据状态都还在,如果你用的就是uni.navigateBack(),那检查下是不是写了相关函数,重置了页面填写的数据,或者调用了类似方法,正常返回是不会清空之前的数据的

// 路由跳转到非 tabBar页面使用uni.navigateTo({}) 
uni.navigateTo({
	url: '/pages/index?id=1'
});          
// 返回上一页
uni.navigateBack({});
// 返回上上一页
uni.navigateBack({
	delta: 2
});

还有其他跳转方法我就不赘述了,可以去官网查看,也可以查看这篇文章:uni-app路由跳转及路由传参方法

第二个就是页面不刷新的问题了
这个简单,当你的数据发生变化后,页面视图如果没有随着改变只需要加上下面这个就OK了,这个属于双向绑定的问题,出现这个问题的几率相对来说比较小,如果出现问题,可以先试一下使用深拷贝看能否解决

// 比如页面中绑定了一个对象的数据
data: {
	dataObj: {
		name: '玛卡把卡',
		age: 23
	}
}
changeData() { // 数据改变赋值的时候使用深拷贝
	let data = {
		name: '草帽路飞',
		age: 20
	}
	this.dataObj = JSON.parse(JSON.stringify(data ));
},

如果以上办法无法解决,用的框架是VUE的话,可以使用this.$forceUpdate(),这个方法就是用来强制刷新页面渲染数据的

this.$forceUpdate()强制刷新页面

如果你没有使用vue,那可以尝试下面方式解决,给未及时刷新的dom元素绑定一个KEY值:

<template>
	<view>
		<view class="module-box1" :key="moduleKey"></view>
		<commponent1 v-if="PageCur=='commponent1'" :key="commponent1Key"></commponent1>
		<commponent2 v-if="PageCur=='commponent2'" :key="commponent2Key"></commponent2>
		
		<view class="module-box2">
			<button	@tap="tapMenu" :data-cur="commponent1">按钮1</button>
			<button	@tap="tapMenu" :data-cur="commponent2">按钮1</button>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			PageCur: 'commponent1',
			moduleKey: 0,
			commponent1Key: 0,
			commponent2Key: 0,
			
			},
		};
	},
	onLoad() {
		//获取数据
		this.getData()

	},
	methods: {
		getData() {
			var that = this
			//获取数据
			uni.request({
			    url: 'https://www.example.com/request',
			    success: (res) => {
			        console.log(res.data);
			        //相关处理
					//最后更新相应模块或组件的key
					++that.moduleKey
					++that.commponent1Key
					++that.commponent2Key
			    }
			});
			
		},
		tapMenu(e) {
			var that = this
			this.PageCur = e.currentTarget.dataset.cur
		},
}
</script>

好了,希望可以帮你解决问题!,今天的分享到这,你学废了吗?
在这里插入图片描述

### 实现 UNIAPP返回一页面时自动刷新 在开发过程中,当涉及到页面之间的导航时,尤其是在微信环境中进行授权操作后,可能会遇到页面回退时发生自动刷新的情况。对于这个问题,可以采取多种策略来确保页面回退会触发必要的刷新。 #### 方法一:检查当前页面有条件地执行 `navigateBack` 为了防止页面被重复加载而导致的刷新现象,可以在调用 `uni.navigateBack` 前先判断当前页面栈的状态: ```javascript goBack() { const pages = getCurrentPages(); if (pages && pages.length > 1) { uni.navigateBack({ delta: 1, }); } else { window.history.back(); // 使用原生浏览器行为代替框架API } } ``` 这种方法利用了 `getCurrentPages()` 函数来获取应用内的所有打开过的页面实例列表[^3]。只有当确实存在可退回的历史记录项时才调用 `uni.navigateBack`,否则尝试使用浏览器自身的 `history.back()` 功能来进行更自然的操作处理。 #### 方法二:保存状态至本地存储或 URL 参数 另一种方式是在每次进入新页面之前将必要的数据存入 LocalStorage 或者作为查询字符串附加到URL地址栏中。这样即使发生了意外刷新也能恢复之前的浏览上下文而影响用户体验。 例如,在跳转目标页面前可以通过如下代码片段设置参数: ```javascript // 进入下一个页面时传递必要信息 const paramsToPass = encodeURIComponent(JSON.stringify(someData)); uni.navigateTo({ url: `/path/to/targetPage?data=${paramsToPass}` }); ``` 而在接收端则解析这些传来的值用于初始化界面显示逻辑: ```javascript onLoad(options){ if(options.data){ try{ this.someData = JSON.parse(decodeURIComponent(options.data)); }catch(e){} } } ``` 此做法有助于保持前后两次访问间的一致性和连贯性,从而减少因刷新带来的干扰[^2]。 #### 方法三:禁用默认事件监听器 有时页面间的过渡动画或其他插件可能无意间绑定了某些全局性的事件处理器,这可能导致特定条件下触发额外的动作如重新载入整个文档对象模型(DOM)树结构。因此建议开发者仔细审查项目配置文件中的相关设定,适当调整以排除潜在冲突源。 比如取消默认绑定于窗口上的 popstate 事件监听器: ```javascript window.addEventListener('popstate', function(event) { event.preventDefault(); // 阻止默认动作即页面刷新 }, false); ``` 以上三种途径均可有效缓解乃至彻底消除由于当设计所引起的页面来回切换期间发生的非预期更新问题[^1]。
评论 17
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端攻城狮路飞

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值