vue项目中的tab页实现

//需要自己弄雪碧图

<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>

转载于:https://www.cnblogs.com/BlogRegisterAspx/p/8393983.html

vue项目中的tab页实现相关推荐

vue项目中阻止浏览器返回上一页
vue项目中在某个页面阻止浏览器返回上一页,适用移动端.PC端. 使用场景例如: 首页与 A页面来回跳转,那样点击浏览器返回时也会来回跳转,本想当页面在首页的时候就不再返回了,所以这个时候 ...
vue 项目中页面打印实现（去除页眉页脚）
vue 项目中页面打印实现参考文章: 13 Paged media 项目描述: 背景:框架vue.组件 element-ui,已有一个在用的后台管理系统需求:现需在列表页面添加按钮-----打印协 ...
vue项目中如何利用lodop控件实现多页打印
针对windows环境下的vue项目中如何利用lodop控件实现打印的功能,不支持mac环境下载安装首先去lodop官网下载中心下载相关的包,完成安装重点关注前四个文件,安装第一个文件,在第二个 ...
vue 项目中，动态修改浏览器标签页的图标
vue 项目中,动态修改浏览器标签页的图标需求: 项目中有一个入口可以修改平台的名称和图标,图标同步展示为浏览器页签的图标实现: 1.找到项目中的app.vue 文件,动态创建link标签,调用后 ...
Vue项目中ESLint配置（VScode）
Vue项目中ESLint配置(VScode) 1.VScode的配置格式化代码 1.1下载eslint插件 1.2配置setting.json 打开左上角文件-首选项-设置,在设置中搜索eslint, ...
canvas java 上传截图_在Vue项目中使用html2canvas生成页面截图并上传
使用方法项目中引入 npm install html2canvas html代码 //html代码 js代码 // 引入html2canvas import html2canvas from 'ht ...
vue项目中开启Eslint碰到的一些问题及其规范
eslint是一种代码风格管理的工具,可以制定一些代码编写规范,在vue项目中经常用到 1.'layer' is defined but never used 这是定义了一个变量但是未使用到该变量 ...
怎么改vue项目的标题_如何动态修改Vue项目中的页面title
前言:在项目中,我们有时候需要修改Vue项目中的页面title. 方法有两种,①如果需要动态设置页面的title,可以直接使用document.title:②可以使用router的beforeEach ...
Vue项目中如何设置动态的TDK
TDK是什么 TDK就是网站的标题(title).描述(description)和关键词(keyword) TDK在哪里上面大佬对TDK的概念解释的很全面,但是在网页中的TDK在哪里呢,作为开发人员 ...

vue项目中的tab页实现

vue项目中的tab页实现相关推荐

最新文章

热门文章