详解vue.js移动端导航navigationbar的封装
有几天没更新了,这几天上海天气比较热,天气一热就懒得写了。今天感觉还好,就写下导航部分的封装吧。
关于环境搭建和底部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>
运行效果图如下
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- vue-router配合ElementUI实现导航的实例
- VueRouter导航守卫用法详解
- vue实现nav导航栏的方法
- vue实现导航栏效果(选中状态刷新不消失)
- vue 挂载路由到头部导航的方法
- vue2导航根据路由传值,而改变导航内容的实例
- vue-router路由与页面间导航实例解析
- vue router仿天猫底部导航栏功能
- 详解VueRouter进阶之导航钩子和路由元信息
- 详解使用Vue Router导航钩子与Vuex来实现后退状态保存
- vue-router 导航钩子的具体使用方法
- 详解vue-router 2.0 常用基础知识点之导航钩子
- vue2.0实现导航菜单切换效果
- vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
- 非常实用的vue导航钩子
- vue2.0 elementUI制作面包屑导航栏
相关文章
vue文件上传Required request part ‘file‘ is&n
这篇文章主要介绍了vue文件上传Required request part ‘file‘ is not present问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-11-11vue elementUI select下拉框如何设置默认值
这篇文章主要介绍了vue elementUI select下拉框如何设置默认值问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2023-10-10element 结合vue 在表单验证时有值却提示错误的解决办法
这篇文章主要介绍了element 结合vue 在表单验证下,有值却提示错误的解决办法,需要的朋友可以参考下2018-01-01
最新评论