在我们平时练习或者实际项目中也好,我们常常遇到这么一个需求:移动端中的导航并不是在顶部也不是在底部,而是在最底部且是固定的,当我们点击该导航项时会切换到对应的组件。相信对于很多朋友而言,这是一个很简单的需求,而且市面上有很多开源的组件库就可以实现,像比如说: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/archive/2019/06/13/11017982.html
Vue中的路由根据用户在网页中的点击,将其引导到对应的页面。安装vue-router,路由使用包括:嵌套路由、动态路由、编程式路由、路由重定向
关于 React Router v5 有一个小插曲,其实开发团队原本只是计划发布 React Router 4.4 版本,但由于错误地使用了托字符 (^) —— 将依赖错误地写成 react-router: ^4.3.1,导致报错。最后团队决定撤销 4.4 版本,直接改为发布 React Router v5。
作为 React 全家桶的一员,如果我们想要开发一个 React 应用,那么 react-router 基本上是我们绕不过去的基础。基于此,对它的了解和使用也是必不可少的一步,本文将重点介绍实际应用中常用的一些 API 以及实践过程中遇到的一些问题
Vue Router 是 Vue.js 官方的路由管理器。在早期的时候html模板存在服务端,然后根据浏览器输入不同的路径,服务端会根据不同的路径渲染不同的模板出来,这样的痛点就是用户每次操作的时候都要重新刷新页面
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!