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

问题

用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里的逻辑,导致页面还没跳走,按钮就重新变得可点击了。

尝试的其他解决方案

onpageshow

onpa

  • 11
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 8
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值