移动端底部导航固定配合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 append() html时的小问题的解决方法
Dec 16 Javascript
使用pcs api往免费的百度网盘上传下载文件的方法
Mar 17 Javascript
JS 终止执行的实现方法
Nov 24 Javascript
浅谈js在html中的加载执行顺序,多个jquery ready执行顺序
Nov 26 Javascript
浅谈DOM的操作以及性能优化问题-重绘重排
Jan 08 Javascript
bootstrapValidator bootstrap-select验证不可用的解决办法
Jan 11 Javascript
基于jquery实现二级联动效果
Mar 30 jQuery
JavaScript实现数值自动增加动画
Dec 28 Javascript
bootstrap-table+treegrid实现树形表格
Jul 26 Javascript
详解基于Wepy开发小程序插件(推荐)
Aug 01 Javascript
使用layui 的layedit定义自己的toolbar方法
Sep 18 Javascript
vue中三级导航的菜单权限控制
Mar 31 Vue.js
后台使用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
支持php4、php5的mysql数据库操作类
2008/01/10 PHP
Laravel使用消息队列需要注意的一些问题
2017/12/13 PHP
PHP获取MySQL执行sql语句的查询时间方法
2018/08/21 PHP
Laravel统一错误处理为JSON的方法介绍
2020/10/18 PHP
用ADODB.Stream转换
2007/01/22 Javascript
JavaScript学习笔记(十)
2010/01/17 Javascript
9款2014最热门jQuery实用特效推荐
2014/12/07 Javascript
js鼠标悬浮出现遮罩层的方法
2015/01/28 Javascript
JavaScript自定义数组排序方法
2015/02/12 Javascript
JavaScript中length属性的使用方法
2015/06/05 Javascript
Javascript对象Clone实例分析
2015/06/09 Javascript
jQuery实现为图片添加镜头放大效果的方法
2015/06/25 Javascript
JS按钮闪烁功能的实现代码
2017/07/21 Javascript
js实现图片粘贴上传到服务器并展示的实例
2017/11/08 Javascript
vue better scroll 无法滚动的解决方法
2018/06/07 Javascript
基于iview-admin实现动态路由的示例代码
2019/10/02 Javascript
vue实现点击按钮切换背景颜色的示例代码
2020/06/23 Javascript
微信小程序12行js代码自己写个滑块功能(推荐)
2020/07/15 Javascript
python模拟新浪微博登陆功能(新浪微博爬虫)
2013/12/24 Python
Numpy中对向量、矩阵的使用详解
2019/10/29 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
关于python中的xpath解析定位
2020/03/06 Python
Python如何给你的程序做性能测试
2020/07/29 Python
Pretty Little Thing美国:时尚女性服饰
2018/08/27 全球购物
PHP如何调用MYSQL存储过程
2014/05/30 面试题
Linux内核产生并发的原因
2012/07/13 面试题
如何开发安全的AJAX应用
2014/03/26 面试题
体育老师的教学自我评价分享
2013/11/19 职场文书
数学系个人求职信范文
2014/01/30 职场文书
合同协议书格式
2014/04/18 职场文书
授权委托书范文
2014/07/31 职场文书
2014年保洁员工作总结
2014/11/19 职场文书
关于上班时间调整的通知
2015/04/23 职场文书
话题作文之成长
2019/12/09 职场文书
浅谈Web Storage API的使用
2021/06/23 Javascript
世界十大动漫制作公司排行榜,迪士尼上榜,第二是美国代表性文化符
2022/03/18 欧美动漫