开创自定义组件tabbar,创建组件header

ca88会员登录中心 62
ca88会员登录中心

上一章有童鞋提到为什么不通过路由的方式来跳转?其实我想说的是,这个分享才刚刚开始,大家不要着急!这一章节我们将带大家完成,创建header组件,以及tabbar的路由跳转。

1.分析

大家好,我给大家分享一下仿豆瓣app的教程。当然了,我们不是用原生去实现,而是用前端框架vuejs来实现豆瓣app。————第一次写文章,写得不好请见谅。

vue专题目录:1-vuejs2.0实战:仿豆瓣app项目,创建自定义组件tabbar

ca88会员登录中心 1

为什么我们选择豆瓣app 来做这样一个教程?

创建header组件

我们先来分析一下豆瓣app:

ca88会员登录中心 2Paste_Image.pngca88会员登录中心 3Paste_Image.pngca88会员登录中心 4Paste_Image.pngca88会员登录中心 5Paste_Image.png

首页的header背景是绿色的,并且有一个搜索框,其他页面都是灰色的背景,在header的左侧,是一个返回按钮,右侧,有分享或者评论等图标,中间就是header的标题。我们先不做有搜索框的header。

我们先在components文件中创建一个header.vue文件,并且在less文件里新建一个颜色变量var.less(统一管理app的颜色,保持统一),我们先将有其他元素的组件的大致框架,以及样式先写出来。然后在index.vue里面引入。

//var.less//APP默认颜色@defaultColor:#42bd56;//header@headerBg:@defaultColor;@headerDefaultColor:rgb;//tabbar@tabbarActiveColor: @defaultColor;

//header.vue<template> <header > <div > <a href="javascript:;">< img src="../../assets/images/ic_bar_back_white.png"/>返回</a> </div> <h1 >豆瓣app</h1> <div > <a href="javascript:;">分享</a> </div> </header></template><script> </script><style lang="less">/*导入颜色变量*/@import "../assets/less/var.less";.m-header{ display: flex; align-items: center; height: 44px; padding: 0 10px; background: #fff; color: @headerDefaultColor; border-bottom:1px solid #eee; a{ color: @headerDefaultColor; } .m-header-button{ width: 70px; align-items:stretch; &.is-left{ text-align: left; } &.is-right{ text-align: right; } .m-icon-img{ width: 20px; height: 20px; } .margin-right-10{ margin-right: 10px; } } .m-header-title{ flex: 1; text-align: center; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } &.is-bg{ background:@headerBg; color: #fff; a{color: #fff;} .m-header-title{ color: #fff; } } &.is-fixed{ position: fixed; left: 0; right: 0; top: 0; z-index: 9; }}</style>

下图就是我们完成后的截图:

ca88会员登录中心 6Paste_Image.png

is-bg:是否显示背景色,默认是绿色is-fixed:是否显示在顶部

去掉is-bg,显示白色背景的header组件

ca88会员登录中心 7Paste_Image.png

由于上一章tarbar组件没有用到var.less,那么在这里也统一改一下

//tabbar.vue<style lang="less">@import "../assets/less/var.less";.m-tabbar-item{ flex: 1; text-align: center; .m-tabbar-item-icon{ display: block; padding-top: 2px; img{ width: 28px; height: 28px; } } .m-tabbar-item-text{ display: block; font-size: 10px; color:#949494; } &.is-active{ .m-tabbar-item-text{ color: @tabbarActiveColor; } }}</style>

如果我们需要更换整个app的颜色,只需要在var.less更改相应的变量就可以了。例如:

改成黄色

//var.less//APP默认颜色@defaultColor:#f6c210;//header@headerBg:@defaultColor;@headerDefaultColor:rgb;//tabbar@tabbarActiveColor: @defaultColor;

ca88会员登录中心 8Paste_Image.png

改成红色

//var.less//APP默认颜色@defaultColor:#ff0000;//header@headerBg:@defaultColor;@headerDefaultColor:rgb;//tabbar@tabbarActiveColor: @defaultColor;

ca88会员登录中心 9Paste_Image.png

是不是非常的方便!!!

接下来我们就来把header改造成可以配置属性的组件,可以传递props(title,fixed,bg),

