vue router仿天猫底部导航栏功能


Posted in Javascript onOctober 18, 2017

首先把天猫的导航贴出来,里面包括精选、品牌、会员、购物车、我五个导航及对应的图标。

vue router仿天猫底部导航栏功能

分析:

1、图标的获取

进入阿里巴巴矢量图标库,网址  http://www.iconfont.cn。

点击官方图标库,选择天猫图标库,选中放入购物车。

vue router仿天猫底部导航栏功能

点击添加至项目,点击创建新项目按钮,创建tianmao项目,点击确定。

vue router仿天猫底部导航栏功能vue router仿天猫底部导航栏功能

此时会有查看在线链接和下载至本地两种方式,我选择第一种,因为后期如果要添加小图标的话,只需要重新生成在线链接,然后更新link即可

vue router仿天猫底部导航栏功能

vue router仿天猫底部导航栏功能

复制链接到index.html的link标签内,具体为

<link rel="stylesheet" href="http://at.alicdn.com/t/font_443540_nvmeyfe7k3rcc8fr.css" rel="external nofollow" >

引入图标,使用<i class="icon iconfont icon-wo"></i>区别在第三个class来引入对应图标

此时所需图标处理完毕

2、创建精选、品牌、会员、购物车、我及路由导航组件Home.vue、Brand.vue、Member.vue、Cart.vue、Me.vue、Tabs.vue

使用的样式时less,如果在.vue文件中写样式,style必须写成<style lang="less" type="text/less"></style>,否则会报错

Tabs.vue

<template> 
 <div class="tabs"> 
  <!--命名路由--> 
  <ul> 
   <!--this inspection reports XML/HTML tags with missing mandatory attrbutes ,you can specify attrbute name that should not be reported--> 
   <!--home被点击后,一直处于激活状态,因此需要使用精确匹配模式,在router-link中添加exact属性--> 
   <router-link :to="{name:'Home'}" tag="li" exact> 
    <div> 
     <i class="icon iconfont icon-31shouye"></i> 
    </div> 
    <div>精选</div> 
   </router-link> 
   <router-link :to="{name:'Brand'}" tag="li"> 
    <div> 
     <i class="icon iconfont icon-zhubaoshipin"></i> 
    </div> 
    <div>品牌</div> 
   </router-link> 
   <router-link :to="{name:'Member'}" tag="li"> 
    <div> 
     <i class="icon iconfont icon-huiyuanqia"></i> 
    </div> 
    <div>会员</div> 
   </router-link> 
   <router-link :to="{name:'Cart'}" tag="li"> 
    <div> 
     <i class="icon iconfont icon-gouwucheman"></i> 
    </div> 
    <div>购物车</div> 
   </router-link> 
   <router-link :to="{name:'Me',params:{user:'xu'}}" tag="li"> 
    <div> 
     <i class="icon iconfont icon-wo"></i> 
    </div> 
    <div>我</div> 
   </router-link> 
  </ul> 
 </div> 
</template> 
<script type="text/ecmascript-6"> 
 export default {} 
</script> 
<style lang="less" type="text/less"> 
 .tabs { 
  position: fixed; 
  bottom: 0; 
  left: 0; 
  background-color: #fff; 
  box-shadow: 0 2px 4px #000; 
  width: 100%; 
  & > ul, & > ul > li { 
   margin: 0; 
   padding: 0; 
  } 
  ul { 
   display: table; 
   width: 100%; 
   & > li { 
    text-align: center; 
    font-size: 16px; 
    display: table-cell; 
    padding: 8px 12px; 
    cursor: pointer; 
    &.router-link-active{ 
     color: #D0021B; 
    } 
    & > div { 
     font-size: 14px; 
     & > i { 
      font-size: 30px; 
     } 
    } 
   } 
  } 
 } 
</style>

我使用的是命名路由,这样我们就可以当路由组件变化时,直接修改router/index.js文件即可。

3、创建路由

router/index.js

import Vue from 'vue' 
import Router from 'vue-router' 
import Home from '@/Home' 
import Brand from '@/Brand' 
import Member from '@/Member' 
import Cart from '@/Cart' 
import Me from '@/Me' 
Vue.use(Router) 
export default new Router({ 
 //mode: 'history', 
 //base: __dirname, 
 //linkActiveClass: 'active', // 更改激活状态的Class值 
 routes: [ 
  { 
   path: '/', 
   name: 'Home', 
   component: Home 
  }, 
  { 
   path: '/brand', 
   name: 'Brand', 
   component: Brand 
  }, 
  { 
   path: '/member', 
   name: 'Member', 
   component: Member 
  }, 
  { 
   path: '/cart', 
   name: 'Cart', 
   component: Cart 
  }, 
  { 
   path: '/me', 
   name: 'Me', 
   component: Me 
  } 
 ] 
})

4、App.vue引入组件Tabs.vue,并添加<router-view>渲染路径匹配到的视图组件

<template> 
 <div id="app"> 
  <Tabs></Tabs> 
  <div class="content"> 
   <router-view></router-view> 
  </div> 
 </div> 
