vue 底部bottomnav
<template>
<div id="foot">
<div class="tabBar">
<div class="menu"><p class="cont"> <router-link to='/'><img src="./img/tabBar1.png" alt="" class="src" height="47px" ></router-link><span v-bind:class="{active:routerCurrent==1}"> 首页</span> </p></div>
<div class="menu"><p class="cont"> <router-link to='/SignIn'><img src="./img/tabBar2.png" alt="" class="src" height="47px"></router-link><span v-bind:class="{active:routerCurrent==2}"> 签到</span> </p></div>
<div class="menu"><p class="cont"> <router-link to='/prize'><img src="./img/tabBar3.png" alt="" class="src" height="47px"></router-link><span v-bind:class="{active:routerCurrent==3}"> 福利</span> </p></div>
<div class="menu"><p class="cont"> <router-link to='/my'><img src="./img/tabBar4.png" alt="" class="src" height="47px"></router-link><span v-bind:class="{active:routerCurrent==4}"> 我的</span> </p></div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
routerCurrent :1 ,
}
},
created () {
this.getRouter();
},
watch: {
$route() {
this.getRouter();
}
},
methods: {
//获取当前处于哪一个路由
getRouter() {
if (this.$route.path == "/") {
this.routerCurrent = 1;
}
if (this.$route.path == "/SignIn") {
this.routerCurrent = 2;
}
if (this.$route.path == "/prize") {
this.routerCurrent = 3;
}
if (this.$route.path == "/my") {
this.routerCurrent = 4;
}
console.log(this.$route.path);
},
},
mounted () { } }
</script>
<style scoped lang="scss">
#foot{
height: 1.47rem;
position: fixed;
width: 100vw;
background: #fff;
bottom: 0;
.active{
color: #e4007f;
}
.tabBar{
margin: 0 0.2rem;
height:100%;
display: flex;
text-align:center;
display:-webkit-flex;
flex-wrap:nowrap;
flex-direction:reverse;
justify-content:space-between;
.menu{
a{
display: block;
margin: 0.1rem auto -0.25rem;
}
span{
font-size: 16px;
}
} }
} </style>
上面的是组件,下面的是调用
<template>
<div id="my">
<div class="head"></div>
<div class="pic">
<div class="cover">
<i class="el-icon-message"></i>
</div>
</div>
<!-- 底部nav -->
<foot :parentMessage="routerPath"></foot>
</div>
</template>
<script>
import foot from '@/components/foot/foot' export default {
data(){
return{
routerPath:''
}
},
components: {
foot
},
mounted () {
this.routerPath=this.$route.path
// console.log(this.$route.path);background: url('../assets/img/my-bg.png') no-repeat;
} }
</script>
<style scoped lang="scss">
#my{
.pic{
height: 6.53rem;
position: relative; background-size:cover;
.cover{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 999;
background: rgba(0, 0, 0, 0.5); }
}
}
</style>
vue 底部bottomnav的更多相关文章
- vue底部导航的精准显示
让底部导航只显示在一级页面: 路由中的写法: import Vue from 'vue' import Router from 'vue-router' //import HelloWorld fro ...
- Vue——轻松实现vue底部点击加载更多
前言 需求总是不断改变的,好吧,今天就把vue如何实现逐步加载更多和分布加载更多说下,默认你知道如何去请求数据的哈 一次请求 页面 使用slice来进行限制展现从0,a的数据 <div v-fo ...
- js 仿微信投诉—引入vue.js,拆分组件为单个js
效果 页面目录 index.html <!DOCTYPE html > <html> <head> <meta charset="UTF-8&quo ...
- Vue(小案例_vue+axios仿手机app)_Vuex优化购物车功能
一.前言 1.用vuex实现加入购物车操作 2.购物车详情页面 3.点击删除按钮,删除购物详情页面里的对应商品 二.主要内容 1.用vuex加入购物车 (1)在src ...
- Vue(小案例_vue+axios仿手机app)_购物车
一.前言 1.购物车 二.主要内容 1.效果演示如下,当我们选择商品数量改变的时候,也要让购物车里面的数据改变 2.具体实现 (1)小球从上面跳到下面的效果 (2)当点击上面的“加入购物车按钮”让小球 ...
- CSS常用选择器名
一.页面结构划分 box 盒子wrap 包裹container 容器 header 头部main 主要区域footer 底部 content 内容区域banner 横幅广告区域menu 菜单 二.模块 ...
- Vue2 全家桶仿 微信App 项目,支持多人在线聊天和机器人聊天
前言 这个项目是利用工作之余写的一个模仿微信app的单页面应用,整个项目包含27个页面,涉及实时群聊,机器人聊天,同学录,朋友圈等等,后续页面还是开发中.写这个项目主要目的是练习和熟悉vue和vuex ...
- vue2.0+node.js+mongodb全栈打造商城
Github地址:https://github.com/ccyinghua/vue-node-mongodb-project 一.构建项目所用: vue init webpack vue-node-m ...
- vue2.0 仿手机新闻站(七)过滤器、动画效果
1.全局过滤器 (1)normalTime.js 自定义 将 时间戳 转换成 日期格式 过滤器 /** * 将 时间戳 转换成 日期格式 */ export const normalTime = ( ...
随机推荐
- oc75--不可变字典NSDictionary
// // main.m // NSDictionary // // #import <Foundation/Foundation.h> int main(int argc, const ...
- Android隐藏状态栏和标题栏,相当于全屏效果
隐藏标题栏需要使用预定义样式:android:theme=”@android:style/Theme.NoTitleBar”. 隐藏状态栏:android:theme=”@android:style/ ...
- IDEA Spark Streaming Kafka数据源-Consumer
import org.apache.spark.SparkConf import org.apache.spark.streaming.kafka.KafkaUtils import org.apac ...
- Mybatis 代码自动生成(generatorConfig.xml配置)
博客推荐: Mybatis最入门---代码自动生成(generatorConfig.xml配置) MyBatis Generator generatorConfig.xml配置详解 pom.xml&l ...
- MVVMLight消息通知实现机制详解(二)
接上文 MVVMLight消息通知实现机制详解(一) 该工具的内部主要逻辑是以字典模式进行储存持有订阅对象设置的传入参数Type类型.Key值.Action.Target(订阅对象本身) 在发生订阅事 ...
- POI上传Excel的小问题处理
package com.platform.utils.excel; import com.platform.utils.RRException; import org.springframework. ...
- HDU 5306 吉司机线段树
思路: 后面nlogn的部分是伪证... 大家可以构造数据证明是这是nlog^2n的啊~ 吉老司机翻车了 //By SiriusRen #include <cstdio> #include ...
- mongoDB的基本用法
一.MongoDB初识 什么是MongoDB MongoDB是一个基于分布式文件存储的数据库.由c++语言编写.旨在为web应用提供可扩展的高性能数据存储解决方案. MongoDB是一个介于关系数据库 ...
- 354 Russian Doll Envelopes 俄罗斯娃娃信封
You have a number of envelopes with widths and heights given as a pair of integers (w, h). One envel ...
- Flume 是什么?
Flume是一个分布式.可靠.和高可用的海量日志聚合的系统,支持在系统中定制各类数据发送方,用于收集数据:同时,Flume提供对数据进行简单处理,并写到各种数据接受方(可定制)的能力. 收集.聚合事件 ...