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

loading...


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更改标签?提前致谢 .

loading...

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

评论

暂时没有评论!