Vue(小案例）底部tab欄和頂部title欄的實現

---恢復內容開始---

一、前言                                                                         

                       1、底部tab欄實現

                                    2、頂部title欄實現

二、主要內容                                                                  

  1、底部tab欄實現（將底部導航提取到公共的組件中）

           具體效果：當點擊切換不同的tab的時候，對應的顯示高亮，並且切換到對應的頁面中

　　（1）html/css代碼

<template>
    <div>
        <footer class="footer_guide border-1px">
            <a href="#" class="guide_item" @click='goTo("/")'  :class="{'on':'/'==this.$route.path}">
                <span>
                    <i class="iconfont icon-U"></i>
                </span>
                <span>外賣</span>
            </a>

            <a href="#" class="guide_item" @click='goTo("/Search")' :class="{'on':'/Search'==this.$route.path}">
                <span>
                    <i class="iconfont icon-sousuo"></i>
                </span>
                <span>搜索</span>
            </a>

            <a href="#" class="guide_item" @click='goTo("/Order")' :class="{'on':'/Order'==this.$route.path}" >
                <span>
                    <i class="iconfont icon-icon"></i>
                </span>
                <span>訂單</span>
            </a>

            <a href="#" class="guide_item" @click='goTo("/Profile")' :class="{'on':'/Profile'==this.$route.path}" >
                <span>
                    <i class="iconfont icon-geren"></i>
                </span>
                <span>我的</span>
            </a>

        </footer>
    </div>
</template>
<script type="text/javascript">
    
    export default{
        data(){
            return{

            }
        },

        methods:{
            goTo(path){
                
                this.$router.replace(path)
            }
        }

    }
</script>
<style lang="stylus" rel="stylesheet/stylus">
    @import "../../common/stylus/mixins.styl"
    
    .footer_guide
      top-border-1px(#e4e4e4)
      position fixed;
      z-index 100
      left 0
      right 0
      bottom 0
      background-color #fff
      width 100%
      height 50px
      display flex
    
    .guide_item
          display flex
          flex 1
          text-align center
          flex-direction column
          align-items center
          margin 5px
          color #999
     &.on
          color #02a774
     span
              font-size 12px
              margin-top 2px
              margin-bottom 2px
     .iconfont
               font-size 22px






</style>

　　 （2）給每個Tab切換標簽注冊一個點擊事件，每次點擊的時候，將當前對應頁面的路由傳過去，並且比較當且的路由，是否和tab上的路由一致，如果一致的時候就進行路由跳轉， 並且判斷當前的路由是否等於每個標簽中對應的路由，如果對應就設置為高亮

 

2、頂部title欄實現（用到slot插槽）

　　（1）在很多app軟件中，頂部的結構很相似（可以分為左，右，中）三個部分，

　　（2）也將頂部導航提取到公共導航部分

<template>
    <!--頭部-->
        <header class="header">
            <slot name="left"></slot>

            <span class="header_title">
                <span class="header_title_text ellipsis">{{title}}</span>
            </span>

            <slot name="right"></slot>
        </header>
        
</template>
<script type="text/javascript">
    export default{
        props:{
            title: String
        }
    }
</script>
<style lang="stylus" rel="stylesheet/stylus">
          .header
              background-color #02a774
              position fixed
              z-index 100
              top 0
              left 0
              width 100%
              height 45px
              .header_search
                position absolute
                left 15px
                top 30%
                width 10%
                height 50%
                .icon-sousuo
                  font-size 25px
                  color #fff
              .header_login
                font-size 14px
                color #fff
                position absolute
                right 15px
                top 50%
                transform transformY(-50%)
                .header_login_text
                 color #fff
              .header_title
                position absolute
                top 50%
                left 50%
                transform translateX(-50%)
                width 50%
                color #fff
                text-align center
              .header_title_text
                font-size 20px
                color #fff
                display block
</style>

　　（3）由於每個導航的title不一樣，可以從父組件傳給子組件

　　父組件中：

              第一步：先掛載

 

 　　第二步：使用

 

 　　子組件中：

 

三、總結                                                                         

---恢復內容結束---