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 相关文章推荐
jquery ajax例子返回值详解
Sep 11 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
Jun 17 Javascript
JavaScript中关联原型链属性特性
Feb 13 Javascript
Jquery和BigFileUpload实现大文件上传及进度条显示
Jun 27 Javascript
浅谈Javascript中的函数、this以及原型
Oct 09 Javascript
JavaScript中闭包的详解
Apr 01 Javascript
jquery仿京东商品放大浏览页面
Jun 06 jQuery
AngularJS中使用three.js的实例详解
Jul 21 Javascript
Vue二次封装axios为插件使用详解
May 21 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
Sep 06 Javascript
JavaScript 实现轮播图特效的示例
Nov 05 Javascript
前端学习——JavaScript原生实现购物车案例
Mar 31 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
php 日期和时间的处理-郑阿奇(续)
2011/07/04 PHP
php入门学习知识点五 关于php数组的几个基本操作
2011/07/14 PHP
php获取ip的三个属性区别介绍(HTTP_X_FORWARDED_FOR,HTTP_VIA,REMOTE_ADDR)
2012/09/23 PHP
解析PHP中的unset究竟会不会释放内存
2013/07/18 PHP
php cURL和Rolling cURL并发方式比较
2013/10/30 PHP
使用PHP备份MySQL和网站发送到邮箱实例代码
2013/11/28 PHP
PHP弹出对话框技巧详细解读
2015/09/26 PHP
php采用session实现防止页面重复刷新
2015/12/24 PHP
PHP使Laravel为JSON REST API返回自定义错误的问题
2018/10/16 PHP
Javascript select控件操作大全(新增、修改、删除、选中、清空、判断存在等)
2008/12/19 Javascript
js 无提示关闭浏览器页面的代码
2010/03/09 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
自写的jQuery异步加载数据添加事件
2014/05/15 Javascript
js解决select下拉选不中问题
2014/10/14 Javascript
jQuery fancybox在ie浏览器下无法显示关闭按钮的解决办法
2016/02/19 Javascript
Three.js学习之Lamber材质和Phong材质
2016/08/04 Javascript
前端面试题及答案整理(二)
2016/08/26 Javascript
利用jQuery来动态为属性添加或者删除属性的简单方法
2016/12/02 Javascript
Bootstrap显示与隐藏简单实现代码
2017/03/06 Javascript
jQuery图片瀑布流的简单实现代码
2017/03/15 Javascript
javascript使用btoa和atob来进行Base64转码和解码
2017/03/20 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
Vue-cli项目部署到Nginx服务器的方法
2019/11/01 Javascript
Vue页面跳转传递参数及接收方式
2020/09/09 Javascript
windows系统中python使用rar命令压缩多个文件夹示例
2014/05/06 Python
python在Windows8下获取本机ip地址的方法
2015/03/14 Python
利用Django-environ如何区分不同环境
2018/08/26 Python
python语音识别实践之百度语音API
2018/08/30 Python
详解Django 时间与时区设置问题
2019/07/23 Python
法国滑雪假期的专家:Ski Planet
2019/11/02 全球购物
NYX Professional Makeup俄罗斯官网:世界知名的化妆品品牌
2019/12/26 全球购物
给物业的表扬信
2014/01/21 职场文书
2014党委书记四风问题对照检查材料思想汇报
2014/09/22 职场文书
幼儿园大班教师个人工作总结
2015/02/05 职场文书
新教师个人总结
2015/02/06 职场文书
呼啸山庄读书笔记
2015/06/29 职场文书