框架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类。

根据framework7文档，swipeable包装类tabs-swipeable-wrap包括您的选项卡。

参考this example看到制表结构

HTML将看起来像：

<!-- 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>