混合app 解决常见bug弹出键盘返回出现闪屏
2023-09-14 09:01:09 时间
前言
在我们开发混合app中,我们会发现一个问题,那就是比如我们正在输入信息的时候,然后我们按导航的返回键返回,因为切页面和回收键盘是同时的,给人一种闪屏的感觉,那么怎么解决呢?
方案
以ionic为例子:
设置一个变量监听当前是否键盘弹出。
showKeyboard: boolean = false;
这时候呢,如果判断键盘为true的话就不返回。
this.getNavBar().backButtonClick = (e) => {
if (that.showKeyboard) {
return false;
} else {
//返回
that.nav.pop();
}
}
在此解释一下合理性,为什么不返回为合理呢?这时候键盘弹出,按理说就应该点击其他地方让它失去焦点,而不是转移焦点。
那么我们需要些键盘监听事件:
window.addEventListener('keyboardWillShow', this.keyboardShowCallback.bind(this));
window.addEventListener('keyboardWillHide', this.keyboardHideCallback.bind(this));
keyboardShowCallback() {
this.showKeyboard = true;
}
keyboardHideCallback() {
var that=this;
setTimeout(()=>{
that.showKeyboard=false;
},500);
}
这样可以达到理想效果。
相关文章
- 找bug记(1)
- [廖雪峰] Git 分支管理(2):Bug 分支
- 解决百度 ueditor v1.4.3 编辑器上传图片失真的bug?
- 解决ThinkPHP3.2.3框架,PDO驱动查询出来的字段名全是小写的bug
- iOS开发之Bug(持续更新)
- 【Bug】Bug 11827204: NON-OSDBA USERS WITH LOCAL CONNECTIONS: ORA-15025 ORA-27041
- IOS bug之Code Sign error:Provisioning profile
- bug_ _ _常见的bug??
- python实现提取jira bug列表
- 被灵魂问倒:这个BUG为什么没测出来?
- 【C++】指针引发的bug
- leaflet 加载WMTS数据显示图形,解决 leaflet.TileLayer.WMTS的bug问题(099)
- 字节跳动测试面试题:如何定位一头条bug根因?
- Kernel: 积木 BUG_ON;CONFIG_GENERIC_BUG, HAVE_ARCH_BUG
- 【Bug解决】MACRO ./top_run_msim_rtl_verilog.do PAUSED at line 45
- 【Bug解决】com.mysql.jdbc.exceptions.jdbc4.CommunicationsException: Communications link failure
- Ubuntu安装ffmpeg音视频处理工具:联合解决cuda11+opencv4.6编译bug的问题(cap_ffmpeg_impl/opencv_videoioopencv_cuda*)