Create a tabbar component under the components folder, which is public

stay components Create in folder tabbar.ux file
Then create these three files as well （ Customize main watting me）

1. stay tabbar.ux File write down page bottom
   

<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'}};"> home page </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'}};"> To do </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'}};"> my </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. stay pages Main page in folder As shown in the figure below ：
   

<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>