详解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 相关文章推荐
JS 对象介绍
Jan 20 Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
javascript动态修改Li节点值的方法
Jan 20 Javascript
JS根据key值获取URL中的参数值及把URL的参数转换成json对象
Aug 26 Javascript
JavaScript编写点击查看大图的页面半透明遮罩层效果实例
May 09 Javascript
全面解析Bootstrap中form、navbar的使用方法
May 30 Javascript
对angularJs中ng-style动态改变样式的实例讲解
Sep 30 Javascript
超轻量级的js时间库miment使用解析
Aug 02 Javascript
解决$store.getters调用不执行的问题
Nov 08 Javascript
微信小程序scroll-view锚点链接滚动跳转功能
Dec 12 Javascript
创建nuxt.js项目流程图解
Mar 13 Javascript
jQuery AJAX应用实例总结
May 19 jQuery
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 编程请选择正确的文本编辑软件
2006/12/21 PHP
php 图片上传类代码
2009/07/17 PHP
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
PHP COOKIE及时生效的方法介绍
2014/02/14 PHP
php递归方法实现无限分类实例代码
2014/02/28 PHP
PHP实现RTX发送消息提醒的实例代码
2017/01/03 PHP
php 调用ffmpeg获取视频信息的简单实现
2017/04/03 PHP
封装的jquery翻页滚动(示例代码)
2013/11/18 Javascript
8个实用的jQuery技巧
2014/03/04 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
jQuery实现的淡入淡出二级菜单效果代码
2015/09/15 Javascript
谈谈encodeURI和encodeURIComponent以及escape的区别与应用
2015/11/24 Javascript
js/jq仿window文件夹框选操作插件
2017/03/08 Javascript
微信小程序实现页面跳转传值以及获取值的方法分析
2017/12/18 Javascript
JavaScript数组类型Array相关的属性与方法详解
2020/09/08 Javascript
进一步理解Python中的函数编程
2015/04/13 Python
python实现带错误处理功能的远程文件读取方法
2015/04/29 Python
批量获取及验证HTTP代理的Python脚本
2017/04/23 Python
Python 实现取矩阵的部分列,保存为一个新的矩阵方法
2018/11/14 Python
检测python爬虫时是否代理ip伪装成功的方法
2019/07/12 Python
用Python配平化学方程式的方法
2019/07/20 Python
python3 动态模块导入与全局变量使用实例
2019/12/22 Python
Python pip安装模块提示错误解决方案
2020/05/22 Python
python Xpath语法的使用
2020/11/26 Python
python 指定源路径来解决import问题的操作
2021/03/04 Python
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
时尚设计师手表:The Watch Cabin
2018/10/06 全球购物
UNIX文件系统分类
2014/11/11 面试题
会计实习自我鉴定
2013/12/04 职场文书
戒毒悔改检讨书
2014/09/21 职场文书
先进单位申报材料
2014/12/25 职场文书
土地租赁协议书
2015/01/29 职场文书
2015年共青团工作总结
2015/05/15 职场文书
医务人员医德医风心得体会
2016/01/25 职场文书
《童年的发现》教学反思
2016/02/18 职场文书
Element实现动态表格的示例代码
2021/08/02 Javascript