tab-bar

<template>
  <div class="container">
    <div class="page-title-wrap">
      <text class="page-title">{{componentName}}</text>
    </div>
    <tabs class="tabs" onchange="changeTabActive" index="2">
      <tab-bar class="tab-bar">
        <text class="tab-text">basic</text>
        <text class="tab-text">form</text>
        <text class="tab-text">list</text>
      </tab-bar>
    </tabs>
  </div>
</template>
<style>
  .container {
    flex: 1;
    flex-direction: column;
  }
  .page-title-wrap {
    padding-top: 50px;
    padding-bottom: 80px;
    justify-content: center;
  }
  .page-title {
    padding-top: 30px;
    padding-bottom: 30px;
    padding-left: 40px;
    padding-right: 40px;
    border-color: #bbbbbb;
    color: #bbbbbb;
    border-bottom-width: 2px;
  }
  .tabs {
    flex: 1;
    margin-top: 20px;
    margin-right: 30px;
    margin-left: 30px;
    background-color: #ffffff;
  }
  .tab-bar {
    height: 100px;
    border-color: #bbbbbb;
    color: #bbbbbb;
    border-bottom-width: 1px;
  }
  .tab-text {
    width: 300px;
    text-align: center;
  }
  .tab-text:active {
    color: #f76160;
  }
</style>
<script>
  import prompt from '@system.prompt'
  export default {
    data: {
      componentName: 'tabs',
    },
    onInit: function () {
      this.$page.setTitleBar({ text: 'tab-bar' })
    },
    changeTabActive: function (e) {
      prompt.showToast({
        message: "the playing page number is " + e.index +"  "
      })
      // switch tab
      console.log('----------switch tab: ' + e.index)
    },
  }
</script>