<template> <header :> <div > <slot name="left"></slot> </div> <h1 v-text="title"></h1> <div > <slot name="right"></slot> </div> </header></template><script> export default{ props:{ title:{ type:String, default:'' }, bg:{ type:Boolean, default:false }, fixed:{ type:Boolean, default:false } } }</script><style lang="less">/*导入颜色变量*/@import "../assets/less/var.less";.m-header{ display: flex; align-items: center; height: 44px; padding: 0 10px; background: #fff; color: @headerDefaultColor; border-bottom:1px solid #eee; a{ color: @headerDefaultColor; } .m-header-button{ width: 70px; align-items:stretch; &.is-left{ text-align: left; } &.is-right{ text-align: right; } .m-icon-img{ width: 20px; height: 20px; } .margin-right-10{ margin-right: 10px; } } .m-header-title{ flex: 1; text-align: center; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } &.is-bg{ background:@headerBg; color: #fff; a{color: #fff;} .m-header-title{ color: #fff; } } &.is-fixed{ position: fixed; left: 0; right: 0; top: 0; z-index: 9; }}</style>

大功告成!我们就来调用吧!

<m-header title="豆瓣app" :bg="true"> <a href="javascript:;" slot="left">< img src="../../assets/images/ic_bar_back_white.png"/>返回</a> <a href="javascript:;" slot="right">分享</a> </m-header> <m-header title="豆瓣app" :bg="true"> <a href="javascript:;" slot="left">< img src="../../assets/images/ic_bar_back_white.png"/>返回</a> <a href="javascript:;" slot="right">分享</a> </m-header> <m-header title="豆瓣app" fixed> <a href="javascript:;" slot="left">< img src="../../assets/images/ic_bar_back_green.png"/>返回</a> <a href="javascript:;" slot="right">< img src="../../assets/images/ic_actionbar_search_icon.png"/></a> <a href="javascript:;" slot="right">< img src="../../assets/images/ic_chat_green.png"/></a> </m-header> 

首页的header背景是绿色的,并且有一个搜索框,其他页面都是灰色的背景,在header的左侧,是一个返回按钮,右侧,有分享或者评论等图标,中间就是header的标题。我们先不做有搜索框的header。

是因为我很早就接触豆瓣这个网站,我比较喜欢看豆瓣里面电影和文章的点评。并且豆瓣提供了非常丰富的一个api接口供我们使用。也就是说我们可以不通过后端,直接通过前端ajax来获取电影和图书的数据,来组装我们app。

改造tabbar,完成路由跳转

上一章我们只完成了tabbar点击改变颜色,那么如何通过路由来进行跳转页面呢?

我们先新建底部tabbar的路由页面,豆瓣app这个项目说大不大说小也不小,为了规划好结构,我们将每一个路由都新建一个文件夹,然后在文件夹里面,新建这个页面。在每个页面都添加不同的header组件,如图所示:

ca88会员登录中心 10Paste_Image.png

然后在每一个路由页面里面,我们都添加上header组件。拥有header组件的示例:

<template> <div> <m-header title="我的" fixed> <a href="javascript:;" slot="right">< img src="../../assets/images/ic_actionbar_search_icon.png"/></a> <a href="javascript:;" slot="right">< img src="../../assets/images/ic_chat_green.png"/></a> </m-header> </div></template><script> import mHeader from '../../components/header' export default { name: 'mine', components: { mHeader } }</script>

路由的页面完成后我们就需要在router文件夹下面的index.js里面,来配置页面路由。如下:

import Vue from 'vue'import Router from 'vue-router'import Index from '../pages/Index/Index'import Broadcast from '../pages/Broadcast/Broadcast'import AudioBook from '../pages/AudioBook/AudioBook'import Group from '../pages/Group/Group'import Mine from '../pages/Mine/Mine'Vue.useexport default new Router({ routes: [ { path: '/', name: 'Index', component: Index }, { path: '/broadcast', name: 'Broadcast', component: Broadcast }, { path: '/audioBook', name: 'AudioBook', component: AudioBook }, { path: '/group', name: 'Group', component: Group }, { path: '/mine', name: 'Mine', component: Mine }, { path: '/Index', redirect: '/' }, { path: '*', redirect: '/' }, ]})

我们可以在浏览器输入配置的这个路由地址来访问这个页面是否存在。如果不存在详细检查路径是否正确。

接下来我们就来改造tabbar实现路由跳转。我们先将index.vue里的tabbar组件移入到app.vue里面,并且将每一个id改成对应的路由,添加一个isRouter属性,来判断当前item是否是路由跳转。然后在tabbar-item.vue里我们在props添加isRouter,click点击跳转的方法放到methods里面,并且根据传递的isRouter判断当前是否通过路由跳转

<template> <div > <router-view></router-view> <m-tabbar v-model="select"> <m-tabbar-item id='Index' isRouter> < img src="./assets/images/ic_tab_home_normal.png" alt="ca88会员登录中心 11" slot="icon-normal"> < img src="./assets/images/ic_tab_home_active.png" alt="ca88会员登录中心 12" slot="icon-active"> 首页 </m-tabbar-item> <m-tabbar-item id='AudioBook' isRouter> < img src="./assets/images/ic_tab_subject_normal.png" alt="ca88会员登录中心 13" slot="icon-normal"> < img src="./assets/images/ic_tab_subject_active.png" alt="ca88会员登录中心 14" slot="icon-active"> 书影音 </m-tabbar-item> <m-tabbar-item id='Broadcast' isRouter> < img src="./assets/images/ic_tab_status_normal.png" alt="ca88会员登录中心 15" slot="icon-normal"> < img src="./assets/images/ic_tab_status_active.png" alt="ca88会员登录中心 16" slot="icon-active"> 广播 </m-tabbar-item> <m-tabbar-item id='Group' isRouter> < img src="./assets/images/ic_tab_group_normal.png" alt="ca88会员登录中心 17" slot="icon-normal"> < img src="./assets/images/ic_tab_group_active.png" alt="ca88会员登录中心 18" slot="icon-active"> 小组 </m-tabbar-item> <m-tabbar-item id='Mine' isRouter> < img src="./assets/images/ic_tab_profile_normal.png" alt="ca88会员登录中心 19" slot="icon-normal"> < img src="./assets/images/ic_tab_profile_active.png" alt="ca88会员登录中心 20" slot="icon-active"> 我的 </m-tabbar-item> </m-tabbar> </div></template><script>import mTabbar from './components/tabbar'import mTabbarItem from './components/tabbar-item'export default { name: 'app', components:{ mTabbar, mTabbarItem }, data() { return { select:"Index" } }}</script><style></style>

<template> <a : @click="goToRouter"> <slot name="icon-normal"></slot> <slot name="icon-active"></slot> <slot></slot> </a></template><script> export default{ props: { id:{ type:String }, isRouter:{ type:Boolean, default:false } }, computed: { isActive(){ if(this.$parent.value===this.id){ return true; } } }, methods:{ goToRouter(){ this.$parent.$emit('input',this.id) //判断是否为路由跳转 if(this.isRouter){ //根据id跳转到对应的路由页面 this.$router.push } } } }</script><style lang="less">@import "../assets/less/var.less";.m-tabbar-item{ flex: 1; text-align: center; .m-tabbar-item-icon{ display: block; padding-top: 2px; img{ width: 28px; height: 28px; } } .m-tabbar-item-text{ display: block; font-size: 10px; color:#949494; } &.is-active{ .m-tabbar-item-text{ color: @tabbarActiveColor; } }}</style>

我们先在components文件中创建一个header.vue文件,并且在less文件里新建一个颜色变量var.less(统一管理app的颜色,保持统一),我们先将有其他元素的组件的大致框架,以及样式先写出来。然后在Index.vue里面引入。

我们可以看一下豆瓣app首页是一个什么样子 gif

tabbar.vue

通过计算返回当前路由的值

<template> <div > <slot></slot> </div></template><script> import mTabbarItem from './tabbar-item'; export default { props: ['value'], computed:{ value(){ return this.$route.matched[0].name } } }</script><style lang="less">.m-tabbar{ display: flex; flex-direction: row; position: fixed; bottom: 0; left: 0; right: 0; width: 100%; overflow: hidden; height: 50px; background: #fff; border-top: 1px solid #e4e4e4;}</style>

路由跳转就完成了,如图:

ca88会员登录中心 21录像1_转.gif

git地址:

第二章源码链接: 密码: sp4i

vue专题目录:1-vuejs2.0实战:仿豆瓣app项目,创建自定义组件tabbar

下一章预告:创建swipe组件请关注作者,能及时看到分享的vue教程

ca88会员登录中心 22

ca88会员登录中心 23

 

Paste_Image.png

var.less

以上就是豆瓣app的一个截图。

ca88会员登录中心 24

我们先来分析一下

//APP默认颜色
@defaultColor:#42bd56;
//header
@headerBg:@defaultColor;
@headerDefaultColor:rgb(73,73,73);

//tabbar
@tabbarActiveColor: @defaultColor;

首页分为四个部分。第一个就是顶部的搜索框。搜索框下面就是一个banner图切换。在下面就是一些热点的文章列表。最底部就是一个tab切换。在这篇教程中,我们通过vue的组件来实现这样一个首页的布局。

 


header.vue

创建豆瓣项目
如果没有安装node,请到官网下载安装,或者通过淘宝npm镜像安装

<template>
  <header class="m-header is-bg is-fixed" >
    <div class="m-header-button is-left">
      <a href="javascript:;"><img class="m-icon-img" src="../assetsic_bar_back_white.png"/>返回</a>
    </div>

    <h1 class="m-header-title">豆瓣app</h1>

    <div class="m-header-button is-right">
      <a href="javascript:;">分享</a>
    </div>
  </header>
</template>
<script>

</script>
<style lang="less">
/*导入颜色变量*/
@import "../assets/less/var.less";
.m-header{
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 10px;
  background: #fff;
  color: @headerDefaultColor;
  border-bottom:1px solid #eee;
  a{
    color: @headerDefaultColor;
  }
  .m-header-button{
    width: 70px;
    align-items:stretch;
    &.is-left{
      text-align: left;
    }
    &.is-right{
      text-align: right;
    }
    .m-icon-img{
      width: 20px;
      height: 20px;
    }
    .margin-right-10{
      margin-right: 10px;
    }
  }
  .m-header-title{
    flex: 1;
    text-align: center;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  &.is-bg{
    background:@headerBg;
    color: #fff;
    a{color: #fff;}
    .m-header-title{
      color: #fff;
    }
  }
  &.is-fixed{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9;
  }
}
</style>
http://npm.taobao.org/

 

我们通过官方vue-cli初始化项目,这里我们采用webpack示例

Index.vue 引入

vue init webpack douban

ca88会员登录中心 25

填写项目描述,作者,安装vue-router

 

? Project name douban
? Project description douban
? Author afei
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? No
? Setup e2e tests with Nightwatch? No

   vue-cli · Generated "douban".

   To get started:

     cd douban
     npm install
     npm run dev

   Documentation can be found at https://vuejs-templates.github.io/webpack

ca88会员登录中心,效果图:

初始化后,通过npm install安装依赖

ca88会员登录中心 26

cd douban
npm install

 

由于我们是做的移动端,所以在index.html里面加上meta,

2.接下来我们就来把header改造成可以配置属性的组件,可以传递props(title,fixed,bg)

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">

 header.vue

运行项目,可以看到基于官方vue-cli的模版就创建好了

<template>
  <header class="m-header" :class="{'is-bg':bg,'is-fixed':fixed}">
    <div class="m-header-button is-left">
      <slot name="left"></slot>
    </div>

    <h1 class="m-header-title" v-text="title"></h1>

    <div class="m-header-button is-right">
      <slot name="right"></slot>
    </div>
  </header>
</template>

<script>
  export default{
    props:{
      title:{
        type:String,
        default:''
      },
      bg:{
        type:Boolean,
        default:false
      },
      fixed:{
        type:Boolean,
        default:false
      }
    }
  }
</script>

<style lang="less">
/*导入颜色变量*/
@import "../assets/less/var.less";
.m-header{
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 10px;
  background: #fff;
  color: @headerDefaultColor;
  border-bottom:1px solid #eee;
  a{
    color: @headerDefaultColor;
  }
  .m-header-button{
    width: 70px;
    align-items:stretch;
    &.is-left{
      text-align: left;
    }
    &.is-right{
      text-align: right;
    }
    .m-icon-img{
      width: 20px;
      height: 20px;
    }
    .margin-right-10{
      margin-right: 10px;
    }
  }
  .m-header-title{
    flex: 1;
    text-align: center;
    font-size: 16px;
    text-overflow: ellipsis;
    white-space: nowrap;
    overflow: hidden;
  }
  &.is-bg{
    background:@headerBg;
    color: #fff;
    a{color: #fff;}
    .m-header-title{
      color: #fff;
    }
  }
  &.is-fixed{
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 9;
  }
}
</style>
npm run dev

 

ca88会员登录中心 27

3.改造tabbar,完成路由跳转

Paste_Image.png

我们先新建底部tabbar的路由页面,豆瓣app这个项目说大不大说小也不小,为了规划好结构,我们将每一个路由都新建一个文件夹,然后在文件夹里面,新建这个页面。在每个页面都添加不同的header组件,如图所示:

将所需要用的资源,拷贝到项目中,这里我通过解压豆瓣app获得他的一些图片素材,拷入到src/assets/images目录里。

ca88会员登录中心 28

css这里我用到了normaliz.css

然后在每一个路由页面里面,我们都添加上header组件.

在src下,新建了一个pages目录,存放每一个页面组件,可以看一下我们的目录

Index.vue

<template>
  <div>
    <m-header title="豆瓣app" fixed :bg="true">
    </m-header>
  </div>
</template>

<script>
  import mHeader from '../../components/header'

  export default {
    name: 'mine',
    components: {
      mHeader
    }
  }
</script>

ca88会员登录中心 29

AudioBook.vue

<template>
  <div>
    <m-header title="书影音" fixed>
      <a href="javascript:;" slot="right"><img class="m-icon-img margin-right-10" src="../../assetsic_actionbar_search_icon.png"/></a>
      <a href="javascript:;" slot="right"><img class="m-icon-img" src="../../assetsic_chat_green.png"/></a>
    </m-header>
  </div>
</template>

<script>
  import mHeader from '../../components/header'

  export default {
    name: 'mine',
    components: {
      mHeader
    }
  }
</script>

Paste_Image.png

Broadcast.vue

<template>
  <div>
    <m-header title="广播" fixed>
      <a href="javascript:;" slot="right"><img class="m-icon-img margin-right-10" src="../../assetsic_actionbar_search_icon.png"/></a>
      <a href="javascript:;" slot="right"><img class="m-icon-img" src="../../assetsic_chat_green.png"/></a>
    </m-header>
  </div>
</template>

<script>
  import mHeader from '../../components/header'

  export default {
    name: 'mine',
    components: {
      mHeader
    }
  }
</script>

由于我们的首页更改了位置,所以在router里面的index.js需要更改为

Group.vue

<template>
  <div>
    <m-header title="小组" fixed>
      <a href="javascript:;" slot="right"><img class="m-icon-img margin-right-10" src="../../assetsic_actionbar_search_icon.png"/></a>
      <a href="javascript:;" slot="right"><img class="m-icon-img" src="../../assetsic_chat_green.png"/></a>
    </m-header>
  </div>
</template>

<script>
  import mHeader from '../../components/header'

  export default {
    name: 'mine',
    components: {
      mHeader
    }
  }
</script>
import Vue from 'vue'
import Router from 'vue-router'
import Index from '../pages/Index'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Index',
      component: Index
    }
  ]
})

Mine.vue

<template>
  <div>
    <m-header title="我的" fixed>
      <a href="javascript:;" slot="right"><img class="m-icon-img margin-right-10" src="../../assetsic_actionbar_search_icon.png"/></a>
      <a href="javascript:;" slot="right"><img class="m-icon-img" src="../../assetsic_chat_green.png"/></a>
    </m-header>
  </div>
</template>

<script>
  import mHeader from '../../components/header'

  export default {
    name: 'mine',
    components: {
      mHeader
    }
  }
</script>

 

路由的页面完成后我们就需要在router文件夹下面的index.js里面,来配置页面路由。如下:

index.js

import Vue from 'vue'
import Router from 'vue-router'
import Index from '../pages/Index/Index'
import Broadcast from '../pages/Broadcast/Broadcast'
import AudioBook from '../pages/AudioBook/AudioBook'
import Group from '../pages/Group/Group'
import Mine from '../pages/Mine/Mine'

Vue.use(Router)

// 路由配置
export default new Router({
  routes: [
    // 默认首页
    {
      path: '/',
      name: 'Index',
      component: Index
    },
    // 广播
    {
      path: '/broadcast',
      name: 'Broadcast',
      component: Broadcast
    },
    // 书影音
    {
      path: '/audioBook',
      name: 'AudioBook',
      component: AudioBook
    },
    // 小组
    {
      path: '/group',
      name: 'Group',
      component: Group
    },
    // 我的
    {
      path: '/mine',
      name: 'Mine',
      component: Mine
    },
    {
      path: '/Index',
      redirect: '/'
    },
    {
      path: '*',
      redirect: '/'
    },
  ]
})

 

接下来我们就来改造tabbar实现路由跳转。我们先将index.vue里的tabbar组件移入到app.vue里面,并且将每一个id改成对应的路由,添加一个isRouter属性,来判断当前item是否是路由跳转。然后在tabbar-item.vue里我们在props添加isRouter,click点击跳转的方法放到methods里面,并且根据传递的isRouter判断当前是否通过路由跳转

每一个组件的css我们通过less来编写,所有需要通过npm安装less插件

App.vue

<template>
  <div id="app">
    <router-view></router-view>
    <m-tabbar v-model="select">
     <m-tabbar-item id='Index' isRouter>
        <img src="./assetsic_tab_home_normal.png" alt="ca88会员登录中心 30" slot="icon-normal">
        <img src="./assetsic_tab_home_active.png" alt="ca88会员登录中心 31" slot="icon-active">
        首页
      </m-tabbar-item>
      <m-tabbar-item id='AudioBook' isRouter>
        <img src="./assetsic_tab_subject_normal.png" alt="ca88会员登录中心 32" slot="icon-normal">
        <img src="./assetsic_tab_subject_active.png" alt="ca88会员登录中心 33" slot="icon-active">
        书影音
      </m-tabbar-item>
      <m-tabbar-item id='Broadcast' isRouter>
        <img src="./assetsic_tab_status_normal.png" alt="ca88会员登录中心 34" slot="icon-normal">
        <img src="./assetsic_tab_status_active.png" alt="ca88会员登录中心 35" slot="icon-active">
        广播
      </m-tabbar-item>
      <m-tabbar-item id='Group' isRouter>
        <img src="./assetsic_tab_group_normal.png" alt="ca88会员登录中心 36" slot="icon-normal">
        <img src="./assetsic_tab_group_active.png" alt="ca88会员登录中心 37" slot="icon-active">
        小组
      </m-tabbar-item>
       <m-tabbar-item id='Mine' isRouter>
        <img src="./assetsic_tab_profile_normal.png" alt="ca88会员登录中心 38" slot="icon-normal">
        <img src="./assetsic_tab_profile_active.png" alt="ca88会员登录中心 39" slot="icon-active">
        我的
      </m-tabbar-item>
    </m-tabbar>
  </div>
</template>

<script>
import mTabbar from './components/tabbar'
import mTabbarItem from './components/tabbar-item'
export default {
  name: 'app',
  components:{
    mTabbar,
    mTabbarItem
  },
  data() {
    return {
      select:"Index"
    }
  }
}
</script>

<style>

</style>
npm install less less-loader --save

tabbar-item.vue

<template>
  <a class="m-tabbar-item" :class="{'is-active':isActive}" @click="goToRouter">
    <slot name="icon-normal"></slot>
    <slot name="icon-active"></slot>
    <slot></slot>
  </a>
</template>
<script>
  export default{
    props: {
      id:{
        type:String
      },
      isRouter:{
        type:Boolean,
        default:false
      }
    },
    computed: {
      isActive(){
        if(this.$parent.value===this.id){
          return true;
        }
      }
    },
    methods:{
      goToRouter(){
        this.$parent.$emit('input',this.id)
        //判断是否为路由跳转
        if(this.isRouter){
          //根据id跳转到对应的路由页面
          this.$router.push(this.id)
        }
      }
    }
  }
</script>
<style lang="less">
@import "../assets/less/var.less";
.m-tabbar-item{
  flex: 1;
  text-align: center;
  .m-tabbar-item-icon{
    display: block;
    padding-top: 2px;
    img{
      width: 28px;
      height: 28px;
    }

  }
  .m-tabbar-item-text{
    display: block;
    font-size: 10px;
    color:#949494;
  }
  &.is-active{
    .m-tabbar-item-text{
      color: @tabbarActiveColor;
    }
  }
}
</style>

使用less预处理器需要在页面添加 lang=’less’

tabbar.vue

通过计算返回当前路由的值

<template>
  <div class="m-tabbar">
    <slot></slot>
  </div>
</template>
<script>
  import mTabbarItem from './tabbar-item';
  export default {
    computed:{
      value(){
        return this.$route.matched[0].name
      }
    }
  }
</script>
<style lang="less">
.m-tabbar{
  display: flex;
  flex-direction: row;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  width: 100%;
  overflow: hidden;
  height: 50px;
  background: #fff;
  border-top: 1px solid #e4e4e4;
}
</style>

 

效果图

ca88会员登录中心 40

 

<style scoped lang="less">

</style>

第一个组件 tabbar

如何创建自定义组件tabbar,也就是豆瓣app底部的工具栏。这里的结构我们参考了mint-ui

这是我们将要实现的效果图。

ca88会员登录中心 41

Paste_Image.png

我们先来分析一下这个组件的结构。

这个组件分为两部分:第一个是组件的外层容器,第二个是组件的子容器item,子组件里面又分为图片和文字组合。子组件有2个状态,一个默认灰色的状态,一个选中状态,我们来实现一下这个组件的布局。在index.vue里面

template

<div class="m-tabbar">
  <a class="m-tabbar-item is-active">

       < img src="../assetsic_tab_home_normal.png" alt="ca88会员登录中心 42">


          首页

  </a> 
  <a class="m-tabbar-item">

       < img src="../assetsic_tab_subject_normal.png" alt="ca88会员登录中心 43">


          书影音

  </a> 
  <a class="m-tabbar-item">

       < img src="../assetsic_tab_status_normal.png" alt="ca88会员登录中心 44">


          广播

  </a> 
  <a class="m-tabbar-item">

       < img src="../assetsic_tab_group_normal.png" alt="ca88会员登录中心 45">


          小组

  </a> 
  <a class="m-tabbar-item">

       < img src="../assetsic_tab_profile_normal.png" alt="ca88会员登录中心 46">


          我的

  </a> 
</div>

style

<style lang="less">
.m-tabbar{
    display: flex;
    flex-direction: row;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    height: 50px;
    background: #fff;
    border-top: 1px solid #e4e4e4;

    .m-tabbar-item{
      flex: 1;
      text-align: center;
      .m-tabbar-item-icon{
          display: block;
          padding-top: 2px;
          img{
              width: 28px;
              height: 28px;
          }
      }
      .m-tabbar-item-text{
          display: block;
          font-size: 10px;
          color:#949494;
      }
      &.is-active{
          .m-tabbar-item-text{
              color: #42bd56;
          }
      }
  }
}
</style>

布局大功告成~~~~

前面我们说的是,通过组件的方式来实现这个app。

如果像上面代码这样的话肯定是不行的!既然我们大体布局已经写好了,现在就可以通过组件的方式来调用。当然我们还要改造一下代码。

先在components文件夹下面,新建两个组件,通过这两个组件来组合实现我们底部的tab组件:

一个是tabbar-item.vue,实现子组件的item项,

tabbar-item.vue

<template>
    <a class="m-tabbar-item" >
        <slot name="icon-normal"></slot>
        <slot></slot>
    </a>
</template>

<style lang="less">
.m-tabbar-item{
    flex: 1;
    text-align: center;
    .m-tabbar-item-icon{
        display: block;
        padding-top: 2px;
        img{
            width: 28px;
            height: 28px;
        }

    }
    .m-tabbar-item-text{
        display: block;
        font-size: 10px;
        color:#949494;
    }
    &.is-active{
        .m-tabbar-item-text{
            color: #42bd56;
        }
    }
}
</style>

一个是tabbar.vue,实现tab的外层容器,

tabbar.vue

<template>
    <div class="m-tabbar">
       <slot></slot>
    </div>
</template>
<style lang="less">
.m-tabbar{
    display: flex;
    flex-direction: row;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    height: 50px;
    background: #fff;
    border-top: 1px solid #e4e4e4;
}
</style>

在Index.vue中组合这两个组件,实现tab组件效果

<template>
  <div>
    <m-tabbar>
      <m-tabbar-item id='tab1'>
        < img src="../assetsic_tab_home_normal.png" alt="ca88会员登录中心 47" slot="icon-normal"> 
        首页
      </m-tabbar-item>
      <m-tabbar-item id='tab2'>
        < img src="../assetsic_tab_subject_normal.png" alt="ca88会员登录中心 48" slot="icon-normal"> 
        书影音
      </m-tabbar-item>
      <m-tabbar-item id='tab3'>
        < img src="../assetsic_tab_status_normal.png" alt="ca88会员登录中心 49" slot="icon-normal"> 
        广播
      </m-tabbar-item>
      <m-tabbar-item id='tab4'>
        ![](../assetsic_tab_group_normal.png) 
        小组
      </m-tabbar-item>
       <m-tabbar-item id='tab5'>
        < img src="../assetsic_tab_profile_normal.png" alt="ca88会员登录中心 50" slot="icon-normal"> 
        我的
      </m-tabbar-item>
    </m-tabbar>
  </div>
</template>

<script>
  import mTabbar from '../components/tabbar'
  import mTabbarItem from '../components/tabbar-item'
  export default {
    name: 'index',
    components: {
      mTabbar,
      mTabbarItem
    }
  }
</script>

完成的效果。

ca88会员登录中心 51

Paste_Image.png


光有一个死的界面,没有点击切换的效果怎么能行?

以下我们通过vue使用自定义事件的表单输入组件来实现点击切换的效果。


先给Index.vue里面的tab组件加上v-model
来进行数据双向绑定,通过select来达到选择item,在item里面再添加一个选中的active图片

<template>
  <div>
    测试
    <m-tabbar v-model="select">
      <m-tabbar-item id='tab1'>
        < img src="../assetsic_tab_home_normal.png" alt="ca88会员登录中心 52" slot="icon-normal"> 
        < img src="../assetsic_tab_home_active.png" alt="ca88会员登录中心 53" slot="icon-active"> 
        首页
      </m-tabbar-item>
      <m-tabbar-item id='tab2'>
        < img src="../assetsic_tab_subject_normal.png" alt="ca88会员登录中心 54" slot="icon-normal"> 
        < img src="../assetsic_tab_subject_active.png" alt="ca88会员登录中心 55" slot="icon-active"> 
        书影音
      </m-tabbar-item>
      <m-tabbar-item id='tab3'>
        < img src="../assetsic_tab_status_normal.png" alt="ca88会员登录中心 56" slot="icon-normal"> 
        < img src="../assetsic_tab_status_active.png" alt="ca88会员登录中心 57" slot="icon-active"> 
        广播
      </m-tabbar-item>
      <m-tabbar-item id='tab4'>
        < img src="../assetsic_tab_group_normal.png" alt="ca88会员登录中心 58" slot="icon-normal"> 
        < img src="../assetsic_tab_group_active.png" alt="ca88会员登录中心 59" slot="icon-normal"> 
        小组
      </m-tabbar-item>
       <m-tabbar-item id='tab5'>
        < img src="../assetsic_tab_profile_normal.png" alt="ca88会员登录中心 60" slot="icon-normal"> 
        < img src="../assetsic_tab_profile_active.png" alt="ca88会员登录中心 61" slot="icon-normal"> 
        我的
      </m-tabbar-item>
    </m-tabbar>
  </div>
</template>

<script>
  import mTabbar from '../components/tabbar'
  import mTabbarItem from '../components/tabbar-item'
  export default {
    name: 'index',
    components: {
      mTabbar,
      mTabbarItem
    },
    data() {
      return {
        select:"tab1"
      }
    }
  }
</script>

tabbar.vue里面通过props来传递数据vaule

<template>
    <div class="m-tabbar">
       <slot></slot>
    </div>
</template>
<script>
    import mTabbarItem from './tabbar-item';
    export default {
        props: ['value']
    }
</script>
<style lang="less">
.m-tabbar{
    display: flex;
    flex-direction: row;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    overflow: hidden;
    height: 50px;
    background: #fff;
    border-top: 1px solid #e4e4e4;
}
</style>

tabbar-item.vue组件:根据父组件的value和当前组件的id判断是否为选中状态,通过
$parent.$emit(‘input’,id) –
触发父组件的自定义事件,添加选中的图片,根据isActive来显示隐藏

<template>
    <a class="m-tabbar-item" :class="{'is-active':isActive}" @click="$parent.$emit('input',id)">
        <slot name="icon-normal"></slot>
        <slot name="icon-active"></slot>
        <slot></slot>
    </a>
</template>
<script>
    export default{
        props: ['id'],
        computed: {
           isActive(){
               if(this.$parent.value===this.id){
                   return true;
               }
           }
        }
    }
</script>
<style lang="less">
.m-tabbar-item{
    flex: 1;
    text-align: center;
    .m-tabbar-item-icon{
        display: block;
        padding-top: 2px;
        img{
            width: 28px;
            height: 28px;
        }

    }
    .m-tabbar-item-text{
        display: block;
        font-size: 10px;
        color:#949494;
    }
    &.is-active{
        .m-tabbar-item-text{
            color: #42bd56;
        }
    }
}
</style>

大功告成,tabbar组件就完成了~

ca88会员登录中心 62

录像1_转.gif

感谢饿了么团队给我们带来了这么好的ui组件!

git地址:
https://github.com/MrMoveon/doubanApp

第一章
源码下载
链接:http://pan.baidu.com/s/1qYlR8g0
密码:9yph

下载安装

npm install
npm run dev

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图