О ямах, встречающихся в мобильной разработке

JavaScript

Оригинал: http://jungahuang.com/2017/07/30/something-about-web-app/

После смены работы в середине марта я долго не вел блог.После перехода в определенную компанию я вернулся на работу с большим количеством горячей воды в руках.Прошла всего одна неделя от собеседования,отставки до Вход. Эта эффективность больше недоступна.После того, как я присоединился к работе, я дал небольшой проект по разработке простого личного блога с семейным ведром Vue. Поскольку я изучил это раньше сам, я быстро приступил к работе.Первоначально на выполнение всех функций ушло две недели и три дня, поэтому через неделю я начал доводить это до проектной группы для фактической разработки, и, наконец, я был Перейдите к группе по подбору персонала, чтобы взять на себя ответственность за предварительную разработку набора в школу. Как только я пошел делать дела, я организовал для меня разработку фонового мобильного терминала, чтобы облегчить использование мобильного телефона руководителя.Исходя из внутренних проектов, использовался Vue.Наконец, я решил использовать Vue + a Vue на основе UI-фреймворка Vux для разработки мобильных терминалов, поэтому я вошел в него. После перехода на мобильный терминал у меня было меньше контактов с разработкой мобильных терминалов. Разработка проекта основана на UI-фреймворке Vue Vux, который на самом деле представляет собой набор мобильных UI-фреймворков, основанных на We-UI, но в соответствии с реальной ситуацией некоторые макеты все еще должны быть рефакторингом сами по себе. Так что я с радостью ступил на яму разработки мобильных терминалов.

Проблема проникновения качения

Проникновение при прокрутке означает, что при наличии фиксированного фона маски и всплывающего слоя на мобильной стороне смахивание по экрану может перемещать содержимое под фон. Решения разобрали в интернете, но у некоторых все же есть определенные проблемы:

Сделать переполнение скрытым

    

  1. .modal-open {
    2. 

  2.     &, body {
    3. 

  3.         overflow: hidden;
    4. 

  4.         height: 100%
    5. 

  5.     }
    6. 

  6. }
    7. 

скопировать код

То есть, когда выскочит всплывающий слой, добавьте в html .modal-open, и отключите полосы прокрутки html и body, но на практике вы обнаружите:

  1. Поскольку полосы прокрутки как html, так и тела отключены, позиция прокрутки страницы будет потеряна после всплывающего слоя.Необходимо использовать js для расчета исходной позиции прокрутки и сохранения позиции прокрутки, когда она всплывает;

  2. Чашка (>﹏

js touchmove + предотвращение по умолчанию

    

  1. modal.addEventListener('touchmove', function(e) {
    2. 

  2.   e.preventDefault();
    3. 

  3. }, false);
    4. 

скопировать код

То есть, заблокировав событие touchmove на мобильном терминале, но при фактическом использовании вы обнаружите, что всплывающий слой также будет заблокирован, когда ему нужно прокрутить (>﹏

Окончательное решение: позиция: исправлена

    

  1. body.modal-open {
    2. 

  2.     position: fixed;
    3. 

  3.     width: 100%;
    4. 

  4. }
    5. 

скопировать код

Таким образом, когда всплывающий слой всплывает, полоса прокрутки будет потеряна, поэтому вам нужно использовать js для сохранения положения полосы прокрутки и восстановления положения прокрутки при закрытии всплывающего слоя;

    

  1. var ModalHelper = (function(bodyCls) {
    2. 

  2.   var scrollTop; // 在闭包中定义一个用来保存滚动位置的变量
    3. 

  3.   return {
    4. 

  4.     afterOpen: function() { //弹出之后记录保存滚动位置，并且给body添加.modal-open
    5. 

  5.       scrollTop = document.scrollingElement.scrollTop;
    6. 

  6.       document.body.classList.add(bodyCls);
    7. 

  7.       document.body.style.top = -scrollTop + 'px';
    8. 

  8.     },
    9. 

  9.     beforeClose: function() { //关闭时将.modal-open移除并还原之前保存滚动位置
    10. 

  10.       document.body.classList.remove(bodyCls);
    11. 

  11.       document.scrollingElement.scrollTop = scrollTop;
    12. 

  12.     }
    13. 

  13.   };
    14. 

  14. })('modal-open');
    15. 

скопировать код

Я лично протестировал его и отлично решил проблему мобильной прокрутки 😊

Поле мобильного ввода заблокировано клавиатурой

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

    

  1. if(/Android/.test(navigator.appVersion)) {
    2. 

  2.    window.addEventListener("resize", function() {
    3. 

  3.      if(document.activeElement.tagName=="INPUT" || document.activeElement.tagName=="TEXTAREA") {
    4. 

  4.        document.activeElement.scrollIntoView();
    5. 

  5.      }
    6. 

  6.   })
    7. 

  7. }
    8. 

скопировать код

То есть на машине Android, отслеживая изменение размера окна, оценивается, является ли текущий элемент, находящийся в фокусе, полем ввода, а затем вызывается scrollIntoView() элемента, то есть элемент отображается в видимом поле. область текущего окна. Поскольку всеми браузерами поддерживается только scrollIntoView, этот метод используется чаще всего. После использования этого кода он эффективен при тестировании в WeChat или других браузерах, но, поскольку его необходимо встроить в собственное приложение, использование этого кода не решило проблему блокировки поля ввода.Наконец, тест показал, что Встроенный браузер APP Когда клавиатура появляется в сфокусированном поле ввода, клавиатура вообще не запускает событие изменения размера окна, и мое сердце бешено колотится (>﹏＜)~~~ Позже я узнал от веб-интерфейс чата Ali и обнаружил, что его можно получить, получив поле ввода.Фокус позиционирует поле ввода в положение немного выше, чем поле ввода, и возвращается вниз, когда клавиатура отскакивает назад после потери фокуса .Поэтому этот метод временно решает проблему, что поле ввода блокируется в приложении на Android.Этот метод явно не идеален.Например,так как событие изменения размера не может быть отслежено,и высота используемой клавиатуры не фиксирована, настройка высоты может быть только приблизительно сохранена в верхней половине экрана. Убедитесь, что поле ввода отображается на клавиатуре в большинстве случаев.

Прокрутка IOS не плавная

На мобильном терминале, особенно в iOS, при прокрутке экрана вы обнаружите, что прокрутка останавливается, как только палец убирается.Этот тип эффекта взаимодействия с пользователем очень плохой, и он дает пользователю ощущение зависания прокрутки. Свойство -webkit-overflow-scrolling в CSS3 может прекрасно решить эту проблему, контролируя, использует ли элемент эффект отскока прокрутки на мобильных устройствах:

1.auto

При обычной прокрутке прокрутка останавливается, как только ваш палец убирается с сенсорного экрана.

2.touch

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

END

Категории