移动端底部导航固定配合vue-router实现组件切换功能


Posted in Javascript onJune 13, 2019

在我们平时练习或者实际项目中也好,我们常常遇到这么一个需求:移动端中的导航并不是在顶部也不是在底部,而是在最底部且是固定的,当我们点击该导航项时会切换到对应的组件。

相信对于很多朋友而言,这是一个很简单的需求,而且市面上有很多开源的组件库就可以实现,像比如说:cube-ui等!那么对于一个要是还在练习以及对第三方组件库不是很了解的朋友不妨看看我这篇,相信会对你有所收获的!

首先,在实现这个需求之前,我们先分析或者回想下和自己做过的demo中哪个类似,相信很多朋友立马就会想起来---tab栏切换,那么对于HTML结构的设计我们便可以借助tab栏切换的结构:一个大盒子套着两个小盒子,一个作容器,另一个作导航!

HTML 结构

<div>
 <div>容器</div>
 <div class="footer">
  <div class="module-nav">
  <div class="nav-i">
   <div class="iconfont icon"></div>
   <h3>首页</h3>
  </div>
  <div class="nav-i">
   <div class="iconfont icon"></div>
   <h3>发现</h3>
  </div>
  <div class="nav-i">
   <div class="iconfont icon-add"></div>
  </div>
  <div class="nav-i">
   <div class="iconfont icon"></div>
   <h3>消息</h3>
  </div>
  <div class="nav-i">
   <div class="iconfont icon"></div>
   <h3>我的</h3>
  <div>
  </div>
 </div>
 </div>

  做完HTML结构的编写,那我们在给上面的骨架穿上衣服,根据需求“底部固定”,我们很容易便会想到 position: fixed ,当然我这里也是用固定定位实现的,但布局采用的是 flex,在采用 flex 结合固定定位布局的时候常常会出现很多不必要的问题,如:flex 属性失效,两者效果冲突等,原因更多的便是“脱标”导致的,其中更多的便是出现在父元素 flex,子元素 position的时候,这时候可以中间加个div使两者摆脱联系。

  css 样式( stylus形式 )

.footer
 position fixed
 bottom 0
 z-index 999
 max-width 1080px
 width 100%
 border-top 1px solid #C0C0C0
 .module-nav
 display flex
 justify-content space-around
 .nav-i
  width 60px
  text-align center
  .icon
  font-size 35px
  padding 5px 0
  .icon-add
  font-size 60px
  h3
  font-size 15px
  font-weight normal
  margin 0
  padding-bottom 5px

骨架和衣服都做好后,那么大概的雏形就出来了,我们的需求也就实现了一半,剩下的便是组件切换了。这个就简单了,只需要配置下路由表,然后指定跳转便可以了

路由表

routes: [
 {
  path: "/",
  name: "home",
  component: Home
 },
 {
  path: "/find",
  name: "find",
  component: Find
 },
 {
  path: "/info",
  name: "info",
  component: Info
 },
 {
  path: "/user",
  name: "user",
  component: User
 }
 ]

  最后在“容器”内添加router-view即可,下面可以看看完整代码:

// HTML
<div>
 <div class="main-content">
  <router-view></router-view>
 </div>
 <div class="footer">
  <div class="module-nav">
  <router-link tag="div" to="/" class="nav-i">
   <div class="iconfont icon"></div>
   <h3>首页</h3>
  </router-link>
  <router-link tag="div" to="/find" class="nav-i">
   <div class="iconfont icon"></div>
   <h3>发现</h3>
  </router-link>
  <div class="nav-i">
   <div class="iconfont icon-add"></div>
  </div>
  <router-link tag="div" to="/info" class="nav-i">
   <div class="iconfont icon"></div>
   <h3>消息</h3>
  </router-link>
  <router-link tag="div" to="/user" class="nav-i">
   <div class="iconfont icon"></div>
   <h3>我的</h3>
  </router-link>
  </div>
 </div>
 </div>

// css
.footer
 position fixed
 bottom 0
 z-index 999
 max-width 1080px
 width 100%
 border-top 1px solid #C0C0C0
 .module-nav
 display flex
 justify-content space-around
 .nav-i
  width 60px
  text-align center
  .icon
  font-size 35px
  padding 5px 0
  .icon-add
  font-size 60px
  h3
  font-size 15px
  font-weight normal
  margin 0
  padding-bottom 5px

