詳解vue.js移動(dòng)端導(dǎo)航navigationbar的封裝

更新時(shí)間：2017年07月05日 15:27:26 作者：maxZhang

本篇文章主要介紹了vue.js移動(dòng)端導(dǎo)航navigationbar的封裝，具有一定的參考價(jià)值，有興趣的可以了解一下

有幾天沒(méi)更新了，這幾天上海天氣比較熱，天氣一熱就懶得寫(xiě)了。今天感覺(jué)還好，就寫(xiě)下導(dǎo)航部分的封裝吧。

關(guān)于環(huán)境搭建和底部tabbar的封裝請(qǐng)參考前面的兩篇文章

web app和移動(dòng)端原生app的構(gòu)架方式不一樣的，頁(yè)面的切換是對(duì)整個(gè)頁(yè)面的重新渲染。所以我們每個(gè)頁(yè)面都有自己的導(dǎo)航條。

下面簡(jiǎn)單封裝下導(dǎo)航條

html部分

此處寫(xiě)的導(dǎo)航的三個(gè)部分，分別是左邊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部分代碼

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

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

運(yùn)行效果圖如下