有幾天沒更新了，這幾天上海天氣比較熱，天氣一熱就懶得寫了。今天感覺還好，就寫下導航部分的封裝吧。
關于環境搭建和底部tabbar的封裝請參考前面的兩篇文章
web app和移動端原生app的構架方式不一樣的，頁面的切換是對整個頁面的重新渲染。所以我們每個頁面都有自己的導航條。
下面簡單封裝下導航條
html部分
此處寫的導航的三個部分，分別是左邊div、中間的title部分div、右邊div。代碼如下

<template>
  <header class="m-header" :class="{'is-bg-red':bgRed, 'is-fixed':fixed}">
    <div class="leftItem"><slot name="left"></slot></div>
    <div class="m-header-title" v-text="title"></div>
    <div class="rightItem"><slot name="right"></slot></div>
  </header>
</template>

js部分代碼
此處向父類暴露了3個屬性，分別是傳入title的字符串和背景是否為紅色，已經是否固定在頂部(默認是固定在頂部)。具體代碼如下

<script type="text/ecmascript-6">
  export default{
    props: {
      title: {
        type: String,
        default: ''
      },
      bgRed: {
        type: Boolean,
        default: false
      },
      fixed: {
        type: Boolean,
        default: true
      }
    }
  }
</script>

stylus部分代碼如下

<style scoped lang="stylus" rel="stylesheet/stylus">

  .m-header
    display flex
    flex-direction row
    align-items center
    height 64px
    background-color white
    border-bottom 1px solid #e5e5e5
    .leftItem
      margin-top 24px
      width 60px
      height 40px
      a
        display block
        text-decoration none
        color #333
        font-size 16px
        img
          padding 10px 10px
          width 24px
          height 24px
    .m-header-title
      width 100%
      height 44px
      margin-top 24px
      line-height 44px
      font-size $font-size-nav-title
      color $color-nav-item
      display flex
      justify-content center
      font-size 18px
      color #333
    .rightItem
      margin-top 24px
      width 60px
      height 40px
      a
        display block
        text-decoration none
        color #333
        font-size 16px
        img
          padding 9px 8px
          width 24px
          height 24px
  &.is-fixed
    position fixed
    left 0px
    right 0px
    top 0px
    z-index 9
  &.is-bg-red
    background-color #ee424a
    .m-header-title
      color white
    .m-header-left
      color white
    .m-header-right
      color white

</style>

封裝完畢后，我們就可以使用啦，具體使用方法如下

<template>
  <div>
    <m-header title="職位" :bgRed="isShowRefresh">
      <a slot="left" v-show="false">
        ![](../../assets/refresh-white-icon@2x.png)
      </a>
      <a slot="right">
        ![](../../assets/home-filter@2x.png)
      </a>
    </m-header>
  </div>
</template>

<script type="text/ecmascript-6">
  import MHeader from 'common/nav/navbar'

  export default{
    data () {
      return {
        isShowRefresh: true
      }
    },
    components: {
      MHeader
    }
  }
</script>

運行效果圖如下

pic1

pic2