1.Footer组件

Footer.vue

<!-- 底部 footer -->
<template>
<div>
<tabbar>
<!-- 综合 -->
<tabbar-item :link="{path:'/'}" selected>
<img slot="icon" src="../assets/img/ic_nav_news_normal.png">
<img slot="icon-active" src="../assets/img/ic_nav_news_actived.png">
<span slot="label">综合</span>
</tabbar-item>
<!-- 动弹 -->
<tabbar-item :link="{path:'/'}">
<img slot="icon" src="../assets/img/ic_nav_tweet_normal.png">
<img slot="icon-active" src="../assets/img/ic_nav_tweet_actived.png">
<span slot="label">动弹</span>
</tabbar-item>
<!-- 中间图标 -->
<tabbar-item :link="{path:'/'}">
<img slot="icon" src="../assets/img/ic_nav_add_normal.png" height="40" width="40">
</tabbar-item>
<!-- 发现 -->
<tabbar-item :link="{path:'/'}">
<img slot="icon" src="../assets/img/ic_nav_discover_normal.png">
<img slot="icon-active" src="../assets/img/ic_nav_discover_actived.png">
<span slot="label">发现</span>
</tabbar-item>
<!-- 我的 -->
<tabbar-item :link="{path:'/mySettings'}">
<img slot="icon" src="../assets/img/ic_nav_my_normal.png">
<img slot="icon-active" src="../assets/img/ic_nav_my_pressed.png">
<span slot="label">我的</span>
</tabbar-item>
</tabbar>
</div>
</template> <script>
import { Tabbar, TabbarItem } from 'vux' export default {
name: 'AppFooter',
components: {
Tabbar,
TabbarItem
},
data(){
return {
index: 0
}
}
}
</script>

2.页面调用

App.vue

<template>
<div id="app">
<!-- 视图层 -->
<router-view></router-view>
<!-- 底部选项卡 -->
<app-footer></app-footer>
</div>
</template> <script>
import AppFooter from './components/Footer' export default {
components: {
AppFooter
}
}
</script> <style lang="less">
@import '~vux/src/styles/reset.less'; body {
background-color: #fbf9fe;
line-height: 1.2;
}
</style>

3.效果图

vue2.0 + vux (二)Footer组件的更多相关文章

  1. Vue2.0表单校验组件vee-validate的使用

    vee-validate使用教程 *本文适合有一定Vue2.0基础的同学参考,根据项目的实际情况来使用,关于Vue的使用不做多余解释.本人也是一边学习一边使用,如果错误之处敬请批评指出* 一.安装 n ...

  2. Vue2.0的变化 ,组件模板,生命周期,循环,自定义键盘指令,过滤器

    组件模板: 之前: <template> <h3>我是组件</h3><strong>我是加粗标签</strong> </templat ...

  3. Webpack+vue2.0如何注册全局组件 (01)

    Part 1, 问题: webpack + vue2.0框架中,如何在入口js中注册组件? 就是在一个月以前,匆匆闯入vuejs这个社群,基本了解了vuejs的一些基础特性和语法.笔者兴致勃勃地开始想 ...

  4. Vue2.0中的transition组件

    组件的过度 Vue1.0中transition做为标签的行内属性被vue支持.但在Vue2.0中.Vue放弃了旧属性的支持并提供了transition组件,transition做为标签被使用. 使用t ...

  5. Vue2.0如何实现父组件与子组件之间的事件发射与接收

    关于vue2.0的事件发射和接收,大家都知道$dispatch和$broadcast在vue2.0已经被弃用了,取而代之的是更加方便快捷的方式,使用事件中心,组件通过它来互相通信,不管组件在哪一个层都 ...

  6. 在vue2.0中引用element-ui组件库

    element-ui是由饿了么团队开发的一套基于 Vue 2.0 的桌面端组件库. 官网:http://element.eleme.io/ 安装 npm i element-ui -S 引用完整的el ...

  7. vue2.0 + vux (一)Header 组件

    1.main.js import Vue from 'vue' import FastClick from 'fastclick' import VueRouter from 'vue-router' ...

  8. vue2.0 + vux (六)NewsList 资讯页 及 NewsDetail 资讯详情页

    设置代理,避免出现跨域问题 /*设置代理,避免出现跨域问题*/ proxyTable: { '/api':{ target: 'https://www.oschina.net/action/apiv2 ...

  9. vue2.0的瀑布流组件-使用说明

    做一个小项目,需要瀑布流,就选他了,先看看效果 使用瀑布流布局组件:vue-waterfall-easy 下载引入: 方式一:直接从git上复制组件的完整代码,引入vue组件文件即可 import v ...

随机推荐

  1. day01_09.你已学会编程

    目前你已经学会编程: 学会变量,运算,控制,你就学会了编程,我擦?真的,假的? 1.打印1-100,自己试试看呗 <?php $num = 1; while($num<=100){ ech ...

  2. niubi-job:一个分布式的任务调度框架设计原理以及实现

    niubi-job的框架设计是非常简单实用的一套设计,去掉了很多其它调度框架中,锦上添花但并非必须的组件,例如MQ消息通讯组件(kafka等).它的框架设计核心思想是,让每一个jar包可以相对之间独立 ...

  3. POJ 2355 Railway tickets

    Railway tickets Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 2472   Accepted: 865 De ...

  4. Python杂技

    py转exe文件 用 pyinstaller,可以把所有文件打包成一个单独的exe文件 win10X64 =>pip install pyinstaller pyinstaller [参数] [ ...

  5. 项目记事【Hibernate-1】:调用 saveOrUpdate() 方法出错

    Hibernate 版本:3.3.1 背景: 后端编辑一个对象,该对象(ProductDO)下,有一个另一个自定义对象(ProductLiabilityDO)的 OneToMany 关系,如下: @O ...

  6. 【bzoj3698】XWW的难题 有上下界最大流

    题目描述 XWW是个影响力很大的人,他有很多的追随者.这些追随者都想要加入XWW教成为XWW的教徒.但是这并不容易,需要通过XWW的考核.XWW给你出了这么一个难题:XWW给你一个N*N的正实数矩阵A ...

  7. 【Luogu】P2596书架(Splay)

    题目链接 通过这题我加深了对Splay的理解,原来Splay的子树也是可以接来接去接到别的点上的,而不是只能旋转qwq 具体接的办法就是swap大法. 对于Top操作我们把当前节点Splay到根,然后 ...

  8. wampSever的mysql操作

    单击wampserver图标,选择mysql console 输入密码 123qwe,root用户默认密码为空 mysql客户端管理工具使用wampserver自带的phpmyadmin

  9. wifi hand

    wpa airmon-ng start wlan0airodump-ng -c 6 -w logs  wlan0monaireplay-ng -0 5 -a ap'mac -c clink'mac w ...

  10. 博彩游戏(tyvj 1519)

    背景 Bob最近迷上了一个博彩游戏…… 描述 这个游戏的规则是这样的:每花一块钱可以得到一个随机数R,花上N块钱就可以得到一个随机序列:有M个序列,如果某个序列是产生的随机序列的子串,那么就中奖了,否 ...