Ionic3 加用Loading效果后苹果手机(iOS)经常没法滑动，强制浏览器渲染Dom文档 (备忘）

最新推荐文章于 2021-04-04 15:15:57 发布

chelen_jak

最新推荐文章于 2021-04-04 15:15:57 发布

阅读量329

点赞数

分类专栏： Angular2 Ionic3 实用文章标签： ios html html5

本文链接：https://blog.csdn.net/chelen_jak/article/details/107234771

版权

实用同时被 3 个专栏收录

738 篇文章 4 订阅

订阅专栏

Ionic3

175 篇文章 1 订阅

订阅专栏

Angular2

139 篇文章 0 订阅

订阅专栏

问题描述
当页面加上loadingCtrl动画效果等待异步返回后loadingCtrl已释放，但苹果手机（iOS)经常计算Content高度有误，导致明明超出一屏的内容无法上、下滑动，安卓和PC上均能正常滑动；

方案一：
参考：Javascript 强制浏览器渲染Dom文档
[html]

<ion-content #content>

[ts]

@ViewChild("content") content: Content;
    private _contentHeight = undefined;

     // Loading效果后苹果手机经常没法滑动，强制浏览器渲染Dom文档            
     if (this.appService.platForm == "ios" && this.pageIndex == 1) {
         setTimeout(() => {
             this._contentHeight = this.content.contentHeight;
         }, 500);
     }

方案二：
参考：【技巧】ionic3中content的resize知多少
[html]

<ion-content #content>

<ion-footer>
    <div style="min-height: 5px;" *ngIf="_contentHeight==undefined">-</div>
</ion-footer>

[ts]

import { ..., Content} from 'ionic-angular';

    @ViewChild("content") content: Content;
    private _contentHeight = undefined;

                // Loading效果后苹果手机经常没法滑动，强制浏览器渲染Dom文档            
                if (this.appService.platForm == "ios" && this.pageIndex == 1) {
                    this._contentHeight = undefined; 
                    setTimeout(() => {
                        this._contentHeight = this.content.contentHeight;
                    }, 500);
                }

方案三：（推荐）
参考：
1、Angular变化检测机制：改善的脏检查

2、angular 有关侦测组件变化的 ChangeDetectorRef 对象（简洁、清晰）

[html]
无须改动
[ts]

import { ..., ChangeDetectorRef } from '@angular/core';

    constructor(
        ... 
        public changeDetectorRef: ChangeDetectorRef,
    ) {
        ....
    }

        this.appService.callBo("MallOrderBO", "GetOrderList", params, showLoading).subscribe(res => {
            if (res.ErrCode == 0) {
                ... 
                // Loading效果后苹果手机经常没法滑动，强制浏览器渲染Dom文档            
                if (this.appService.platForm == "ios" && this.pageIndex == 1) {
                    this.changeDetectorRef.detach();
                    setTimeout(() => {
                        this.changeDetectorRef.reattach();
                    }, 500);
                }
            } else {
                this.utils.showError(res.ErrMsg);
            }
        });

注意：
setTimeout 的间隔设为500毫秒，试过300毫秒感觉太少