如何封装vue.js移动端导航navigationbar

这篇文章主要介绍了如何封装vue.js移动端导航navigationbar，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

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>

运行效果图如下

感谢你能够认真阅读完这篇文章，希望小编分享的“如何封装vue.js移动端导航navigationbar”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!