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

我在我当前的网站上有一个众所周知的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)

2 years ago

您可以通过聆听“click,touchstart”(= tap)事件让Blaze解决您的问题(我不确定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 创建一个事件映射,如果单击任何选项卡,它将触发事件回调 . 在此回调中,您可以从选项卡中"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 实现此功能 .

有关:

Touch events in Meteor