在components文件夹下创建Tabbar组件，公用

在components文件夹中创建tabbar.ux文件
接着同样创建这三个文件（自定义 main watting me）

1. 在tabbar.ux文件下写页面底部
   

<template>
  <div class="bar-wrap">
    
    <div class="bar-item" onclick="clickBar('main')">
      <image src="{{current === 'main' ? '/assets/images/main-active.png' : '/assets/images/main.png'}}"></image>
      <text style="color: {{current === 'main' ? '#1296db' : '#999999'}};">首页</text>
    </div>

    <div class="bar-item" onclick="clickBar('waitting')">
      <image src="{{current === 'waitting' ? '/assets/images/waitting-active.png' : '/assets/images/waitting.png'}}"></image>
      <text style="color: {{current === 'waitting' ? '#1296db' : '#999999'}};">待办</text>
    </div>

    <div class="bar-item" onclick="clickBar('me')">
      <image src="{{current === 'me' ? '/assets/images/me-active.png' : '/assets/images/me.png'}}"></image>
      <text style="color: {{current === 'me' ? '#1296db' : '#999999'}};">我的</text>
    </div>

  </div>
</template>

<script>
export default {
  data() {
    return {
      current: 'main'
    }
  },

  clickBar(cur) {
    this.current = cur
    this.$emitElement('tap', {
      current: this.current
    })
  }
}
</script>

<style lang="less">
@import '../assets/styles/style.less';

.bar-wrap {
  width: 100%;
  height: 52px;
  position: fixed;
  bottom: 0;
  padding: 0 15px;
  .border-top;
}

.bar-item {
  .flex-box-mixins;
  width: 50%;
  image {
    width: 24px;
    height: 24px;
    margin-top: 7px;
    margin-bottom: 2px;
  }
  text {
    font-size: 10px;
    text-align: center;
    line-height: 13px;
  }
}
</style>

2. 在pages文件夹中的主页面 如下图所示：
   

<import name="tabbar" src="../../components/tabbar.ux"></import>
<import name="main" src="../../components/main.ux"></import>
<import name="waitting" src="../../components/waitting.ux"></import>
<import name="me" src="../../components/me.ux"></import>

<template>
  <div>
    <main show="{{current === 'main'}}"></main>
    <waitting show="{{current === 'waitting'}}"></waitting>
    <me show="{{current === 'me'}}"></me>
    <tabbar ontap="handleTap"></tabbar>
  </div>
</template>

<script>
export default {
  data: {
  },

  onShow() {
    this.$broadcast('showPage')
  },

  handleTap(e) {
  }
}
</script>

<style></style>