angular框架下，解决微信H5页面软键盘弹起后页面下方留白的问题（iOS端）--- 页面设置100%以后，不同终端的显示问题

朴灿烈づ我的快乐病毒、 2023-07-13 03:39 7阅读 0赞

在使用angular7.x开发公众号的时候遇到几个问题，特此记录下

一、页面底部留白问题

现象： 部分有表单的页面，在表单输入内容以后，键盘收缩之后，下方有一定的空白，下方有按钮的时候，按钮位置错位，无法点击提交，必须手动滑动是的页面留白消失后方可提交

原因：其实就是设置页面高度为100%后，iOS下显示的兼容问题。

解决办法：

1. 在meta viewport标签里加属性：viewport-fit=cover；如下

2.使用js代码解决-- angular7.x

在表单中添加失去焦点事件代码如下：

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()钩子函数，导致页面组件不渲染，

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70][]

解决办法：

让组件重新渲染一次，代码如下：

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框架开发公众号时遇到的几个比较奇葩的问题，特此记录下，关注下方公众号，分享更多

--------------------

![20191229112121499.png][]

想要整理更多的碎片知识，扫码关注下面的公众号，让我们在哪里接着唠！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70 1][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200310094404303.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0,size_16,color_FFFFFF,t_70
[20191229112121499.png]: https://img-blog.csdnimg.cn/20191229112121499.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191229112346758.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3h1ZWh1ODM3NzY5NDc0,size_16,color_FFFFFF,t_70