//需要自己弄雪碧图

<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. 【LeetCode每天一题】Word Search(搜索单词)

    Given a 2D board and a word, find if the word exists in the grid.The word can be constructed from le ...

  2. python进阶(一) 多进程并发机制

    python多进程并发机制: 这里使用了multprocessing.Pool进程池,来动态增加进程 #coding=utf-8 from multiprocessing import Pool im ...

  3. Deeplab v3+的结构的理解,图像分割最新成果

    Deeplab v3+ 结构的精髓: 1.继续使用ASPP结构, SPP 利用对多种比例(rates)和多种有效感受野的不同分辨率特征处理,来挖掘多尺度的上下文内容信息. 解编码结构逐步重构空间信息来 ...

  4. 初识github之项目创建

    登录github后,点击左上角logo章鱼猫,进入主页面,点击start a project ,此时进入新建项目的页面.在repostory name这一栏上写下你想创建的项目的名字.然后在descr ...

  5. CentOS 7 NAT模式LVS搭建

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

  6. 【2017-05-02】winform弹出警告框选择性操作、记事本制作、对话框控件和输入输出流

    一.winform弹出警告框选择性操作 MessageBox.Show()返回一个枚举类值(第一个参数为弹出窗口显示的内容,第二个参数为弹出窗口的标题,第三个参数为弹出窗口包含的按钮) 先新建一个变量 ...

  7. 用javaScript获取页面元素值

    用JavaScript获取页面元素常见的三种方法:                                                           getElementById() ...

  8. Dockerfile的HEALTHCHECK指令

    容器实例的状态虽然是up,但不能保证里面的进程一定是监控的.我门可以借助HEALTHCHECK指令来做监控状态检查 HEALTHCHECK指令有两种形式: HEALTHCHECK [OPTIONS] ...

  9. Linux LVM卷组管理

    Linux LVM卷组管理 由于传统的磁盘管理不能对磁盘进行磁盘管理,因此诞生了LVM技术,LVM技术最大的特点就是对磁盘进行动态管理. 由于LVM的逻辑卷的大小更改可以进行动态调整,且不会出现丢失数 ...

  10. CSS3 3D酷炫立方体变换动画

    我爱撸码,撸码使我感到快乐! 大家好,我是Counter,本章微博主要利用了CSS3的一些新特性, 主要用到关键帧来使3D图形运动起来,涉及到了一些抽象的思想,立体的想象. 先给大家看看完成的效果,代 ...