Bootstrap 选项卡需要点击两次才能在 iPhone 上用流星进行更改

Question

我当前的网站有 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 的客户只需单击一下即可更改标签页？提前致谢。

Answer 1

您可以让 Blaze 通过侦听 "click, touchstart" (=tap) 事件来解决您的问题（我不确定 cordova 是否会自动将点击转换为点击，但我想您会明白这一点）并强制执行基于反应变量重绘：

首先重写您的 ul 以不使用任何基于 bootstrap 的事件，但 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')
})

为了节省代码行（=减少可能的错误），您可以为通用 class 选择器 .week-tab-link 创建事件映射，如果单击任何选项卡，它会触发事件回调.在此回调中，您可以 "read" 选项卡中的 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 来实现。

Bootstrap 选项卡需要点击两次才能在 iPhone 上用流星进行更改

Bootstrap tab need two clicks to change on iPhone with meteor

html

javascript

iphone

meteor

bootstrap-4