详解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与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
Mar 12 Javascript
网上抓的一个特效
May 11 Javascript
javascript两段代码,两个小技巧
Feb 04 Javascript
细说浏览器特性检测(2)-通用事件检测
Nov 05 Javascript
8款非常棒的响应式jQuery 幻灯片插件推荐
Feb 02 Javascript
bootstrap输入框组代码分享
Jun 07 Javascript
Javascript基于jQuery UI实现选中区域拖拽效果
Nov 25 Javascript
mint-ui在vue中的使用示例
Apr 05 Javascript
vue中格式化时间过滤器代码实例
Apr 17 Javascript
VUE安装使用教程详解
Jun 03 Javascript
解决VueCil代理本地proxytable无效报错404的问题
Nov 07 Javascript
vue基于Echarts的拖拽数据可视化功能实现
Dec 04 Vue.js
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
怎么样可以把 phpinfo()屏蔽掉?
2006/11/24 PHP
php实现mysql同步的实现方法
2009/10/21 PHP
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
PHP中删除变量时unset()和null的区别分析
2011/01/27 PHP
浅谈php冒泡排序
2014/12/30 PHP
PHP调试函数和日志记录函数分享
2015/01/31 PHP
PHP中判断文件存在使用is_file还是file_exists?
2015/04/03 PHP
PHP lcfirst()函数定义与用法
2019/03/08 PHP
用javascript实现自定义标签
2007/05/08 Javascript
用JS判断IE版本的代码 超管用!
2011/08/09 Javascript
当jQuery1.7遇上focus方法的问题
2014/01/26 Javascript
javascript检查浏览器是否支持flash的实现代码
2014/08/14 Javascript
基于jQuery实现的双11天猫拆红包抽奖效果
2015/12/01 Javascript
Javascript数组Array方法解读
2016/03/13 Javascript
详解handlebars+require基本使用方法
2016/12/21 Javascript
js实现省份下拉菜单效果
2017/02/15 Javascript
jQuery简单实现向列表动态添加新元素的方法示例
2017/12/25 jQuery
JavaScript中click和onclick本质区别与用法分析
2018/06/07 Javascript
vue路由组件按需加载的几种方法小结
2018/07/12 Javascript
浅谈Vue初学之props的驼峰命名
2018/07/19 Javascript
JavaScript寄生组合式继承原理与用法分析
2019/01/11 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
JavaScript 绘制饼图的示例
2021/02/19 Javascript
python中多层嵌套列表的拆分方法
2018/07/02 Python
在Pycharm中将pyinstaller加入External Tools的方法
2019/01/16 Python
使用Filter过滤python中的日志输出的实现方法
2019/07/17 Python
如何爬取通过ajax加载数据的网站
2019/08/15 Python
Python属性和内建属性实例解析
2020/01/14 Python
利用Bootstrap实现漂亮简洁的CSS3价格表实例源码
2017/03/02 HTML / CSS
美国非常受欢迎的Spa品牌:Bliss必列斯
2018/04/10 全球购物
Puccini乌克兰:购买行李箱、女士手袋网上商店
2020/08/06 全球购物
2014年三万活动总结
2014/04/26 职场文书
奶茶店创业计划书
2014/08/14 职场文书
教师个人自我剖析材料
2014/09/29 职场文书
秦兵马俑导游词
2015/02/02 职场文书
信访维稳承诺书
2015/05/04 职场文书