分析vue.js移动端导航navigationbar的封装

内容摘要
这篇文章主要为大家详细介绍了分析vue.js移动端导航navigationbar的封装，具有一定的参考价值，可以用来参考一下。

对此感兴趣的朋友，看看idc笔记做的技术笔记！
有几天没更新了，
文章正文

这篇文章主要为大家详细介绍了分析vue.js移动端导航navigationbar的封装，具有一定的参考价值，可以用来参考一下。

对此感兴趣的朋友，看看idc笔记做的技术笔记！

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

关于环境搭建和底部tabbar的封装请参考前面的两篇文章

web app和移动端原生app的构架方式不一样的，页面的切换是对整个页面的重新渲染。所以我们每个页面都有自己的导航条。

下面简单封装下导航条

html部分

此处写的导航的三个部分，分别是左边div、中间的title部分div、右边div。代码如下

代码如下：

1
2
3
4
5
6
7
8
9
<code>
<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>
</code>

js部分代码

此处向父类暴露了3个属性，分别是传入title的字符串和背景是否为红色，已经是否固定在顶部(默认是固定在顶部)。具体代码如下

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<code>
<script type="text/ecmascript-6">
 export default{
  props: {
   title: {
    type: String,
    default: ''
   },
   bgRed: {
    type: Boolean,
    default: false
   },
   fixed: {
    type: Boolean,
    default: true
   }
  }
 }
</script>
</code>

stylus部分代码如下

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<code>
<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>
 
</code>

封装完毕后，我们就可以使用啦，具体使用方法如下

代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<code>
<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>
 
</code>

运行效果图如下

【图片暂缺】

【图片暂缺】

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持php教程。

注：关于分析vue.js移动端导航navigationbar的封装的内容就先介绍到这里，更多相关文章的可以留意

代码注释
上一篇vue实现简单表格组件实例分析下一篇关于vuex的学习实践笔记

作者：喵哥笔记

IDC笔记

学的不仅是技术，更是梦想！