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

前端之家收集整理的这篇文章主要介绍了详解vue.js移动端导航navigationbar的封装前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

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

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

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

封装完毕后,我们就可以使用啦,具体使用方法如下

运行效果图如下

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

原文链接:https://www.f2er.com/vue/38084.html

猜你在找的Vue相关文章