100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > angular框架下 解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)--- 页面

angular框架下 解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)--- 页面

时间:2024-07-09 00:55:08

相关推荐

angular框架下  解决微信H5页面软键盘弹起后页面下方留白的问题(iOS端)--- 页面

在使用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%以后 不同终端的显示问题

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。