# UmsTabbar

<template>
  <div>
    <ums-tabcontainer v-model="select">
      <ums-tabcontainer-item id="0">
        <image class="imgPage" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=569334953,1638673400&fm=27&gp=0.jpg"></image>
      </ums-tabcontainer-item>
      <ums-tabcontainer-item id="1">
        <image class="imgPage" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4080833725,2827278465&fm=27&gp=0.jpg"></image>
      </ums-tabcontainer-item>
      <ums-tabcontainer-item id="2">
        <image class="imgPage" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3901058853,1971973771&fm=27&gp=0.jpg"></image>
      </ums-tabcontainer-item>
      </ums-tabcontainer-item>
      <ums-tabcontainer-item id="3">
        <image class="imgPage" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=4080833725,2827278465&fm=27&gp=0.jpg"></image>
      </ums-tabcontainer-item>
    </ums-tabcontainer>
    
    <ums-tabbar v-model="select" fixed>
      <ums-tabitem class="tabitem" v-for="(item, index) in items" :class="[select == index ? 'select':'']" @click.native="test" :id="index">
        <image class="img" :src="item.img" slot="icon" v-if="select !== index"></image>
        <image class="img" :src="item.active" slot="icon" v-else></image>
        <text slot="label" :style="{color: select !== index? '#DDD':'#999'}">{{item.label}}</text>
      </ums-tabitem>
      <ums-tabitem class="tabitem" >
        <text style="font-family: iconfont" slot="icon"></text>
        <text slot="label">图标字体</text>
      </ums-tabitem>
    </ums-tabbar>
    
  </div>
</template>

<style lang="stylus" scoped>
  .img
    width: 64px;
    height: 64px;
  .imgPage
    width: 750px;
    height: 900px;
    justify-content: center;
    align-items: center;
  .tabitem
    padding: 10px;
    border-radius: 10px
  .select
    background-color: #aaa
  .page
    width: 750px;
    height: 900px;
    justify-content: center;
    align-items: center;
</style>

<script>
  import {UmsTabbar, UmsTabitem, UmsTabcontainer, UmsTabcontainerItem} from "ums-comp"
  const dom = weex.requireModule("dom");
  export default {
    data () {
      return {
        select: "",
        items: [
          {
            img: '',
            active: '',
            label: '我的'
          },
          {
            img: '',
            active: '',
            label: '外卖'
          },
          {
            img: '',
            active: '',
            label: '设置'
          },
          {
            img: '',
            active: '',
            label: '首页'
          }
        ]
      }
    },
    components:{
      UmsTabbar,
      UmsTabitem,
      UmsTabcontainer,
      UmsTabcontainerItem
    },
    beforeCreate(){
      // 直接复制资源会找不到
      dom.addRule("fontFace", {
        "fontFamily": "iconfont",
        'src': "url('../../static/font/UmsIconFont.ttf')",
      })
    }
  }
</script>