移动端底部导航固定配合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 相关文章推荐
利用javascript查看html源文件
Nov 08 Javascript
网上应用的一个不错common.js脚本
Aug 08 Javascript
jquery小火箭返回顶部代码分享
Aug 19 Javascript
JS中substring与substr的用法
Nov 16 Javascript
jQuery.parseHTML() 函数详解
Jan 09 Javascript
基于canvas的二维码邀请函生成插件
Feb 14 Javascript
js实现简易垂直滚动条
Feb 22 Javascript
使用js获取伪元素的content实例
Oct 24 Javascript
vue中动态select的使用方法示例
Oct 28 Javascript
js+canvas实现两张图片合并成一张图片的方法
Nov 01 Javascript
Vue父子之间值传递的实例教程
Jul 02 Javascript
Jquery $.map使用方法实例详解
Sep 01 jQuery
后台使用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中判断一个字符串包含另一个字符串的方法
2007/03/19 PHP
《PHP编程最快明白》第四讲:日期、表单接收、session、cookie
2010/11/01 PHP
php判断终端是手机还是电脑访问网站的思路及代码
2013/04/24 PHP
PHP面向对象程序设计内置标准类,普通数据类型转为对象类型示例
2019/06/12 PHP
laravel框架上传图片实现实时预览功能
2019/10/14 PHP
laravel csrf排除路由,禁止,关闭指定路由的例子
2019/10/21 PHP
pjblog修改技巧汇总
2007/03/12 Javascript
IE 条件注释详解总结(附实例代码)
2009/08/29 Javascript
jquery $(document).ready() 与window.onload的区别
2009/12/28 Javascript
在jQuery 1.5中使用deferred对象的代码(翻译)
2011/03/10 Javascript
js实现幻灯片播放图片示例代码
2013/11/07 Javascript
js中的preventDefault与stopPropagation详解
2014/01/29 Javascript
jQuery获取节点和子节点文本的方法
2014/07/22 Javascript
在Javascript操作JSON对象,增加 删除 修改的简单实现
2016/06/02 Javascript
手机Web APP如何实现分享多平台功能
2016/08/19 Javascript
jQuery EasyUI 页面加载等待及页面等待层
2017/02/06 Javascript
为什么使用koa2搭建微信第三方公众平台的原因
2018/05/16 Javascript
Ant design vue table 单击行选中 勾选checkbox教程
2020/10/24 Javascript
Node.js利用Express实现用户注册登陆功能(推荐)
2020/10/26 Javascript
Python3里的super()和__class__使用介绍
2015/04/23 Python
python字典快速保存于读取的方法
2018/03/23 Python
使用 Python 实现文件递归遍历的三种方式
2018/07/18 Python
Python Excel处理库openpyxl使用详解
2019/05/09 Python
安装PyInstaller失败问题解决
2019/12/14 Python
Python3实现mysql连接和数据框的形成(实例代码)
2020/01/17 Python
python 发送邮件的示例代码(Python2/3都可以直接使用)
2020/12/03 Python
html5 canvas绘制放射性渐变色效果
2018/01/04 HTML / CSS
新奥尔良珠宝:Mignon Faget
2020/11/23 全球购物
维德科技C#面试题笔试题
2015/12/09 面试题
2014学校庆三八妇女节活动总结
2014/03/01 职场文书
岗位廉政承诺书
2014/03/27 职场文书
2015年植树节活动总结
2015/02/06 职场文书
小学运动会通讯稿
2015/07/18 职场文书
队列队形口号
2015/12/25 职场文书
技术转让协议书
2016/03/19 职场文书
七年级作文之环保作文
2019/10/17 职场文书