//需要自己弄雪碧图

<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. 非CI执行Allure2 trends空白问题

    问题描述 未使用CI工具集成Aluure运行测试用例并生成Allure报告,多次执行后,trends是空白的,未展示出期望的趋势图 问题原因非CI工具,是通过命令 allure serve 展示报告 ...

  2. OfficeOpenXml:World、Excel导出导入库

    基础库:EPPlus 根据模版:OfficeOpenXml.Entends

  3. 32位ubuntu16.4编译android4.1.1

    安装所需库 sudo apt-get install build-essential sudo apt-get install make sudo apt-get install gcc sudo a ...

  4. 《linux就该这么学》第三节课 第二节命令笔记

    命令笔记 (随笔原创,借鉴请修改) linux系统中一切都是文件 2.4  系统状态的命令:  ifconfig   :    查看系统网卡信息,包括网卡名称,ip地址,掩码,mac地址,收到数据包大 ...

  5. 中文WebFont解决方案Font-Spider(字蛛)

    我们在日常需求中,经常会碰到视觉设计师对某个中文字体效果非常坚持的情况,因为页面是否高大上,字体选择是很重要的一个因素,选择合适的字体可以让页面更优雅.面对这种问题,我们通常以下方式来进行设计还原: ...

  6. UI框架搭建DAY2

    今天的主要任务是完善NormalPanel, 搭建PopupPanel. 在编写PanelManager的过程中,发现了一个bug.昨天把panelPath直接传给了ResourceManager.G ...

  7. xshell 利用密钥登录

    第一步:新建用户密钥 第二步:选择加密方式,密钥长度越长越安全 第三步:设置密钥名称和密码(密码可为0,这里是密钥的密码非服务器密码) 第四步:保存公钥到本地 第五步:导出私钥到本地 第六步:将公钥和 ...

  8. 事件冒泡以及onmouseenter 和 onmouseover 的不同

    1. onmouseenter onmouseenter 事件在鼠标指针移动到元素上时触发. 该事件通常与 onmouseleave 事件一同使用, 在鼠标指针移出元素上时触发. onmouseent ...

  9. django+nginx+python3 生产环境部署

    一.安装python基础环境 1.安装各类基础模块 yum install  gcc-c++ wget openssl-devel bzip2-devel expat-devel gdbm-devel ...

  10. SQL语句汇总(二)——数据修改、数据查询

    SQL语句第二篇,不说废话直接开始吧. 首先创建一张表如下,创建表的方法在上篇介绍过了,这里就不再赘述. 添加新数据: INSERT INTO <表名> (<列名列表>) VA ...