移动端底部导航固定配合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 相关文章推荐
在线编辑器中换行与内容自动提取
Apr 24 Javascript
JavaScript—window对象使用示例
Dec 09 Javascript
使用不同的方法结合/合并两个JS数组
Sep 18 Javascript
JavaScript实现向OL列表内动态添加LI元素的方法
Mar 21 Javascript
JS实现自动固定顶部的悬浮菜单栏效果
Sep 16 Javascript
javascript瀑布流布局实现方法详解
Feb 17 Javascript
使用ajaxfileupload.js实现上传文件功能
Aug 13 Javascript
微信小程序实现滚动消息通知
Feb 02 Javascript
Bootstrap实现的表格合并单元格示例
Feb 06 Javascript
动态加载JavaScript文件的3种方式
May 05 Javascript
JavaScript面向对象继承原理与实现方法分析
Aug 09 Javascript
构建Vue大型应用的10个最佳实践(小结)
Nov 07 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实现ping
2006/10/09 PHP
PHP iconv 函数转gb2312的bug解决方法
2009/10/11 PHP
Symfony生成二维码的方法
2016/02/04 PHP
win10环境PHP 7 安装配置【教程】
2016/05/09 PHP
form自动提交实例讲解
2017/07/10 PHP
JavaScript中Array 对象相关的几个方法
2006/12/22 Javascript
用JavaScript显示随机图像或引用
2009/04/21 Javascript
JavaScript中使用replace结合正则实现replaceAll的效果
2010/06/04 Javascript
jquery异步循环获取功能实现代码
2010/09/19 Javascript
jQuery之选择组件的深入解析
2013/06/19 Javascript
javascript面向对象之访问对象属性的两种方式分析
2015/01/13 Javascript
jquery简单实现外部链接用新窗口打开的方法
2015/05/30 Javascript
bootstrap fileinput 上传插件的基础使用
2017/02/17 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
jQuery图片缩放插件smartZoom使用实例详解
2017/08/25 jQuery
利用Node.js批量抓取高清妹子图片实例教程
2018/08/02 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
2018/08/14 Javascript
浅谈vuex actions和mutation的异曲同工
2018/12/13 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
[06:15]2016国际邀请赛中国区预选赛单车采访:我顶WINGS
2016/06/27 DOTA
Python中将字典转换为列表的方法
2016/09/21 Python
python机器学习之随机森林(七)
2018/03/26 Python
python中for循环输出列表索引与对应的值方法
2018/11/07 Python
Django REST Framework之频率限制的使用
2019/09/29 Python
超实用的 30 段 Python 案例
2019/10/10 Python
Python 通过正则表达式快速获取电影的下载地址
2020/08/17 Python
养殖行业的创业计划书
2014/01/05 职场文书
青年志愿者事迹材料
2014/02/07 职场文书
主管会计岗位职责
2014/03/13 职场文书
市场营销战略计划书
2014/05/06 职场文书
2014年领导班子专项整治整改方案
2014/09/28 职场文书
合法的离婚协议书范本
2014/10/23 职场文书
领导欢迎词致辞
2015/01/23 职场文书
师德师风主题教育活动总结
2015/05/07 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书
教你做个可爱的css滑动导航条
2021/06/15 HTML / CSS