详解vue.js移动端导航navigationbar的封装
时间：2021-03-26 09:23:56 | 栏目：vue | 点击：次
有几天没更新了，这几天上海天气比较热，天气一热就懒得写了。今天感觉还好，就写下导航部分的封装吧。
关于环境搭建和底部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">
</a>
<a slot="right">
</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>
运行效果图如下