</template> 
<script> 
 import Tabs from "./Tabs.vue" 
 export default { 
  name: 'app', 
  data(){ 
   return {} 
  }, 
  components: {Tabs} 
 } 
</script> 
<style> 
 *{ 
  padding:0; 
  margin:0; 
 } 
 #app { 
  font-family: 'Avenir', Helvetica, Arial, sans-serif; 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
 } 
</style>

5、导航状态样式

<router-link>对应的路由匹配成功后,就会自动设置class属性值为router-link-exact-active router-link-active

router-link-exact-active:配置当链接被精确匹配的时候应该激活的CSS类名。

router-link-active:设置链接激活时使用的 CSS 类名。

如果要修改CSS样式命名,可通过<router-link>属性exact-active-class和active-class分别设置,也可通过路由构造函数选项linkExactActiveClass和linkActiveClass来设置

vue router仿天猫底部导航栏功能

点击品牌时展示如下:Home的Tab仍然设置了routet-link-activeCSS类名,如果设置routet-link-active样式颜色为红色,精选就会一直保持红色

此时需要使用”精确匹配模式“,<router-link :to="{name:'Home'}" tag="li" exact> 则使用exact,此时的Home的Tab就不会被设置routet-link-activeCSS类名了

访问 http://localhost:8080/#/brand 就不会匹配到http://localhost:8080/#/

vue router仿天猫底部导航栏功能

总结

以上所述是小编给大家介绍的vue router仿天猫底部导航栏功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript变量声明详解
Nov 27 Javascript
使用JavaScript获取地址栏参数的方法
Dec 19 Javascript
asp知识整理笔记3(问答模式)
Sep 27 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
浅析创建javascript对象的方法
May 13 Javascript
JavaScript toUpperCase()方法使用详解
Aug 26 Javascript
vue2.0中click点击当前li实现动态切换class
Jun 21 Javascript
JS原生数据双向绑定实现代码
Aug 14 Javascript
Angular实现下载安装包的功能代码分享
Sep 05 Javascript
微信小程序实现长按删除图片的示例
May 18 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 Javascript
vue.js实现三级菜单效果
Oct 19 Javascript
Node做中转服务器转发接口
Oct 18 #Javascript
Vue组件之Tooltip的示例代码
Oct 18 #Javascript
JS正则表达式完美实现身份证校验功能
Oct 18 #Javascript
详解vue项目首页加载速度优化
Oct 18 #Javascript
JS简单实现滑动加载数据的方法示例
Oct 18 #Javascript
详解cordova打包成webapp的方法
Oct 18 #Javascript
prototype.js简单实现ajax功能示例
Oct 18 #Javascript
You might like
Apache服务器无法使用的解决方法
2013/05/08 PHP
迁移PHP版本到PHP7
2015/02/06 PHP
Laravel-admin之修改操作日志的方法
2019/09/30 PHP
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
JS组件Bootstrap Table表格行拖拽效果实现代码
2020/08/27 Javascript
JavaScript、jQuery与Ajax的关系
2016/01/24 Javascript
AngularJS 指令详细介绍
2016/07/27 Javascript
功能强大的Bootstrap效果展示(二)
2016/08/03 Javascript
Actionscript与javascript交互实例程序(修改)
2016/09/22 Javascript
JavaScript使用简单正则表达式的数据验证功能示例
2017/01/13 Javascript
node.js与C语言 实现遍历文件夹下最大的文件,并输出路径,大小
2017/01/20 Javascript
JavaScript数据结构之广义表的定义与表示方法详解
2017/04/12 Javascript
Angular2 父子组件数据通信实例
2017/06/22 Javascript
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
2017/08/10 Javascript
JS使用遮罩实现点击某区域以外时弹窗的弹出与关闭功能示例
2018/07/31 Javascript
解决vue动态路由异步加载import组件,加载不到module的问题
2020/07/26 Javascript
python实现RSA加密(解密)算法
2016/02/17 Python
微信小程序跳一跳游戏 python脚本跳一跳刷高分技巧
2018/01/04 Python
python3操作微信itchat实现发送图片
2018/02/24 Python
对tf.reduce_sum tensorflow维度上的操作详解
2018/07/26 Python
Python 切分数组实例解析
2019/11/07 Python
Python如何使用BeautifulSoup爬取网页信息
2019/11/26 Python
python 初始化一个定长的数组实例
2019/12/02 Python
Python如何将函数值赋给变量
2020/04/28 Python
Python爬虫如何破解JS加密的Cookie
2020/11/19 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
HTML 5 标签、属性、事件及浏览器兼容性速查表 附打包下载
2012/10/20 HTML / CSS
自考自我鉴定范文
2013/10/30 职场文书
生物工程专业求职信
2014/09/03 职场文书
关于九一八事变的演讲稿2014
2014/09/17 职场文书
财政局党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
青年文明号申报材料
2014/12/23 职场文书
消防隐患整改通知书
2015/04/22 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
股东协议书范本2016
2016/03/21 职场文书
读《庄子》有感:美而不自知
2019/11/06 职场文书