详解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 相关文章推荐
Extjs中TabPane如何嵌套在其他网页中实现思路及代码
Jan 27 Javascript
jquery垂直公告滚动实现代码
Dec 08 Javascript
jQuery插件kinMaxShow扩展效果用法实例
May 04 Javascript
JS实现从连接中获取youtube的key实例
Jul 02 Javascript
Jquery 垂直多级手风琴菜单附源码下载
Nov 17 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 Javascript
基于js对象,操作属性、方法详解
Aug 11 Javascript
jQuery扩展实现text提示还能输入多少字节的方法
Nov 28 Javascript
过期软件破解办法实例详解
Jan 04 Javascript
js中的 || 与 &amp;&amp; 运算符详解
May 24 Javascript
vue+node 实现视频在线播放的实例代码
Oct 19 Javascript
JavaScript利用html5新方法操作元素类名详解
Nov 27 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
Google Voice 短信发送接口PHP开源版(2010.5更新)
2010/07/22 PHP
php explode函数实例代码
2012/02/27 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
PHP实现超简单的SSL加密解密、验证及签名的方法示例
2017/08/28 PHP
浅谈laravel5.5 belongsToMany自身的正确用法
2019/10/17 PHP
php中用unset销毁变量并释放内存
2020/05/10 PHP
JavaScript null和undefined区别分析
2009/10/14 Javascript
Javascript学习笔记-详解in运算符
2011/09/13 Javascript
extjs表格文本启用选择复制功能具体实现
2013/10/11 Javascript
Js实现简单的小球运动特效
2016/02/18 Javascript
微信JS接口大全
2016/08/25 Javascript
纯JS实现可拖拽表单的简单实例
2016/09/02 Javascript
浅谈html转义及防止javascript注入攻击的方法
2016/12/04 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
JavaScript 中的 this 简单规则
2017/09/19 Javascript
动态统计当前输入内容的字节、字符数的实例详解
2017/10/27 Javascript
解决iview打包时UglifyJs报错的问题
2018/03/07 Javascript
vue中的过滤器实例代码详解
2019/06/06 Javascript
[12:36]《DOTA2》国服注册与激活指南全攻略
2013/04/28 DOTA
[53:23]Secret vs Liquid 2018国际邀请赛淘汰赛BO3 第二场 8.25
2018/08/29 DOTA
python实现带验证码网站的自动登陆实现代码
2015/01/12 Python
Python自动调用IE打开某个网站的方法
2015/06/03 Python
Python利用matplotlib生成图片背景及图例透明的效果
2017/04/27 Python
读取json格式为DataFrame(可转为.csv)的实例讲解
2018/06/05 Python
python-tornado的接口用swagger进行包装的实例
2019/08/29 Python
python的pyecharts绘制各种图表详细(附代码)
2019/11/11 Python
python针对Oracle常见查询操作实例分析
2020/04/30 Python
维氏瑞士军刀英国网站:Victorinox英国
2019/07/04 全球购物
大学四年个人的自我评价
2014/02/26 职场文书
公司口号大全
2014/06/11 职场文书
语文课外活动总结
2014/08/27 职场文书
个人剖析材料及整改措施
2014/10/07 职场文书
广告公司文案策划岗位职责
2015/04/14 职场文书
农村环境卫生倡议书
2015/04/29 职场文书
2015年信息中心工作总结
2015/05/25 职场文书
暂住证明怎么写
2015/06/19 职场文书