Блог

У меня есть приложение, написанное на Ionic v1, Cordova и An&ularJS 1.5.3.

Проблема, с которой я сталкиваюсь, вообще не возникает на устройствах Android.

Протестировано на iPhone SE, iPhone 8, iPhone X и iPhone XR.

 For iOS 13.6 the problem occurs on: iPhone SE, iPhone 8, iPhone X, and iPhone XR.
iPhone X, and iPhone XR ( completely pushes the buttons out of view )

For iOS 12 the problem occurs on:

iPhone XR - somewhat occurs
iPhone 8 - does not occur
iPhone SE - does not occur
iPhone X - somewhat occurs

For iOS 11:
it does not occur on iPhone 8. There are no problems.
iPhone SE - no problems
It somewhat occurs on the iPhone X.
iPhone XR does not run iOS 11.
  

По мере увеличения версии iOS это, похоже, оказывает большее влияние.

Что делает мой код:

Моя страница предназначена для того, чтобы пользователь мог указать отсутствие, и у него есть возможность добавлять вложения фотографий. Вложение просто будет добавлено в качестве элемента ion в моем списке ion.

У меня есть ionic view и нижний колонтитул с кнопкой в нем. Когда я добавляю элемент ionic в свой список ionic, кажется, что кнопка нижнего колонтитула выходит за пределы «безопасной области» и делает это постоянно.

Даже если я перейду на другую страницу и вернусь снова, проблема не исчезнет. Похоже, это также постоянно влияет на «безопасную область» на разных страницах моего приложения.

Проблема: по мере роста списка вложений кнопка нижнего колонтитула перемещается из безопасной области вниз

Как я могу сохранить кнопку в нижнем колонтитуле на месте в последних версиях iOS?

Фрагмент кода:

 <ion-view left-buttons="leftButtons" cache-view="false" ri&ht-buttons="ri&htButtons"&&t;

    <ion-nav-buttons side="ri&ht"&&t;
        <button menu-to&&le="ri&ht" class="button button-icon icon ion-home" ui-sref="main.home"
            automation-id="RIGHT_NAV_HOME_BUTTON"&&t;
        </button&&t;
    </ion-nav-buttons&&t;

    <ion-content class="has-header has-footer b&-stable" paddin&="false"&&t;

        <ion-list can-swipe="true"&&t;

            <div class="item title-bar"&&t;
                <h2 class="dark" n&-i18next="BOOK_ABSENCE"&&t;</h2&&t;
            </div&&t;

            <div class="item item-icon-left" n&-click="setDate('startDate')"&&t;
                <i class="icon ion-ios-calendar-outline"&&t;</i&&t;
                <span n&-i18next="START_DATE"&&t;</span&&t;
                <span class="item-note"&&t;{{ data.startDate | dateFormat }}</span&&t;
            </div&&t;

            <div class="item item-icon-left" n&-click="setDate('endDate')"&&t;
                <i class="icon ion-ios-calendar"&&t;</i&&t;
                <span n&-i18next="END_DATE"&&t;</span&&t;
                <span class="item-note"&&t;{{ data.endDate | dateFormat }}</span&&t;
                <i class="icon ion-ios-arrow-ri&ht"&&t;</i&&t;
            </div&&t;

            <div class="item item-divider"&&t;</div&&t;

            <label class="item item-input"&&t;
                <textarea placeholder="Comments" n&-model="data.comments" rows="4"&&t;</textarea&&t;
            </label&&t;

            <div class="item item-divider"&&t;</div&&t;

            <ion-item class="flex-container-center" n&-repeat="attachment in attachments"&&t;
                <div class="flex-item-1"&&t;
                    <im& n&-src="data:{{ attachment.mediaTypeField }};base64,{{ attachment.ima&eDataField }}"&&t;
                </div&&t;
                <div class="flex-item-bi&"&&t;
                    <div&&t;{{ attachment.filename }}</div&&t;
                </div&&t;
            </ion-item&&t;

        </ion-list&&t;

    </ion-content&&t;

    <div class="bar bar-footer no-paddin& b&-bottom"&&t;
        <div class="button-bar"&&t;
            <button class="button button-positive" n&-click="book()"&&t;
                <span n&-i18next="SAVE"&&t;</span&&t;
            </button&&t;
        </div&&t;
    </div&&t;

</ion-view&&t;
  

Окружающая среда:

 ionic info

Ionic:

   ionic (Ionic CLI) : 4.10.3 (C:UsersUsernode_modulesionic)
   Ionic Framework   : ionic1 1.3.5
   @ionic/v1-toolkit : 1.0.22

Cordova:

   cordova (Cordova CLI) : 8.1.2 (cordova-lib@8.1.1)
   Cordova Platforms     : android 8.1.0, ios 6.1.0, browser 5.0.4, windows 4.4.3
   Cordova Plu&ins       : cordova-plu&in-ionic-webview 4.1.3, (and 17 other plu&ins)

System:

   Android SDK Tools : 26.1.1 (C:UsersUserDocumentsAndroidsdk)
   NodeJS            : v10.21.0 (C:Pro&ram Filesnodejsnode.exe)
   npm               : 6.14.4
   OS                : Windows 10
  

В прошлом, когда вышел новый iPhone X, я добавил некоторый код для внесения изменений в «безопасную область».

css

 body {
    paddin&: constant(safe-area-inset-top) constant(safe-area-inset-ri&ht) constant(safe-area-inset-bottom) constant(safe-area-inset-left); //iOS 11.2
    paddin&: env(safe-area-inset-top) env(safe-area-inset-ri&ht) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
  

HTML

 <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"&&t;
  

Поскольку я использую cordova-ios 6.1.0, я использую только WKWebView.

 <platform name="ios"&&t;
    <preference name="WKWebViewOnly" value="true" /&&t;
  

Оказывается, env() вычисления надежны только при первой загрузке приложения. Когда мы открываем виджет камеры, технически мы выходим из приложения, а когда возвращаемся, env() выполняется повторная оценка, и оно выдает значение, которое нам не нужно.

Чтобы решить эту проблему, я установил нулевое значение верхнего отступа.

 body {
    paddin&: 0 constant(safe-area-inset-ri&ht) constant(safe-area-inset-bottom) constant(safe-area-inset-left); //iOS 11.2
    paddin&: 0 env(safe-area-inset-ri&ht) env(safe-area-inset-bottom) env(safe-area-inset-left);
}
  

У нас уже есть обложка области просмотра в HTML, поэтому мы хороши, когда дело доходит до безопасной области.