使用 tabs 组件

tabs中封装了常见功能和效果：页签支持横向滚动，支持手势滑动切换内容页等

tabs内部仅支持子组件tab-bar和tab-content，也可以只包含一个子组件，使用说明如下：

  • tab-bar组件用来包含所有页签的标题，属性mode用来配置是否可滚动，详情请参考文档：组件 -> 容器组件 -> tab-bar
  • tab-content组件用来包含所有页签的内容，详情请参考文档：组件 -> 容器组件 -> tab-content
  • tab-bar组件的第 n 个直接子节点对应tab-content中第 n 个直接子节点，具有联动效果示例代码如下：
  1. <template>
  2.   <div class="tutorial-page">
  3.     <!-- tabs组件 -->
  4.     <tabs>
  5.       <tab-bar class="tab-bar">
  6.         <text>menu1</text>
  7.         <text>menu2</text>
  8.         <text>menu3</text>
  9.       </tab-bar>
  10.       <tab-content class="tab-content">
  11.         <div class="tab-content-section">
  12.           <text>content1</text>
  13.         </div>
  14.         <div class="tab-content-section">
  15.           <text>content2</text>
  16.         </div>
  17.         <div class="tab-content-section">
  18.           <text>content3</text>
  19.         </div>
  20.       </tab-content>
  21.     </tabs>
  22.   </div>
  23. </template>

注意：

  • tabs内不能再嵌套tabs，如有此类需求，请参考教程第一部分div组件模拟选项卡