weex-amui/packages/am-tab-container/README.md

Ant Design Mobile of Weex

# am-tab-container

> 面板，可切换显示子页面。

### 规则
- 一般和 `<am-tab-bar/>` 或者 `<am-tabs/>` 一起使用

## 使用方法 

```vue
<template>
  <div>
    <am-nav-bar
      :title="tabBar[selected].title"
      :left-btn="[]"
    ></am-nav-bar>
    <am-tab-container :index="selected">
      <am-tab-container-item>
        <am-tab-container-item>
          <div>
            <div class="panel">
              <text class="text">首页</text>
            </div>
          </div>
        </am-tab-container-item>
      </am-tab-container-item>
      <am-tab-container-item>
        <div>
          <div class="panel">
            <text class="text">钱包</text>
          </div>
        </div>
      </am-tab-container-item>
      <am-tab-container-item>
        <div>
          <div class="panel">
            <text class="text">心</text>
          </div>
        </div>
      </am-tab-container-item>
      <am-tab-container-item>
        <div>
          <div class="panel">
            <text class="text">我</text>
          </div>
        </div>
      </am-tab-container-item>
    </am-tab-container>
    <am-tab-bar
      icon-font-family="testIcon"
    >
      <am-tab-bar-item
        v-for="(item, index) in tabBar"
        :key="item.title"
        :icon="item.icon"
        :title="item.title"
        :selected="selected === index"
        @click="selected = index"
      />
    </am-tab-bar>
  </div>
</template>

<style scoped lang="less">
  .weex-root {
    height: 100%;
  }
  .panel {
    width: 600px;
    height: 300px;
    margin-left: 75px;
    margin-top: 35px;
    margin-bottom: 35px;
    flex-direction: column;
    justify-content: center;
    border-width: 2px;
    border-style: solid;
    border-color: rgb(162, 217, 192);
    background-color: rgba(162, 217, 192, 0.2);
  }
  .text {
    font-size: 50px;
    text-align: center;
    color: #41B883;
  }
</style>

<script>
  import { AmNavBar, AmTabBar, AmTabBarItem, AmTabContainer, AmTabContainerItem } from 'weex-amui'
  export default {
    components: { AmNavBar, AmTabBar, AmTabBarItem, AmTabContainer, AmTabContainerItem },
    data () {
    return {
      selected: 0,
      tabBar: [
        {
          icon: '\ue7ce',
          title: '首页'
        },
        {
          icon: '\ue7ac',
          title: '钱包'
        },
        {
          icon: '\ue800',
          title: '心'
        },
        {
          icon: '\ue7e8',
          title: '我'
        }
      ]
    }
  },
  beforeCreate () {
    // tabBar 的图标
    weex.requireModule('dom').addRule('fontFace', {
      'fontFamily': 'testIcon',
      'src': "url('https://at.alicdn.com/t/font_666154_scqtwgh1e27kqpvi.ttf')"
    })
  }
  }
</script>

```
更详细代码可以参考 [这里](https://github.com/HMingHe/weex-amui/blob/master/example/tab-container/index.vue)

### 可配置参数
| Prop	 | Type | Required | Default | Description |
| ---- |:----:|:---:|:-------:|:----------:|
| **`index`** | `Number` | `Y` | `0` | 当前面板 |
| **`animation`** | `Boolean` | `N` | `true` | 切换动画 |
| **`width`** | `Number` | `N` | `750` | 宽度，默认是750满屏 |

### Slots
| Name | Required | Description |
| ---- |:---:|:----------:|
| **`default`** | `Y` | 一般放 `<am-tab-container/>` |


### am-tab-container-item

### Slots
| Name | Required | Description |
| ---- |:---:|:----------:|
| **`default`** | `Y` | 显示的内容 |