div 组件模拟选项卡

选项卡效果常见于传统 H5 开发中，开发者一般使用div和js代码控制布局交互得以实现

在框架中，开发者也可以使用div组件实现简单的效果，示例代码如下：

  1. <template>
  2.   <div class="tutorial-page">
  3.     <!-- div组件模拟选项卡功能 -->
  4.     <div class="div-tabs">
  5.       <!-- tabs的head部分 -->
  6.       <div class="div-tabbar">
  7.         <text onclick="showContent(1)">menu1</text>
  8.         <text onclick="showContent(2)">menu2</text>
  9.         <text onclick="showContent(3)">menu3</text>
  10.       </div>
  11.       <!-- tabs的body部分 -->
  12.       <div class="div-tabcontent">
  13.         <div class="div-tabcontent-section" show="{{type === 'content_1'}}">
  14.           <text>content1</text>
  15.         </div>
  16.         <div class="div-tabcontent-section" show="{{type === 'content_2'}}">
  17.           <text>content2</text>
  18.         </div>
  19.         <div class="div-tabcontent-section" show="{{type === 'content_3'}}">
  20.           <text>content3</text>
  21.         </div>
  22.       </div>
  23.     </div>
  24.   </div>
  25. </template>
  27. <style lang="less">
  28.   .tutorial-page {
  29.     flex: 1;
  30.     flex-direction: column;
  31.     .div-tabs {
  32.       flex: 1;
  33.       flex-direction: column;
  34.       .div-tabbar {
  35.         height: 100px;
  36.         text {
  37.           margin: 10px;
  38.           flex-grow: 1;
  39.           text-align: center;
  40.           border: 1px solid #eeeeee;
  41.         }
  42.       }
  43.       .div-tabcontent {
  44.         flex: 1;
  45.         background-color: #eeeeee;
  46.         .div-tabcontent-section {
  47.           flex: 1;
  48.           justify-content: center;
  49.           margin: 10px;
  50.           background-color: #ffffff;
  51.           text {
  52.             color: #FF0000;
  53.             text-align: center;
  54.           }
  55.         }
  56.       }
  57.     }
  58.   }
  59. </style>
  61. <script>
  62.   export default {
  63.     private: {
  64.       type: 'content_1'
  65.     },
  66.     onInit () {
  67.       this.$page.setTitleBar({ text: 'div组件模拟选项卡' })
  68.     },
  69.     showContent (num) {
  70.       this.type =  'content_' + num
  71.     }
  72.   }
  73. </script>

使用div组件实现的选项卡效果，功能还是有限，为了带来最佳用户体验，建议使用框架提供的tabs组件完成需求