移动端底部导航固定配合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修改网页背景颜色通过css方法实现
Jun 06 Javascript
jQuery实现自动切换播放的经典滑动门效果
Sep 12 Javascript
Javascript函数式编程语言
Oct 11 Javascript
JavaScript、jQuery与Ajax的关系
Jan 24 Javascript
JavaScript禁止复制与粘贴的实现代码
May 16 Javascript
JQuery 进入页面默认给已赋值的复选框打钩
Mar 23 jQuery
underscore之Collections_动力节点Java学院整理
Jul 10 Javascript
JavaScript对JSON数据进行排序和搜索
Jul 24 Javascript
Angular2 http jsonp的实例详解
Aug 31 Javascript
详解vue中localStorage的使用方法
Nov 22 Javascript
vue如何在用户要关闭当前网页时弹出提示的实现
May 31 Javascript
webpack+express实现文件精确缓存的示例代码
Jun 11 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
基于pear auth实现登录验证
2010/02/26 PHP
PHP爆绝对路径方法收集整理
2012/09/17 PHP
PHP调用VC编写的COM组件实例
2014/03/29 PHP
PHP Warning: Module 'modulename' already loaded in问题解决办法
2015/03/16 PHP
php中Snoopy类用法实例
2015/06/19 PHP
比较全面的event对像在IE与FF中的区别 推荐
2009/09/21 Javascript
通过url查找a元素并点击
2014/04/09 Javascript
javascript操作符&quot;!~&quot;详解
2015/02/10 Javascript
jQuery遍历页面所有CheckBox查看是否被选中的方法
2015/04/14 Javascript
javascript中的作用域和闭包详解
2016/01/13 Javascript
对jQuary选择器的全面总结
2016/06/20 Javascript
jQuery Ajax 加载数据时异步显示加载动画
2016/08/01 Javascript
详解JS中定时器setInterval和setTImeout的this指向问题
2017/01/06 Javascript
JavaScript数据结构之链表的实现
2017/03/19 Javascript
Javascript实现倒计时时差效果
2017/05/18 Javascript
js实现canvas图片与img图片的相互转换的示例
2017/08/31 Javascript
用js实现before和after伪类的样式修改的示例代码
2017/09/07 Javascript
angularJs中跳转到指定的锚点实例($anchorScroll)
2018/08/31 Javascript
JS实现的获取银行卡号归属地及银行卡类型操作示例
2019/01/08 Javascript
在Vue项目中引入JQuery-ui插件的讲解
2019/01/27 jQuery
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
JS中封装axios来管控api的2种方式
2019/09/11 Javascript
解决vue更新路由router-view复用组件内容不刷新的问题
2019/11/04 Javascript
利用Python-iGraph如何绘制贴吧/微博的好友关系图详解
2017/11/02 Python
Python递归实现汉诺塔算法示例
2018/03/19 Python
对Python使用mfcc的两种方式详解
2019/01/09 Python
Selenium alert 弹窗处理的示例代码
2020/08/06 Python
Python如何在bool函数中取值
2020/09/21 Python
AE美国鹰日本官方网站: American Eagle Outfitters
2016/12/10 全球购物
.NET现在共支持多少种语言
2014/02/26 面试题
工地资料员岗位职责
2013/12/31 职场文书
办理居住证介绍信
2014/01/15 职场文书
国家税务局领导班子对照检查材料思想汇报
2014/10/04 职场文书
法定代表人授权委托书格式
2014/10/14 职场文书
幼儿园六一主持词
2015/06/30 职场文书
关于公司年会的开幕词
2016/03/04 职场文书