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

关于环境搭建和底部tabbar的封装请参考前面的两篇文章

网应用程序和移动端原生应用的构架方式不一样的，页面的切换是对整个页面的重新渲染。所以我们每个页面都有自己的导航条。

下面简单封装下导航条

超文本标记语言部分

此处写的导航的三个部分，分别是左边div、中间的标题部分div、右边div。代码如下

模板标头类=' m-header ' :类='{'is-bg-red':bgRed，' is-fixed':fixed}' div类='leftItem '插槽名称='左侧'/插槽/div类=' m-header-title ' v-text=' title '/div类='rightItem '插槽名称='右'/槽/div/标题/模板js部分代码

此处向父类暴露了3个属性，分别是传入标题的字符串和背景是否为红色，已经是否固定在顶部（默认是固定在顶部)。具体代码如下

脚本类型='text/ecmascript-6 '导出默认值{ prop : { title : { type : String，default: '' }，bgRed: { type:布尔值，default: false }，fixed: { type:布尔值，默认为： true } }/script手写笔部分代码如下

样式范围lang="手写笔" rel="样式表/手写笔"。m-表头显示flex-方向行对齐-项目中心高度64px背景色白色边框-底部1px实心# e5e5e5 .左派边距-顶部24px宽度60px高度40px a显示块文本装饰无颜色#333字号16px img填充10px 10px宽度24px高度24px .间位页眉-标题宽度100%高度44px边距-顶部24px行高44px字体大小$ font-size-nav-title color $ color-nav-item display flex justify-content center font-size 18px color # 333 .右侧项目边距-顶部24px宽度60px高度40px a显示块文本装饰无颜色#333字号16px img填充9px 8px宽度24px高度24px .是-固定位置固定左0px右0px顶0px z指数9 .is-BG-红色背景色#ee424a .标题颜色为白色m-表头-左侧白色m .页眉-右侧颜色白色/样式封装完毕后，我们就可以使用啦，具体使用方法如下

模板div m-标题标题='职位： bgred=' is show refresh ' a slot=' left ' v-show=' false '！[](././assets/[email protected])/a a slot=' right '！[](././assets/[email protected])/a/m-header/div/template脚本类型=' text/ecmascript-6 '从普通/导航/导航条导入MHeader导出默认{ data(){ return { isshorefresh : true } }，components 3360 { MHeader } }/script运行效果图如下

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。