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>

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

  • 4
    点赞
  • 19
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 17
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 17
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

打赏作者

前端攻城狮路飞

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

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

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

打赏作者

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

抵扣说明:

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

余额充值