在我们平时练习或者实际项目中也好, 我们常常遇到这么一个需求: 移动端中的导航并不是在顶部也不是在底部, 而是在最底部且是固定的, 当我们点击该导航项时会切换到对应的组件. 相信对于很多朋友而言, 这是一个很简单的需求, 而且市面上有很多开源的组件库就可以实现, 像比如说: 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
- }
- ]
- });
小事做不好, 何以做大事, 坚持!
来源: https://www.cnblogs.com/hq-fighting/p/11017982.html