首页 文章

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

提问于
浏览 次
0

我在我当前的网站上有一个众所周知的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更改标签？提前致谢 .

javascript html iphone meteor bootstrap-4

1 回答

  • 0

    您可以通过聆听“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

    回复于

相关问题