angular框架下, 解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)--- 页面设置100%以后,不同终端的显示问题
在使用angular7.x开发公众号的时候遇到几个问题,特此记录下
一、页面底部留白问题
现象: 部分有表单的页面,在表单输入内容以后,键盘收缩之后,下方有一定的空白,下方有按钮的时候,按钮位置错位,无法点击提交,必须手动滑动是的页面留白消失后方可提交
原因:其实就是设置页面高度为100%后,iOS下显示的兼容问题。
解决办法:
1. 在meta viewport标签里加属性:viewport-fit=cover;如下
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no, viewport-fit=cover" />
2.使用js代码解决-- angular7.x
在表单中添加失去焦点事件代码如下:
<input type="text" (blur)="fixScroll()" placeholder="请输入xxx"/>
ts代码如下:
fixScroll():void { //由于Android中不存在,所以获取终端类型判断下let u = navigator.userAgent;let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端if (isiOS) {window.scrollTo(0, 0);}
}
二、在支付成功后的跳转页面,页面的组件不渲染
现象: 在支付页面点击按钮,微信支付,成功后在回调函数中跳转支付结果页面,比如 支付成功页面,但是在成功页面的下方能看见支付页面的按钮等信息,
原因:算是个微信的坑吧,如图,跳转到下一级页面中不调用ngOnInIt()钩子函数,导致页面组件不渲染,
解决办法:
让组件重新渲染一次,代码如下:
constructor(private zone:NgZone) {
this.zone.run(() => {
console.log('do something.......');
});
}
三、列表页面视图在ios下不更新问题
现象:在二级页面是列表页面,在一级页面提交数据后,在二级页面中看不到刚提交的数据,默认显示提交之前的第一条数据
原因:在ios下,angular组件的视图不更新所致,
解决办法:
使用angular中的路由监听机制,监听路由变化后,更新数据,驱动视图变化,代码如下:
constructor ( private http: HttpCustormClient,private router: Router, ) {this.navigationSubscription = this.router.events.subscribe((event: any) => {if (event instanceof NavigationEnd) {this.getWithDrawHistory();//服务端获取的数据}});
}
由于使用了发布订阅,所以组件销毁时,取消订阅,
ngOnDestroy() {if (this.navigationSubscription) {this.navigationSubscription.unsubscribe();}
}
这是在使用angular框架开发公众号时遇到的几个比较奇葩的问题,特此记录下,关注下方公众号,分享更多
想要整理更多的碎片知识,扫码关注下面的公众号,让我们在哪里接着唠!
angular框架下, 解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)--- 页面设置100%以后,不同终端的显示问题相关推荐
- 解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)
解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端) 参考文章: (1)解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端) (2)https://www.cnblogs.com/zouw ...
- ios12微信H5输入框软键盘关闭后,页面无法回到正常位置
IOS12在开发微信公众号时遇到input输入框,失去焦点,键盘收回后,input框的位置改变的情况,需要监听失焦事件,并重新设定高度来解决这个问题: $("input").blu ...
- h5 ios中软键盘弹起后 fixed定位失效
position: fixed;在ios手机中会存在一个失效情况: 如果页面有输入框存在,点击输入框软键盘弹起后会发生一个现象: 1.针对当前内容高度小于屏幕高度时: 上下滑动页面时候,发现之前fix ...
- 微信小程序键盘弹起后页面上推问题
微信小程序键盘弹起后页面上推问题 小程序的 input 组件聚焦后弹起键盘,自动通过页面上移的方式将输入框所在位置定位到键盘上方. 如果输入框本身就位于页面顶端,则不会造成上推. 但是,如果输入框是位 ...
- 微信浏览器H5页面软键盘关闭导致页面空缺的问题
微信6.7.4 H5页面里的select,input软键盘弹起的时候页面会上移,软键盘关闭页面不会下移.导致页面空缺了一部分. 微信6.7.3及其它版本不会有这个问题!页面会随着软键盘关闭而下移恢复正 ...
- Explain:解决MUI 软键盘弹起挤压页面问题
问题:在使用mui和H5+进行移动端开发的时候,经常会遇见需要用户输入的情况 当input获取焦点弹起软键盘的时候,经常会遇见软键盘挤压页面.软键盘遮挡输入框等一系列问题: 原因:造成这种现象的原因是 ...
- 手机软键盘弹起导致页面变形的一种解决方案
最近用 uniapp(一种第三方 app 开发框架) 开发 app,其中一个页面有十几个 input 输入框,在点击 input 输入时,软键盘弹起,导致页面往上顶,底部的按钮也全部弹到页面上面去了, ...
- IOS微信6.7.4输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置...
近期在开发微信H5页面时碰到这个问题,如图,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦,软键盘收起后,页面未恢复,这也是ios的微信版本更新6.7.4之后才遇到的bug. 目前 ...
- IOS微信6.7.4输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置
IOS微信6.7.4输入框失去焦点,软键盘关闭后,被撑起的页面无法回退到原来正常的位置 近期在开发微信H5页面时碰到这个问题,如图,软键盘弹起后,若原输入框被遮挡,页面整体将会上移,然而当输入框失焦, ...
最新文章
- 架构漫谈(1):什么是架构
- Codeforces 437C The Child and Toy(贪心)
- Qt:QSound无法播放.wav声音的解决办法
- m1 MBA配置Homebrew环境+国内源配置
- QString 的使用技巧
- 淘品牌”已去,“播品牌”正红
- Quartz.Net定时任务简单实用(实例)
- stdlib.h函数请单
- 最新sql 2008安装说明 以及 重设sql server 2008 R2的登录密码
- 【播放器】git上著名播放器
- python3 rf 无法保存案例_RF接口自动化-上传文件并解决中文文件上传失败问题
- HeadFirstJava 4,5,6
- 海店湾:劲爆!这款APP的横空出世,是美女们的福利还是潮流?
- Java常用的设计模式是什么?
- 「深度小课堂」如何开发一款属于自己的时尚屏保应用?
- 虚幻引擎4学习途径汇总
- pg_auto_failover 之四 manual failover
- 基于Android点菜系统的设计与实现,基于Android的手机点菜系统的设计与实现论文.doc...
- Windows 2016 server NVIDIA cuda toolkit11.3 pytorch-gpu 踩坑教程
- [深度学习之CNN]CNN卷积神经网络LeNet-5