详解vue.js移动端导航navigationbar的封装

有几天没更新了，这几天上海天气比较热，天气一热就懒得写了。今天感觉还好，就写下导航部分的封装吧。

关于环境搭建和底部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>

运行效果图如下

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。