@H_403_0@有几天没更新了，这几天上海天气比较热，天气一热就懒得写了。今天感觉还好，就写下导航部分的封装吧。
@H_403_0@关于环境搭建和底部tabbar的封装请参考前面的两篇文章 @H_403_0@web app和移动端原生app的构架方式不一样的，页面的切换是对整个页面的重新渲染。所以我们每个页面都有自己的导航条。 @H_403_0@下面简单封装下导航条 @H_403_0@html部分 @H_403_0@此处写的导航的三个部分，分别是左边div、中间的title部分div、右边div。代码如下.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
@H_403_0@封装完毕后，我们就可以使用啦，具体使用方法如下
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
}
}
