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与CSS复习(三)
Jun 29 Javascript
js批量设置样式的三种方法不推荐使用with
Feb 25 Javascript
js生成随机数之random函数随机示例
Dec 20 Javascript
jQuery实现手机号码输入提示功能实例
Apr 30 Javascript
javascript实现table表格隔行变色的方法
May 13 Javascript
javascript函数式编程程序员的工具集
Oct 11 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
ionic2打包android时gradle无法下载的解决方法
Apr 05 Javascript
详解Angular 开发环境搭建
Jun 22 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
JavaScript Window窗口对象属性和使用方法
Jan 19 Javascript
React-vscode使用jsx语法的问题及解决方法
Jun 21 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
咖啡产品发展的三大浪潮
2021/03/04 咖啡文化
BBS(php &amp; mysql)完整版(七)
2006/10/09 PHP
CI框架中libraries,helpers,hooks文件夹详细说明
2014/06/10 PHP
PHP改进计算字符串相似度的函数similar_text()、levenshtein()
2014/10/27 PHP
PHP使用socket发送HTTP请求的方法
2016/02/14 PHP
PHP将URL转换成短网址的算法分享
2016/09/13 PHP
PHP数字前补0的自带函数sprintf 和number_format的用法(详解)
2017/02/06 PHP
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
javascript面向对象编程(一) 实例代码
2010/06/25 Javascript
js中prototype用法详细介绍
2013/11/14 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
2014/07/14 Javascript
JQuery实现动态表格点击按钮表格增加一行
2014/08/24 Javascript
js添加事件的通用方法推荐
2016/05/15 Javascript
详解Angular的数据显示优化处理
2016/12/26 Javascript
使用JS 插件qrcode.js生成二维码功能
2017/02/20 Javascript
SelectPage v2.4 发布新增纯下拉列表和关闭分页功能
2017/09/07 Javascript
Bootstrap-table使用footerFormatter做统计列功能
2018/09/07 Javascript
JS对象和字符串之间互换操作实例分析
2019/02/02 Javascript
详解Vue底部导航栏组件
2019/05/02 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
vue 自定指令生成uuid滚动监听达到tab表格吸顶效果的代码
2020/09/16 Javascript
[01:11:32]VG vs FNATIC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
Python 高级专用类方法的实例详解
2017/09/11 Python
根据DataFrame某一列的值来选择具体的某一行方法
2018/07/03 Python
Python选择网卡发包及接收数据包
2019/04/04 Python
python剪切视频与合并视频的实现
2020/03/03 Python
欧迪办公美国官网:Office Depot
2016/08/22 全球购物
LTD Commodities:礼品,独特发现,家居装饰,家用器皿
2017/08/11 全球购物
Tirendo比利时:在线购买轮胎
2018/10/22 全球购物
北卡罗来纳州豪华家具和家居装饰店:Carolina Rustica
2018/10/30 全球购物
2014庆六一活动方案
2014/03/02 职场文书
关爱残疾人演讲稿
2014/05/24 职场文书
违反交通法规检讨书
2014/09/10 职场文书
巾帼标兵事迹材料
2014/12/26 职场文书
领导工作表现评语
2015/01/04 职场文书
python中出现invalid syntax报错的几种原因分析
2022/02/12 Python