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


Posted in Javascript onJuly 05, 2017

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

关于环境搭建和底部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.js移动端导航navigationbar的封装

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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 必填项判断表单是否为空的方法
Sep 14 Javascript
javascript 类定义的4种方法
Sep 12 Javascript
常见JS效果之图片减速度滚动实现代码
Dec 08 Javascript
php跨域调用json的例子
Nov 13 Javascript
简单实现兼容各大浏览器的js复制内容到剪切板
Sep 09 Javascript
JavaScript转换与解析JSON方法实例详解
Nov 24 Javascript
完美解决input[type=number]无法显示非数字字符的问题
Feb 28 Javascript
Vuex利用state保存新闻数据实例
Jun 28 Javascript
bootstrap table实现x-editable的行单元格编辑及解决数据Empty和支持多样式问题
Aug 10 Javascript
react中的ajax封装实例详解
Oct 17 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
May 10 Javascript
Node Express用法详解【安装、使用、路由、中间件、模板引擎等】
May 13 Javascript
JS实现移动端按首字母检索城市列表附源码下载
Jul 05 #Javascript
webpack教程之webpack.config.js配置文件
Jul 05 #Javascript
webstorm添加vue.js支持的方法教程
Jul 05 #Javascript
vue.js实现刷新当前页面的方法教程
Jul 05 #Javascript
vue router2.0二级路由的简单使用
Jul 05 #Javascript
详解使用Node.js 将txt文件转为Excel文件
Jul 05 #Javascript
AngularJS实现进度条功能示例
Jul 05 #Javascript
You might like
我的php学习笔记(毕业设计)
2012/02/21 PHP
linux系统下php安装mbstring扩展的二种方法
2014/01/20 PHP
PHP中设置一个严格30分钟过期Session面试题的4种答案
2014/07/30 PHP
修改destoon会员公司的伪静态中的com目录的方法
2014/08/21 PHP
Yii调试查看执行SQL语句的方法
2016/07/15 PHP
php解决安全问题的方法实例
2019/09/19 PHP
ext form 表单提交数据的方法小结
2008/08/08 Javascript
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
js生成的验证码的实现与技术分析
2014/09/17 Javascript
jQuery的基本概念与高级编程
2015/05/14 Javascript
JavaScript学习笔记之检测客户端类型是(引擎、浏览器、平台、操作系统、移动设备)
2015/12/03 Javascript
Bootstrap下拉菜单效果实例代码分享
2016/06/30 Javascript
Vue input控件通过value绑定动态属性及修饰符的方法
2017/05/03 Javascript
除Console.log()外更多的Javascript调试命令
2018/01/24 Javascript
Javascript删除数组里的某个元素
2019/02/28 Javascript
Vue实现根据hash高亮选项卡
2019/05/27 Javascript
vue 中 命名视图的用法实例详解
2019/08/14 Javascript
[48:45]Ti4 循环赛第二日 NEWBEE vs EG
2014/07/11 DOTA
[04:26]2014DOTA2西雅图国际邀请赛 总决赛TOPPLAY
2014/07/22 DOTA
用pickle存储Python的原生对象方法
2017/04/28 Python
Django中针对基于类的视图添加csrf_exempt实例代码
2018/02/11 Python
python用线性回归预测股票价格的实现代码
2019/09/04 Python
Python实现手机号自动判断男女性别(实例解析)
2019/12/22 Python
python读取raw binary图片并提取统计信息的实例
2020/01/09 Python
pygame实现弹球游戏
2020/04/14 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
Java多线程实现四种方式原理详解
2020/06/02 Python
简约控的天堂:The Undone
2016/12/21 全球购物
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
全球领先的全景影像品牌:Insta360
2019/08/21 全球购物
linux面试题参考答案(9)
2015/01/07 面试题
办公文员的工作岗位职责
2013/11/12 职场文书
二手房买卖协议书
2014/04/10 职场文书
党性观念心得体会
2014/09/03 职场文书
该怎么书写道歉信?
2019/07/03 职场文书
导游词之广西漓江
2019/11/02 职场文书