2-vuejs2.0实战:仿豆瓣app项目,创建组件header,tabbar路由跳转
2017-05-22 10:34
736 查看
上一章有童鞋提到为什么不通过路由的方式来跳转?其实我想说的是,这个分享才刚刚开始,大家不要着急!这一章节我们将带大家完成,创建header组件,以及tabbar的路由跳转。
https://segmentfault.com/a/1190000008491055
vue专题目录:
1-vuejs2.0实战:仿豆瓣app项目,创建自定义组件tabbar
我们先来分析一下豆瓣app:
首页的header背景是绿色的,并且有一个搜索框,其他页面都是灰色的背景,在header的左侧,是一个返回按钮,右侧,有分享或者评论等图标,中间就是header的标题。我们先不做有搜索框的header。
我们先在components文件中创建一个header.vue文件,并且在less文件里新建一个颜色变量var.less(统一管理app的颜色,保持统一),我们先将有其他元素的组件的大致框架,以及样式先写出来。然后在index.vue里面引入。
下图就是我们完成后的截图:
is-bg:是否显示背景色,默认是绿色is-fixed:是否显示在顶部
去掉is-bg,显示白色背景的header组件
由于上一章tarbar组件没有用到var.less,那么在这里也统一改一下
如果我们需要更换整个app的颜色,只需要在var.less更改相应的变量就可以了。例如:
改成黄色
改成红色
是不是非常的方便!!!
接下来我们就来把header改造成可以配置属性的组件,可以传递props(title,fixed,bg),
大功告成!我们就来调用吧!
上一章我们只完成了tabbar点击改变颜色,那么如何通过路由来进行跳转页面呢?
我们先新建底部tabbar的路由页面,豆瓣app这个项目说大不大说小也不小,为了规划好结构,我们将每一个路由都新建一个文件夹,然后在文件夹里面,新建这个页面。在每个页面都添加不同的header组件,如图所示:
然后在每一个路由页面里面,我们都添加上header组件。拥有header组件的示例:
路由的页面完成后我们就需要在router文件夹下面的index.js里面,来配置页面路由。如下:
我们可以在浏览器输入配置的这个路由地址来访问这个页面是否存在。如果不存在详细检查路径是否正确。
接下来我们就来改造tabbar实现路由跳转。我们先将index.vue里的tabbar组件移入到app.vue里面,并且将每一个id改成对应的路由,添加一个isRouter属性,来判断当前item是否是路由跳转。然后在tabbar-item.vue里我们在props添加isRouter,click点击跳转的方法放到methods里面,并且根据传递的isRouter判断当前是否通过路由跳转
路由跳转就完成了,如图:
Git地址:
https://github.com/MrMoveon/d…
第二章源码
链接: http://pan.baidu.com/s/1kUElWX5 密码: sp4i
vue专题目录:
1-vuejs2.0实战:仿豆瓣app项目,创建自定义组件tabbar
https://segmentfault.com/a/1190000008491055
vue专题目录:
1-vuejs2.0实战:仿豆瓣app项目,创建自定义组件tabbar
创建header组件
我们先来分析一下豆瓣app:首页的header背景是绿色的,并且有一个搜索框,其他页面都是灰色的背景,在header的左侧,是一个返回按钮,右侧,有分享或者评论等图标,中间就是header的标题。我们先不做有搜索框的header。
我们先在components文件中创建一个header.vue文件,并且在less文件里新建一个颜色变量var.less(统一管理app的颜色,保持统一),我们先将有其他元素的组件的大致框架,以及样式先写出来。然后在index.vue里面引入。
//var.less //APP默认颜色 @defaultColor:#42bd56; //header @headerBg:@defaultColor; @headerDefaultColor:rgb(73,73,73); //tabbar @tabbarActiveColor: @defaultColor;
//header.vue <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="../../assets/images/ic_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>
下图就是我们完成后的截图:
is-bg:是否显示背景色,默认是绿色is-fixed:是否显示在顶部
去掉is-bg,显示白色背景的header组件
由于上一章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(73,73,73); //tabbar @tabbarActiveColor: @defaultColor;
改成红色
//var.less //APP默认颜色 @defaultColor:#ff0000; //header @headerBg:@defaultColor; @headerDefaultColor:rgb(73,73,73); //tabbar @tabbarActiveColor: @defaultColor;
是不是非常的方便!!!
接下来我们就来把header改造成可以配置属性的组件,可以传递props(title,fixed,bg),
<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>
大功告成!我们就来调用吧!
<m-header title="豆瓣app" :bg="true"> <a href="javascript:;" slot="left">< img class="m-icon-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 class="m-icon-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 class="m-icon-img" src="../../assets/images/ic_bar_back_green.png"/>返回</a> <a href="javascript:;" slot="right">< img class="m-icon-img margin-right-10" src="../../assets/images/ic_actionbar_search_icon.png"/></a> <a href="javascript:;" slot="right">< img class="m-icon-img" src="../../assets/images/ic_chat_green.png"/></a> </m-header>
改造tabbar,完成路由跳转
上一章我们只完成了tabbar点击改变颜色,那么如何通过路由来进行跳转页面呢?我们先新建底部tabbar的路由页面,豆瓣app这个项目说大不大说小也不小,为了规划好结构,我们将每一个路由都新建一个文件夹,然后在文件夹里面,新建这个页面。在每个页面都添加不同的header组件,如图所示:
然后在每一个路由页面里面,我们都添加上header组件。拥有header组件的示例:
Mine.vue
<template> <div> <m-header title="我的" fixed> <a href="javascript:;" slot="right">< img class="m-icon-img margin-right-10" src="../../assets/images/ic_actionbar_search_icon.png"/></a> <a href="javascript:;" slot="right">< img class="m-icon-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.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判断当前是否通过路由跳转
App.vue
<template> <div id="app"> <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="" slot="icon-normal"> < img src="./assets/images/ic_tab_home_active.png" alt="" slot="icon-active"> 首页 </m-tabbar-item> <m-tabbar-item id='AudioBook' isRouter> < img src="./assets/images/ic_tab_subject_normal.png" alt="" slot="icon-normal"> < img src="./assets/images/ic_tab_subject_active.png" alt="" slot="icon-active"> 书影音 </m-tabbar-item> <m-tabbar-item id='Broadcast' isRouter> < img src="./assets/images/ic_tab_status_normal.png" alt="" slot="icon-normal"> < img src="./assets/images/ic_tab_status_active.png" alt="" slot="icon-active"> 广播 </m-tabbar-item> <m-tabbar-item id='Group' isRouter> < img src="./assets/images/ic_tab_group_normal.png" alt="" slot="icon-normal"> < img src="./assets/images/ic_tab_group_active.png" alt="" slot="icon-active"> 小组 </m-tabbar-item> <m-tabbar-item id='Mine' isRouter> < img src="./assets/images/ic_tab_profile_normal.png" alt="" slot="icon-normal"> < img src="./assets/images/ic_tab_profile_active.png" alt="" 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>
tabbar-item.vue
<template> <a class="m-tabbar-item" :class="{'is-active':isActive}" @click="goToRouter"> <span class="m-tabbar-item-icon" v-show="!isActive"><slot name="icon-normal"></slot></span> <span class="m-tabbar-item-icon" v-show="isActive"><slot name="icon-active"></slot></span> <span class="m-tabbar-item-text"><slot></slot></span> </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>
路由跳转就完成了,如图:
Git地址:
https://github.com/MrMoveon/d…
第二章源码
链接: http://pan.baidu.com/s/1kUElWX5 密码: sp4i
vue专题目录:
1-vuejs2.0实战:仿豆瓣app项目,创建自定义组件tabbar
相关文章推荐
- 2-vuejs2.0实战:仿豆瓣app项目,创建组件header,tabbar路由跳转
- 2-vuejs2.0实战:仿豆瓣app项目,创建组件header,tabbar路由跳转
- vuejs2.0实战:仿豆瓣app项目,创建自定义组件tabbar
- 1-vuejs2.0实战:仿豆瓣app项目,创建自定义组件tabbar
- 1-vuejs2.0实战:仿豆瓣app项目,创建自定义组件tabbar
- 在创建Android项目时出现appcompat_v7中的引用的组件出现No resource found
- vue.js+koa2项目实战(二)创建 HeadBar 组件
- 实战使用Axure设计App,使用WebStorm开发(2) – 创建 Ionic 项目
- 艾伟_转载:基于.NET平台的Windows编程实战(三)—— 项目的创建及主界面的设计
- django项目实战(1)-项目创建
- Android 桌面组件【app widget】 进阶项目--心情记录器
- Android 桌面组件【app widget】 进阶项目--心情记录器
- Sencha Touch2 项目实战(App history篇1)
- 软件工程的团队项目之豆瓣app(WP7)的NABC分析
- 基于.NET平台的Windows编程实战(三)—— 项目的创建及主界面的设计
- EXTJS项目实战经验总结一:日期组件的change事件:
- 搭建Google App Engine开发环境以及创建第一个项目
- 艾伟:基于.NET平台的Windows编程实战(三)—— 项目的创建及主界面的设计
- Android 桌面组件【app widget】 进阶项目--心情记录器
- Android 去掉新版ADT创建项目时出现appcompat_v7