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

2019-11-19 16:09:45

字体：大中小

来源：转载

供稿：网友

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

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

运行效果图如下