ios跳转页面回退不刷新问题&&解决方案

最新推荐文章于 2024-01-31 13:48:18 发布

置顶

LYFlied

最新推荐文章于 2024-01-31 13:48:18 发布

阅读量2.5k

点赞数 11

分类专栏：问题&&解决文章标签： react ios 页面刷新兼容性问题 js

本文链接：https://blog.csdn.net/qq_39903567/article/details/117921945

版权

问题

用react开发的H5项目在移动端中遇到了兼容性的问题：
在页面a，点击提交按钮后，按钮状态置灰，并跳转到页面b，再从b页面退回到a页面，
在Android手机中没有问题，a页面正常显示。
在IOS手机中，a页面的提交按钮仍然是置灰状态，不可点击。

Android：
跳转路由再回来后触发了页面刷新，触发componentDidMount等生命周期，按钮状态刷新，重新变为了可点击状态。

ios:
跳转路由再回来，不会触发页面刷新，也不会触发componentDidMount等生命周期，一直保持着跳走之前的状态。

初步解决方案：
在跳走之前把按钮状态重新设置为可点击状态。

window.location.href = 'b.html';

setTimeout(() => {//setTimeout解决视觉上按钮状态闪动问题
	this.setState({
		checkSubmitFlg: true
	});
}, 100);

在网络环境较差情况下，下一个页面还没loading好，所以会先触发setTimeout里的逻辑，导致页面还没跳走，按钮就重新变得可点击了。

onpa

关注