Question

我正在使用framework7作为应用程序，虽然嵌套选项卡正在按预期工作，但在尝试使用嵌套的可滑动选项卡时我遇到了问题。我的HTML / pug如下：

     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-swipeable无法正常工作，我无法找到解决此问题的方法，任何帮助都会非常感激。

Answer 1

由于第一个tabs类而无效。

根据framework7文档，可滑动包装类tabs-swipeable-wrap包含您的标签。

请参阅this example以查看标签结构

HTML看起来像这样：

＆＃13;

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

＆＃13;

框架7中的嵌套选项卡。

1 个答案: