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

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


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


stylus部分代码如下


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




运行效果图如下


3.vue.js移动端导航navigationbar的封装_第1张图片
pic1

3.vue.js移动端导航navigationbar的封装_第2张图片
pic2

你可能感兴趣的:(3.vue.js移动端导航navigationbar的封装)