Вкладка Bootstrap требует двух кликов, чтобы изменить на iPhone с метеором - PullRequest
Новая
       5

Вкладка Bootstrap требует двух кликов, чтобы изменить на iPhone с метеором

0 голосов
/ 10 декабря 2018

У меня есть хорошо известная проблема пользователей iPhone с моим текущим сайтом.У меня есть две вкладки, позволяющие пользователям переключаться между двумя неделями: 

<ul class="nav nav-tabs justify-content-center" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#currentWeekTab" role="tab" aria-controls="home" aria-selected="true" >
      {{{weekInterval 1}}}
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#nextWeekTab" role="tab" aria-controls="profile" aria-selected="false" >
      {{{weekInterval 0}}}
    </a>
  </li>
</ul>

Моя проблема заключается в том, что пользователям моего iPhone нужно дважды щелкнуть, чтобы фактически изменить вкладку.Я прочитал, что проблема возникла из hover, но ни один ответ не устранил мою проблему.

Как я могу позволить своим клиентам, использующим iPhone, менять вкладку одним щелчком мыши?Заранее спасибо.

1 Ответ

0 голосов
/ 10 декабря 2018

Вы можете позволить Blaze решить вашу проблему, прослушав событие «click, touchstart» (= tap) (я не уверен, что Cordova автоматически преобразует щелчок, чтобы нажать, но я думаю, что вы получите точку) и принудительно перерисовать на основедля реактивной переменной:

Сначала переписайте ваш ul, чтобы не использовать какие-либо события, основанные на начальной загрузке, кроме помощников Blaze: 

<ul class="nav nav-tabs justify-content-center" id="myTab">
    <li class="nav-item">
        <a class="nav-link week-tab-link {{#if active 'currentWeek'}}active{{/if}}"
           id="home-tab"
           data-state="currentWeek"
           href="#currentWeekTab"
           aria-controls="home" aria-selected="{{active 'currentWeek'}}">
            1
        </a>
    </li>
    <li class="nav-item">
        <a class="nav-link week-tab-link {{#if active 'nextWeek'}}active{{/if}}"
           id="profile-tab"
           data-state="nextWeek"
           href="#nextWeekTab"
           aria-controls="profile" aria-selected="{{active 'nextWeek'}}">
            2
        </a>
    </li>
</ul>

{{#if active 'currentWeek'}}
    <p>render current week</p>
{{/if}}

{{#if active 'nextWeek'}}
    <p>render next week</p>
{{/if}}

Как видите, шаблон полагается на определенное состояние для определения a) какая вкладка активна и b) какое содержимое отображать.

Для разрешения этого состояния active требуется помощник: 

Template.myTemplate.helpers({
  active (tabName) {
    return Template.instance().state.get('active') === tabName
  }
})

Также необходимо установить состояние по умолчанию, чтобы определить, что следует отображать при загрузке страницы: 

Template.myTemplate.onCreated(function helloOnCreated () {
  const instance = this
  instance.state = new ReactiveDict(0)
  instance.state.set('active', 'currentWeek')
})

Чтобы сохранить строки кода (= меньше возможных ошибок), вы можетесоздать карту событий для общего селектора класса .week-tab-link, который запускает обратный вызов события, если щелкнуть любую из вкладок.В этом обратном вызове вы можете «прочитать» атрибут data-state на вкладке, чтобы установить состояние active: 

Template.myTemplate.events({
  'click, touchstart .week-tab-link' (event, templateInstance) {
    // event.preventDefault() // uncomment this to prevent href update
    const $target = templateInstance.$(event.currentTarget)
    const activeState = $target.data('state')
    templateInstance.state.set('active', activeState)
  }
})

Обратите внимание, что здесь используется ReactiveDict, но вы также можете реализовать это с помощьюReactiveVar.

Похожие:

События касания в Метеоре

...