详解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.js移动端导航navigationbar的封装

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

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

时间: 2017-07-02

Vue.js结合Ueditor富文本编辑器的实例代码

在前端开发的项目中.难免会遇到需要在页面上集成一个富文本编辑器. 前一段时间公司Vue.js项目需要使用UEditor富文本编辑器,在百度上搜索一圈没有发现详细的说明,决定自己尝试,忙活了一天终于搞定了. 1. 总体思路 1.1 模块化 vue的很大的一个优势在于模块化,我们可以通过模块化实现页面和逻辑的复用.所以可以把Ueditor重新封装成一个.vue的模板文件.其他组件通过引入这个模板实现代码复用. 1.2 数据传输 首先父组件需要设置编辑器的长度.宽度.初始文本,这些数据可以通过prop

详解vue.js+UEditor集成 [前后端分离项目]

首先,谈下这篇文章中的前后端所涉及到的技术框架内容. 虽然是后端的管理项目,但整体项目,是采用前后端分离的方式完成,这样做的目的也是产品化的需求: 前端,vue+vuex+vue router+webpack+elementUI的方案完成框架的搭建,其中用到了superUI来作为后端登陆之后的主页面框架,中间集成vue的大型单页应用: 后端,springboot+spring+springmvc+spring serurity+mybatis+maven+redis+dubbo +zookeep

vue.js组件之间传递数据的方法

前言 组件是 vue.js 最强大的功能之一,而组件实例的作用域是相互独立的,这就意味着不同组件之间的数据无法相互引用.如何传递数据也成了组件的重要知识点之一. 组件 组件与组件之间,还存在着不同的关系.父子关系与兄弟关系(不是父子的都暂称为兄弟吧). 父子组件 父子关系即是组件 A 在它的模板中使用了组件 B,那么组件 A 就是父组件,组件 B 就是子组件. // 注册一个子组件 Vue.component('child', { data: function(){ text: '我是fathe

Vue.js项目部署到服务器的详细步骤

前言 最近做完了一个项目,Vue.js 2.0 + vuex + axios,还是有点大的.想着做了这么久,放服务器给朋友们体验一下,帮忙找找BUG,于是就有了研究服务器这一篇文章了. 准备工作 服务器 既然是部署到服务器,肯定是需要一个云的.我这里找基友拿的一个,做测试的话,可以买阿里云的学生机,9.9 一个月,不过不是学生的话就比较麻烦,因为涉及敏感操作都需要验证码. 编译打包 将项目打包成 dist 文件,这里我需要跨域请求一些数据,还写了一个小型服务器, app.js 放到 dist 文

Vue.js 单页面多路由区域操作的实例详解

单页面多路由区域操作 在一个页面中有两个及以上的<router-view>区域,需要通过设置路由的index.js,来操作这些区域的内容 App.vue 中设置: <router-view></router-view> <router-view name="left" style="float: left;width: 50%; height: 300px;background-color: #ccc;"></r

vue.js实现刷新当前页面的方法教程

