时间戳

首页 > 解决方案 > 在 iOS 上滚动之前，Ionic Modal 不会将元素识别为“在视图中”

ionic-framework - 在 iOS 上滚动之前，Ionic Modal 不会将元素识别为“在视图中”

问题描述

我有一个可重用的同意表单组件，它从应用程序的各个部分以离子模式弹出，根据客户接受/拒绝的特定同意或协议（服务条款/用户协议/合规性内容/ ETC。）。

在文本/潜文本的末尾，我有一个 div 作为滚动检查点：

<div #scrollCheckpoint id="scrollCheck"></div>

接受协议/同意的按钮具有 [disabled]="!canAccept" 属性绑定，以确保用户已阅读协议中包含的文本。

在我的 .ts 文件中，我查看了元素：

@ViewChild('scrollCheckpoint') scrollCheckpoint: ElementRef;

并有两种方法来设置/取消设置 canAccept 变量：

private onScrolled() {
    if (!this.canAccept){
        this.canAccept = this.isElementInViewport(this.scrollCheckpoint.nativeElement);
        this.cd.detectChanges();
    }       
}

和

private isElementInViewport(el: HTMLElement) {
    var bounding = el.getBoundingClientRect();
    return (
        bounding.top >= 0 &&
        bounding.left >= 0 &&
        bounding.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
        bounding.right <= (window.innerWidth || document.documentElement.clientWidth)
    );
};

我还应该提到我有一个 ionViewDidLoad 方法，它在加载时进行初始检查，甚至：

ionViewDidLoad(){
    this.canAccept = this.isElementInViewport(this.scrollCheckpoint.nativeElement);
}

这在 Android 或 Web 上完美运行，并且在用户滚动浏览文本之前，该按钮不会显示为已启用。

问题是在 iOS 上，即使所有文本（以及滚动 div）已经在视图中，用户也被迫滚动（即使只是几个像素）以激活按钮。如果文本已全部包含在窗口中，我显然希望它显示按钮为活动状态。

我知道这是非常琐碎的，但只是想在这里获得最佳的用户体验。有没有其他人遇到过这个问题或知道解决方法/解决方案？

标签： ionic-frameworkscrollionic3modalviewcontrollergetboundingclientrect

解决方案

我知道回答你自己的问题可能很蹩脚，但也许这可能对其他人有所帮助。我发现 iOS 设备在正确计算 getBoundingClientRect() 值时必须存在延迟，所以如果我将检查放在 ionViewDidEnter() 而不是 ionViewDidLoad() 内，它就足以解决延迟问题，因此我在检查时有正确的初始值如果按钮应该启用/禁用。

推荐阅读