有几天没更新了，这几天上海天气比较热，天气一热就懒得写了。今天感觉还好，就写下导航部分的封装吧。
web app和移动端原生app的构架方式不一样的，页面的切换是对整个页面的重新渲染。所以我们每个页面都有自己的导航条。
下面简单封装下导航条
html部分
此处写的导航的三个部分，分别是左边div、中间的title部分div、右边div。代码如下
js部分代码
此处向父类暴露了3个属性，分别是传入title的字符串和背景是否为红色，已经是否固定在顶部(默认是固定在顶部)。具体代码如下
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
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
封装完毕后，我们就可以使用啦，具体使用方法如下
<script type="text/ecmascript-6">
import MHeader from 'common/nav/navbar'
export default{
data () {
return {
isShowRefresh: true
}
},components: {
MHeader
}
}
运行效果图如下
