框架7中的嵌套選項卡。

我對應用程序使用framework7，雖然嵌套選項卡按預期工作，但在嘗試使用嵌套可滑動選項卡時遇到了問題。我的HTML /哈巴狗如下：框架7中的嵌套選項卡。

 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。

來源

2017-08-28 Beaut

它不起作用，因爲第一個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>

來源

2017-08-29 07:42:09 Djiggy

框架7中的嵌套選項卡。

回答

相關問題