移动端底部导航固定配合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 相关文章推荐
firefox事件处理之自动查找event的函数(用于onclick=foo())
Aug 05 Javascript
jQuery判断一个元素是否可见的方法
Jun 05 Javascript
AngularJS基础 ng-model 指令详解及示例代码
Aug 02 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
微信小程序实现传参数的几种方法示例
Jan 10 Javascript
通过封装scroll.js 获取滚动条的值
Jul 13 Javascript
webpack4简单入门实例
Sep 06 Javascript
使用vue-router与v-if实现tab切换遇到的问题及解决方法
Sep 07 Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
javascript随机变色实例代码
Oct 15 Javascript
在react中使用vue的状态管理的方法示例
May 02 Javascript
vue实现在线学生录入系统
May 30 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数字格式化
2006/12/06 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
PHP微信模板消息操作示例
2017/06/29 PHP
laravel框架语言包拓展实现方法分析
2019/11/22 PHP
区分JS中的undefined,null,&quot;&quot;,0和false
2007/03/08 Javascript
Prototype中dom对象方法汇总
2008/09/17 Javascript
jQuery前台数据获取实现代码
2011/03/16 Javascript
jQuery实现异步获取json数据的2种方式
2014/08/29 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
浅谈js中startsWith 函数不能在任何浏览器兼容的问题
2017/03/01 Javascript
JS跳转手机站url的若干注意事项
2017/10/18 Javascript
Angular2使用SVG自定义图表(条形图、折线图)组件示例
2019/05/10 Javascript
[04:10]2016国际邀请赛中国区预选赛第二日TOP10精彩集锦
2016/06/28 DOTA
从零学python系列之教你如何根据图片生成字符画
2014/05/23 Python
简单说明Python中的装饰器的用法
2015/04/24 Python
使用Python的urllib2模块处理url和图片的技巧两则
2016/02/18 Python
Python中的FTP通信模块ftplib的用法整理
2016/07/08 Python
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
使用OpenCV circle函数图像上画圆的示例代码
2019/12/27 Python
python 使用OpenCV进行简单的人像分割与合成
2021/02/02 Python
英国领先的运动物理治疗供应公司:Vivomed
2018/07/14 全球购物
学校采购员岗位职责
2014/01/02 职场文书
房地产还款计划书
2014/01/10 职场文书
潘婷洗发水广告词
2014/03/14 职场文书
美丽乡村建设实施方案
2014/03/23 职场文书
保护环境演讲稿
2014/05/10 职场文书
毕业生学校推荐信范文
2014/05/21 职场文书
文秘班元旦晚会活动策划方案
2014/08/28 职场文书
公安派出所所长四风问题个人对照检查材料
2014/10/04 职场文书
计算机实训报告总结
2014/11/05 职场文书
2014初中数学教研组工作总结
2014/12/19 职场文书
先进教育工作者事迹材料
2014/12/23 职场文书
2015年科室工作总结
2015/04/10 职场文书
2019职场实习报告该怎么写?
2019/07/01 职场文书
MySQL连表查询分组去重的实现示例
2021/07/01 MySQL
台积电称即便经济低迷也没有降价的计划
2022/04/21 数码科技