// router
export default new Router({
 routes: [
 {
  path: "/",
  name: "home",
  component: Home
 },
 {
  path: "/find",
  name: "find",
  component: Find
 },
 {
  path: "/info",
  name: "info",
  component: Info
 },
 {
  path: "/user",
  name: "user",
  component: User
 }
 ]
});

总结

以上所述是小编给大家介绍的移动端底部导航固定配合vue-router实现组件切换功能,希望对大家有所帮助,如果大家有任何疑问欢迎给我留言,小编会及时回复大家的!

Javascript 相关文章推荐
jQuery 第二课 操作包装集元素代码
Mar 14 Javascript
扩展JavaScript功能的正确方法(译文)
Apr 12 Javascript
基于JQuery的多标签实现代码
Sep 19 Javascript
js操作table示例(个人心得)
Nov 29 Javascript
js中日期的加减法
May 06 Javascript
jQuery实现的分页功能示例
Jan 22 Javascript
jQuery插件echarts去掉垂直网格线用法示例
Mar 03 Javascript
Angular.JS中指令ng-if、ng-show/ng-hide和ng-switch的使用教程
May 07 Javascript
javascript回调函数详解
Feb 06 Javascript
Node.js console控制台简单用法分析
Jan 04 Javascript
vue双向绑定及观察者模式详解
Mar 19 Javascript
使用react+redux实现计数器功能及遇到问题
Jun 02 Javascript
后台使用freeMarker和前端使用vue的方法及遇到的问题
Jun 13 #Javascript
vue路由插件之vue-route
Jun 13 #Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 #Javascript
详解vuex之store源码简单解析
Jun 13 #Javascript
vue store之状态管理模式的详细介绍
Jun 13 #Javascript
微信小程序页面间跳转传参方式总结
Jun 13 #Javascript
微信小程序位置授权处理方法
Jun 13 #Javascript
You might like
PHP中将字符串转化为整数(int) intval() printf() 性能测试
2020/03/20 PHP
详解将数据从Laravel传送到vue的四种方式
2019/10/16 PHP
基于jQuery的可以控制左右滚动及自动滚动效果的代码
2010/07/25 Javascript
jQuery在html有效在jsp无效的原因及解决方法
2013/08/02 Javascript
jquery live()调用不存在的解决方法
2014/02/26 Javascript
浅谈JavaScript Array对象
2014/12/29 Javascript
javascript表单验证大全
2015/08/12 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
ES6中module模块化开发实例浅析
2017/04/06 Javascript
Node.js 使用递归实现遍历文件夹中所有文件
2017/09/18 Javascript
详解Angular模板引用变量及其作用域
2018/11/23 Javascript
vue无限轮播插件代码实例
2019/05/10 Javascript
jquery实现图片放大镜效果
2020/12/23 jQuery
使用grappelli为django admin后台添加模板
2014/11/18 Python
Python制作Windows系统服务
2017/03/25 Python
Python 实现简单的shell sed替换功能(实例讲解)
2017/09/29 Python
Python实现定时精度可调节的定时器
2018/04/15 Python
Django中使用 Closure Table 储存无限分级数据
2019/06/06 Python
对Django url的几种使用方式详解
2019/08/06 Python
解决HTML5中滚动到底部的事件问题
2019/08/22 HTML / CSS
mysql的最长数据库名,表名,字段名可以是多长
2014/04/21 面试题
关键字throw与throws的用法差异
2016/11/22 面试题
高中毕业自我鉴定范文
2013/10/02 职场文书
自动化专业个人求职信范文
2013/12/30 职场文书
打架检讨书400字
2014/01/17 职场文书
学习十八大坚定理想信念心得体会
2014/03/11 职场文书
营销部内勤岗位职责
2014/04/30 职场文书
幼儿园门卫岗位职责范本
2014/07/02 职场文书
2014统计局民主生活会对照检查材料思想汇报
2014/10/02 职场文书
2015年度党员个人总结
2015/02/14 职场文书
医生辞职信范文
2015/03/02 职场文书
幼儿园中班班级总结
2015/08/10 职场文书
2015年国庆放假通知范文
2015/08/18 职场文书
环境保护宣传标语大全!
2019/06/28 职场文书
PhpSpreadsheet中文文档 | Spreadsheet操作教程实例
2021/04/01 PHP
win10如何快速切换窗口 win10切换窗口快捷键分享
2022/07/23 数码科技