Ionic Modal не распознает элемент как «в поле зрения», пока не прокрутите на iOS - PullRequest
Новая
       45

Ionic Modal не распознает элемент как «в поле зрения», пока не прокрутите на iOS

0 голосов
/ 27 сентября 2018

У меня есть многократно используемый компонент формы согласия, который выскакивает в ионном режиме из разных частей приложения, которые заполняют его различным текстом в зависимости от конкретного согласия или соглашения, которое клиент принимает / отклоняет (условия обслуживания / пользовательское соглашение /материал соответствия / и т. д.).

В конце текста / подтекста у меня есть 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 или в Интернете, и кнопка не отображается как включенная, пока пользователь не прокручивает текст.

Проблема в том, что на iOS пользователь вынужден прокручивать (даже всего несколько пикселей), чтобы кнопка активировалась, даже если весь текст (а также div прокрутки) уже виден.Я, очевидно, хочу, чтобы кнопка отображалась как активная, если весь текст уже содержится в окне.

Я знаю, что это очень мелко, но я просто пытаюсь получить лучший пользовательский опыт.Кто-нибудь еще сталкивался с этой проблемой или знает обходной путь / решение?

1 Ответ

0 голосов
/ 27 сентября 2018

Я знаю, что, вероятно, глупо отвечать на свой вопрос, но, возможно, это может помочь кому-то ещеЯ обнаружил, что должна быть задержка с устройствами на iOS в правильном расчете значений getBoundingClientRect (), поэтому, если я поставлю проверку внутри ionViewDidEnter () вместо ionViewDidLoad (), то это будет достаточно для задержки, чтобы у меня были правильные начальные значения при проверкеесли кнопка должна быть включена / отключена.

...