前言 Vue.js(是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,是一种数据驱动的前端框架 我们在开发vue的页面的时候,有时候会遇到需要刷新当前页面功能,但是vue框架自带的router是不支持刷新当前页面功能的,它只支持在路由路径变化时刷新页面.基于这个原理,为了实现刷新页面,可以先跳转到一个空页面,然后马上跳回来,从而实现这个功能. 开发工具环境 vue.js webstorm 方法如下 一.原理 如上图所示,我

vue.js国际化 vue-i18n插件的使用详解

安装方法 1.使用CDN直接引用 <script src="https://unpkg.com/vue/dist/vue.js"></script> <script src="https://unpkg.com/vue-i18n/dist/vue-i18n.js"></script> 2.NPM $ npm install vue-i18n 3.Yarn $ yarn add vue-i18n 使用方法 在这里只介绍v

Vue.js学习笔记之常用模板语法详解

本文介绍了Vue.js 常用模板语法,分享给大家,具体如下: 一.文本渲染 Vue支持动态渲染文本,即在修改属性的同时,实时渲染文本内容.同时为了提高渲染效率,也支持只渲染一次,即第一次渲染出文本后,文本内容不再跟随属性值的变化而变化. 实时渲染 <div class="row"> <h2>文本 - 实时渲染</h2> <input type="text" v-model="msg" class=&quo

Vue.js中组件中的slot实例详解

Vue组件中的slot slot 可以实现在已经定义的组件中添加内容,组件会接收内容并输出,假如有一个组件person,它的里面包含的是个人信息,如下面这样 <template id="per"> <div> <p>姓名:...</p> <p>年龄:...</p> <p>职业:...</p> </div> </template> 在应用的时候,当然希望这里面可以是灵活

JS条形码(一维码)插件JsBarcode用法详解【编码类型、参数、属性】

本文实例讲述了JS条形码插件JsBarcode用法.分享给大家供大家参考,具体如下: 这里介绍一下在GitHub生成条形码的js插件→JsBarcode 条码支持的有: CODE128   CODE128 (自动模式切换)   CODE128 A/B/C (强制模式) EAN   EAN-13   EAN-8   EAN-5   EAN-2   UPC (A) CODE39 ITF-14 MSI   MSI10   MSI11   MSI1010   MSI1110 Pharmacode Cod

vue从使用到源码实现教程详解

搭建环境 项目github地址 项目中涉及了json-server模拟get请求,用了vue-router: 关于Vue生命周期以及vue-router钩子函数详解 生命周期 1.0版本 1.哪些生命周期接口 init Created beforeCompile Compiled Ready Attatched Detached beforeDestory destoryed 2.执行顺序 1. 不具有keep-alive 进入: init->create->beforeCompile->

Vue 过渡(动画)transition组件案例详解

Vue过度(动画),本质走的是CSS3:transtion,animation. 控制器div显示/隐藏,代码如下: <div id="box"> <input type="button" value="按钮" @click="toggle"> <div id="div1" v-show="isShow"></div> </div&g

node.js中grunt和gulp的区别详解

node.js中grunt和gulp的区别详解 自nodeJS登上前端舞台,自动化构建变得越来越流行.目前最流行的当属grunt和gulp,这两个光看名字挺像,功能也差不多,不过gulp能在grunt这位大哥如日中天的境况下开辟出自己的一片天地,有着她独到的优点. 易用 Gulp相比Grunt更简洁,而且遵循代码优于配置策略,维护Gulp更像是写代码. 高效 Gulp相比Grunt更有设计感,核心设计基于Unix流的概念,通过管道连接,不需要写中间文件. 高质量 Gulp的每个插件只完成一个功能

Bootstrap 折叠(Collapse)插件用法实例详解

Bootstrap,来自 Twitter,是目前最受欢迎的前端框架.Bootstrap 是基于 HTML.CSS.JAVASCRIPT 的,它简洁灵活,使得 Web 开发更加快捷.下面通过本文给大家介绍Bootstrap 折叠(Collapse)插件用法实例,一起看看吧! 折叠(Collapse)插件可以很容易地让页面区域折叠起来.无论您用它来创建折叠导航还是内容面板,它都允许很多内容选项. 如果您想要单独引用该插件的功能,那么您需要引用 collapse.js.同时,也需要在您的 Bootst

jQuery的图片轮播插件PgwSlideshow使用详解

0 PgwSlideshow简介 PgwSlideshow是一款基于Jquery的图片轮播插件,基本布局分为上下结构,上方为大图轮播区域,用户可自定义图片轮播切换的间隔时间,也可以通过单击左右方向按键实现图片切换:下方为要轮播的所有图片的缩略图展示,可直接单击缩略图快速切换图片. PgwSlideshow主要有以下特点: •体验度很好的响应式设计 •支持桌面及移动设备 •身形矫健,压缩后的文件只有不到4KB •你可以自定义或者直接修改基本的css样式来给你想要的轮播插件美个容 PgwSlides

jQuery表单插件ajaxForm实例详解

前端时间写项目用到了ajaxForm这个插件,可以用它提交表单和上传图片,听起来和正常的form表单提交没什么区别,只不过是ajax提交,无需刷新页面,如此可以增加用户体验度. 引入两个文件,PS:必须 <script type="text/javascript" src="http://img9.tongzhuo100.com/js/jquery-1.7.2.min.js"></script> <script type="t

MUI Scroll插件的使用详解

http://dev.dcloud.net.cn/mui/ui/#scroll 神坑1:如果在vuejs中使用,那么需要配合mui.ready(function(){}) 才能找到dom对象,具体demo为: http://www.jb51.net/article/111085.htm 神坑2:scrollTo每次移动的距离,是相对于当前打距离的移动的,而不是移动到绝对的距离. scroll(区域滚动) 在App开发中,div区域滚动的需求是普遍存在的,但系统默认实现又有如下问题: Androi