tabs 仅包含 tab-content

tabs内部可以仅包含tab-bar或者tab-content

假设开发者有如下需求：开发一个简化的社交主页，其中，用户图标和搜索图标为跳转按钮，点击跳转页面；聊天、发现、通讯录为页签，与内容页联动，效果如下：

img

由于tabs仅支持子组件tab-bar与tab-content，且tab-bar与tab-content的直接子元素都被当做页签或内容页。因此，仅使用tabs无法实现两个图标按钮

所以开发者可以这样实现：

  • tabs中，仅使用tab-content，包含选项卡的所有内容页
  • tabs外，使用div包含选项卡页签标题及图标按钮，模拟tab-bar
  • 在 js 代码中，动态绑定tabs的index属性，监听tabs的change事件，实现页签与内容页的联动示例代码如下：
  1. <template>
  2.   <div class="tutorial-page">
  3.     <!-- 灵活使用tabs组件 -->
  4.     <div class="flexible-tabs">
  5.       <!-- 自定义tab-bar组件 -->
  6.       <div class="flexible-tabbar">
  7.         <image src="./img/user.png" onclick="routePage('personal')"></image>
  8.         <text class="{{currentIndex === 0 ? 'active' : ''}}" onclick="clickTabBar(0)">聊天</text>
  9.         <text class="{{currentIndex === 1 ?  'active' : ''}}" onclick="clickTabBar(1)">发现</text>
  10.         <text class="{{currentIndex === 2 ? 'active' : ''}}" onclick="clickTabBar(2)">通讯录</text>
  11.         <image src="./img/search.png" onclick="routePage('search')"></image>
  12.       </div>
  13.       <!-- 监听change事件，触发时动态修改tabs的index属性 -->
  14.       <tabs onchange="changeTabactive" index="{{currentIndex}}">
  15.         <tab-content class="flexible-tab-content">
  16.           <div class="tab-content-section">
  17.             <text>聊天</text>
  18.           </div>
  19.           <div class="tab-content-section">
  20.             <text>发现</text>
  21.           </div>
  22.           <div class="tab-content-section">
  23.             <text>通讯录</text>
  24.           </div>
  25.         </tab-content>
  26.       </tabs>
  27.     </div>
  28.   </div>
  29. </template>
  31. <style lang="less">
  32.   .tutorial-page {
  33.     flex: 1;
  34.     .flexible-tabs {
  35.       flex: 1;
  36.       flex-direction: column;
  37.       .flexible-tabbar {
  38.         height: 100px;
  39.         padding: 0 30px;
  40.         background-color: #f1f1f1;
  41.         align-items: center;
  42.         text {
  43.           flex-grow: 1;
  44.           height: 100px;
  45.           margin: 0 30px;
  46.           text-align: center;
  47.           border: 0px solid #f1f1f1;
  48.           border-bottom-width: 5px;
  49.         }
  50.         image {
  51.           height: 50px;
  52.           width: 50px;
  53.           resize-mode: contain;
  54.         }
  55.         .active {
  56.           color: #0faeff;
  57.           border-bottom-color: #0faeff;
  58.         }
  59.       }
  60.       .flexible-tab-content {
  61.         flex: 1;
  62.         .tab-content-section {
  63.           flex: 1;
  64.           background-color: #ffffff;
  65.           justify-content: center;
  66.         }
  67.       }
  68.     }
  69.   }
  70. </style>
  72. <script>
  73.   import router from '@system.router'
  75.   export default {
  76.     private: {
  77.       currentIndex: 0
  78.     },
  79.     onInit () {
  80.       this.$page.setTitleBar({ text: 'tabs仅包含tab-content' })
  81.     },
  82.     changeTabactive (evt) {
  83.       this.currentIndex = evt.index
  84.     },
  85.     clickTabBar (index) {
  86.       this.currentIndex = index
  87.     },
  88.     routePage (param) {
  89.       router.push({
  90.         uri: 'ComponentTabs/complex/' + param
  91.       })
  92.     }
  93.   }
  94. </script>