登录  /  注册
首页 > web前端 > js教程 > 正文

vue router仿天猫底部导航栏实例分享

小云云
发布: 2018-01-09 13:44:25
原创
2945人浏览过

本文主要介绍了vue router仿天猫底部导航栏功能,需要的朋友可以参考下,希望能帮助到大家。

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

分析:

1、图标的获取

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

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


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


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



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

<link>
登录后复制

引入图标,使用区别在第三个class来引入对应图标

此时所需图标处理完毕

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

使用的样式时less,如果在.vue文件中写样式,style必须写成,否则会报错

Tabs.vue

<template> 
 <p> 
  <!--命名路由--> 
  </p>
<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> 
    <p> 
     <i></i> 
    </p> 
    <p>精选</p> 
   </router-link> 
   <router-link> 
    <p> 
     <i></i> 
    </p> 
    <p>品牌</p> 
   </router-link> 
   <router-link> 
    <p> 
     <i></i> 
    </p> 
    <p>会员</p> 
   </router-link> 
   <router-link> 
    <p> 
     <i></i> 
    </p> 
    <p>购物车</p> 
   </router-link> 
   <router-link> 
    <p> 
     <i></i> 
    </p> 
    <p>我</p> 
   </router-link> 
  </ul> 
  
</template> 
<script> 
 export default {} 
</script> 
<style> 
 .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; 
    } 
    & > p { 
     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,并添加渲染路径匹配到的视图组件

<template> 
 <p> 
  <tabs></tabs> 
  </p>
<p> 
   <router-view></router-view> 
  </p> 
  
</template> 
<script> 
 import Tabs from "./Tabs.vue" 
 export default { 
  name: &#39;app&#39;, 
  data(){ 
   return {} 
  }, 
  components: {Tabs} 
 } 
</script> 
<style> 
 *{ 
  padding:0; 
  margin:0; 
 } 
 #app { 
  font-family: &#39;Avenir&#39;, Helvetica, Arial, sans-serif; 
  -webkit-font-smoothing: antialiased; 
  -moz-osx-font-smoothing: grayscale; 
 } 
</style>
登录后复制

5、导航状态样式

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

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

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

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


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

此时需要使用”精确匹配模式“, 则使用exact,此时的Home的Tab就不会被设置routet-link-activeCSS类名了

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


相关推荐;

jQuery实现的粘性滚动导航栏效果

jQuery实现导航栏头部菜单项点击后变换颜色的方法实例详解

JavaScript实现个性导航栏特效

以上就是vue router仿天猫底部导航栏实例分享的详细内容,更多请关注php中文网其它相关文章!

智能AI问答
PHP中文网智能助手能迅速回答你的编程问题,提供实时的代码和解决方案,帮助你解决各种难题。不仅如此,它还能提供编程资源和学习指导,帮助你快速提升编程技能。无论你是初学者还是专业人士,AI智能助手都能成为你的可靠助手,助力你在编程领域取得更大的成就。
来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
作者最新文章
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号