02_weex之底部导航栏

1、先创建子组件 tabFooter

  <template>
    <div class="footer-tab">
        <div class="footer-tab-item" @click="tabTo('home')">
            <text class="bar-text bar-ic iconfont" :class="[this.isActive('home')]">&#xe665;</text>
            <text class="bar-text" :class="[this.isActive('home')]">首页</text>
        </div>
        <div class="footer-tab-item" @click="tabTo('topic')">
            <text class="bar-text bar-ic iconfont" :class="[this.isActive('topic')]">&#xe69a;</text>
            <text class="bar-text" :class="[this.isActive('topic')]">专题</text>
        </div>
        <div class="footer-tab-item" @click="tabTo('class')">
            <text class="bar-text bar-ic iconfont" :class="[this.isActive('class')]">&#xe633;</text>
            <text class="bar-text" :class="[this.isActive('class')]">分类</text>
        </div>
        <div class="footer-tab-item" @click="tabTo('shop')">
            <text class="bar-text bar-ic iconfont" :class="[this.isActive('shop')]">&#xe600;</text>
            <text class="bar-text" :class="[this.isActive('shop')]">购物车</text>
        </div>
        <div class="footer-tab-item" @click="tabTo('my')">
            <text class="bar-text bar-ic iconfont" :class="[this.isActive('my')]">&#xe630;</text>
            <text class="bar-text" :class="[this.isActive('my')]">个人</text>
        </div>

    </div>
</template>

<script>
    exprot default{
     data(){
          pIndexKey:'home' , //默认选择首页
     },
    
     methods:{
          //判断当当前点击的 _c和pIndexKey相等时 加上isActive
          isActive(_c){
            return this.pIndexKey =  _c ? "isActive" : ""
        },
        //给父组件传值
       tabTo(_key){
                if(this.pIndexKey==_key) return _key;
                this.pIndexKey = _key
                this.$emit('tabTo',{
                    status:'tabTo',
                    data:{
                        key:_key
                    }
                })
              console.log(this.$router)
            }
      }

  }
</script>

<style>
    .iconfont {
        font-family:iconfont;
    }
    .footer-tab{
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100px;
        flex-direction: row;
        background-color: #ccc;
    }
    .footer-tab-item{
        flex: 1;
        align-items: center;
        justify-content: center;
    }
    .bar-ic{
        /* padding-top: 14px; */
        font-size: 38px;
        
    }
    .bar-text{
        padding-top: 4px;
        font-size: 24px;
    }
    .isActive{
        color:coral;
    }
</style>

2、父组件

  <template>
    <div>
     
       <v-footer-tab @tabTo="onTabTo"></v-footer-tab>
       <router-view></router-view>     <!-- 跳转页面必须加上 -->
    </div>
   
</template>

<script>
import tabFooter from './components/footer/tabFooter';
import util from './components/util';
export default {
  name: 'App',
  components:{
    'v-footer-tab':tabFooter
  },
  data () {
    return {
     
    }
  },
  created(){
     util.initIconfont();
  },
  methods:{
    onTabTo(_result){
      console.log(this.$router.push,111)
       this.$router.push('/'+_result.data.key)
      
       
    }
  }
}
</script>

<style scoped>
  .isActive{
    color:red !important;
  }
</style>