フレームワーク7のネストされたタブ。

Question

アプリケーション用にframework7を使用していますが、ネストされたタブは意図したとおりに動作していますが、ネストされたスワイプタブを使用しようとすると問題が発生します。 次のように私のHTML /パグは次のとおりです。

 f7-block 
     f7-button.tab-link.active(href="#tab-1") GO 1 
     f7-button.tab-link(href="#tab-2") GO 2 
     f7-button.tab-link(href="#tab-3") GO 3 
     .tabs 
      #tab-1.tab.active 
       f7-block 
        div TAB 1 
         f7-button.tab-link.active(href="#tab-1-1") GO 1 1 
         f7-button.tab-link(href="#tab-1-2") GO 1 2 
         f7-button.tab-link(href="#tab-1-3") GO 1 3 
         .tabs-swipeable-wrap 
          .tabs 
           #tab-1-1.tab.active TAB 1 1 
           #tab-1-2.tab TAB 1 2 
           #tab-1-3.tab TAB 1 3 

      #tab-2.tab 
       f7-block 
        div TAB 2 
         f7-button.tab-link.active(href="#tab-2-1") GO 2 1 
         f7-button.tab-link(href="#tab-2-2") GO 2 2 
         f7-button.tab-link(href="#tab-2-3") GO 2 3 
         .tabs-swipeable-wrap 
          .tabs 
           #tab-2-1.tab.active TAB 2 1 
           #tab-2-2.tab TAB 2 2 
           #tab-2-3.tab TAB 2 3 

二.tabs-スワイプが正常に動作しないと、私はこの問題を回避する方法を見つけることができない、任意のヘルプは大apprecitedされるだろう。

Answer 1

最初のtabsクラスのために動作しません。

フレームワーク7のドキュメントによると、スワイプ可能なラッパークラスtabs-swipeable-wrapにはタブが含まれています。

タブ構造

は、HTMLはそのように見えることでしょう見るためthis exampleを参照してください。

<!-- Navigation bar with buttons for tabs --> 
 
<div class="tabs-swipeable-wrap"> <!-- global container --> 
 
     <!-- tabs wrapper --> 
 
     <div class="tabs"> 
 
     <!-- First tab --> 
 
     <div id="tab1" class="page-content tab active"> 
 
     <!-- tab content --> 
 
     </div> 
 
     <!-- Second tab --> 
 
     <div id="tab2" class="page-content tab"> 
 
      <!-- Tab content --> 
 
     </div> 
 
     </div> 
 
</div>