//需要自己弄雪碧图

<template>
<div class="tab" id="tab">
<router-link to="/home" tag="div" class="tab-item">
<div class="tab-link">
<i class="icon icon1"></i>
<p class="app-text">首页</p>
</div>
</router-link>
<router-link to="/finder" class="tab-item">
<div class="tab-link">
<i class="icon icon2"></i>
<p class="app-text">发现</p>
</div>
</router-link>
<router-link to="/fashionStar" class="tab-item">
<div class="tab-link">
<i class="icon icon3"></i>
<p class="app-text">时尚明星</p>
</div>
</router-link>
<router-link to="/personal" class="tab-item">
<div class="tab-link">
<i class="icon icon1"></i>
<p class="app-text f32">个人中心</p>
</div>
</router-link>
</div>
</template> <script type="text/ecmascript-6">
export default{
data(){
return{}
}
}
</script> <style lang="scss">
#tab{
display: flex;position: fixed;bottom:0;width:100%;border-top:1px solid #ededed;
height:1rem;background-color: #fff;
.tab-item{
-webkit-flex: 1;
flex: 1;
width:33%;
/*border-right: 1px solid #ededed;*/
margin-top: 0.1rem;
}
a{border-bottom: 0;color:#333;text-decoration: none;}
.icon:before{content: ''; display: inline-block;
background-image:url('../../../static/cjc_icon.png');
background-size: 1.3rem 2.2rem;width:0.4rem;height:0.4rem;}
.icon1:before{background-position: -0.7rem 0;}
.icon2:before{background-position: -0.7rem -0.58rem;}
.icon3:before{background-position: -0.7rem -1.18rem;}
.icon4:before{background-position: -0.7rem 0;}
.tab-link{
color:#999;
font-size: 0.28rem;
}
.router-link-active{
.tab-link{
color:#29adfd;
font-size: 0.28rem;
}
.icon1:before{background-position: -0.03rem 0;}
.icon2:before{background-position: -0.03rem -0.58rem;}
.icon3:before{background-position: -0.03rem -1.18rem;}
.icon4:before{background-position: -0.03rem 0;}
}
}
</style>

vue项目中的tab页实现的更多相关文章

  1. vue项目中,单页图片过多,使用懒加载

    最近做项目,一页图片很多,加载的时候效果很差. 通过学习借鉴其他大神的方法,使用了插件vue-lazyload,使用这个插件,界面更美观了,加载的效果好起来. 安装 npm i vue-lazyloa ...

  2. Vue项目中实现tab栏和步骤条的数据联动

    也就是tab栏切换步骤条随之变化 <template>   <div>     <!-- 面包屑导航  -->     <el-breadcrumb sepa ...

  3. vue项目中vant tab改变标签颜色

    找了几种方法,只有下面这个方法是生效的: <van-tabs v-model="active" sticky title-active-color="#144a9e ...

  4. vue项目中阻止浏览器返回上一页

    vue项目中在某个页面阻止浏览器返回上一页,适用移动端.PC端. 使用场景例如: 首页 与 A页面     来回跳转,那样点击浏览器返回时也会来回跳转,本想当页面在首页的时候就不再返回了,所以这个时候 ...

  5. 更换vue项目中标签页icon

    问题:在vue项目中, 需要将标签上的icon换成自己所需的,发现在更换了public/favicon.ico后,没有生效,依旧是原来Vue的icon. 解决办法:在vue.config.js中,修改 ...

  6. 去除vue项目中的#及其ie9兼容性

    一.如何去除vue项目中访问地址的# vue2中在路由配置中添加mode(vue-cli创建的项目在src/router/index.js) export default new Router({ m ...

  7. vue项目中遇到的那些事。

    前言 有好几天没更新文章了.这段实际忙着做了一个vue的项目,从 19 天前开始,到今天刚好 20 天,独立完成. 做vue项目做这个项目一方面能为工作做一些准备,一方面也精进一下技术. 技术栈:vu ...

  8. 解决在Vue项目中时常因为代码缩进导致页面报错的问题

    前言 如果我们初次使用vue-cli来构建单页SPA应用,在撸代码的过程中有可能会遇到这种因为代码缩进导致 页面报错的问题,导致我们烦不胜烦.接下来我们就来看一看如何解决这个小问题... erro原因 ...

  9. dom元素的tabindex属性介绍及在vue项目中的应用

    dom元素的tabindex属性介绍及在vue项目中的应用 tabindex属性作用 让普通dom元素变为可聚焦的元素 让普通dom元素可以参与顺序键盘导航(通常使用Tab键,因此得名). tabin ...

随机推荐

  1. es6阮一峰读后感

    不经意间看了你一眼(阮一峰的es6读后感)我自己常用的 字符串篇:ES6 为字符串添加了遍历器接口(详见<Iterator>一章),使得字符串可以被for...of循环遍历.只要有遍历器接 ...

  2. arithmetic-02

    Java collection API 中实现的表ADT: collection<E>接口实现继承iterable<E>接口,实现iterable接口的类可以使用增强for循环 ...

  3. HTML5 元素属性介绍

    HTMLElement 表示所有的 HTML 元素. 这里将以事件属性和非事件属性的分类进行介绍. 事件属性大多继承自GlobalEventHandlers,非事件属性大多继承自Element. 菜单 ...

  4. CentOS 7 NAT模式LVS搭建

    NAT模式下 , 调度器需要有两个IP , 一个公网IP一个内网IP , web服务器只需要内网IP 调度器LB : 192.168.94.11(内网IP)  192.168.29.11 (仅主机模式 ...

  5. 浏览器 User-Agent相关知识

    文章引用链接 http://www.360doc.com/content/12/1012/21/7662927_241124973.shtml

  6. Eureka 参数调优

    常见问题 为什么服务下线了,Eureka Server 接口返回的信息还会存在. 为什么服务上线了,Eureka Client 不能及时获取到. 为什么有时候会出现如下提示: EMERGENCY! E ...

  7. Java继承和组合

    为了保证父类有良好的封装性,不会被子类随意修改,设计父类通常应该遵循以下规则: 1.尽量隐藏父类的内部数据,尽量把父类的所有成员变量设置为 private 访问类型,不要让子类直接访问父类的成员变量: ...

  8. latch release ......

    MainControl_cfg.c brings error:  not defined. /* e_TIMER_MCtrlLatchReleaseTime  */     TIMER_ID_MCtr ...

  9. python学习笔记:深浅拷贝的使用和原理

    在理解深浅拷贝之前,我们先熟悉下变量对象和数据类型 1.变量和对象 变量-引用-对象(可变对象,不可变对象) 在python中一切都是对象,比如[1,2],'hello world',123,{'k1 ...

  10. 使用JS调用手机本地摄像头或者相册图片识别二维码/条形码

    接着昨天的需求,不过这次不依赖微信,使用纯js唤醒手机本地摄像头或者选择手机相册图片,识别其中的二维码或者是条形码.昨天,我使用微信扫一扫识别,效果超棒的.不过如果依赖微信的话,又怎么实现呢,这里介绍 ...