首页 > 移动平台 > 详细

移动端安卓和IOS开发框架Framework7教程-导航栏&工具栏布局

时间：2016-06-01 02:11:19      阅读：244      评论：0      收藏：0      [点我收藏+]

在向应用添加导航栏和工具栏之前，我们需要决定使用哪种布局。

Framework7在这方面很自由，有3种不同类型的导航栏/工具栏布局，它们对应着在页面/视图中的不同位置。

静态布局

静态布局可能是最少使用的布局。在这种情况下，导航栏和工具栏只是可以滚动的页面内容的一部分，每个页面都有它自己的导航栏和工具栏：

  1. <body>
  2. ??...
  3. ??<div?class="views">
  4. ????<div?class="view?view-main">
  5. ??????<div?class="pages">
  6. ????????<div?data-page="index"?class="page">
  7. ??????????<div?class="page-content">
  8. ????????????
  9. ????????????<!--?Top?Navbar-->
  10. ????????????<div?class="navbar">
  11. ??????????????<div?class="navbar-inner">
  12. ????????????????<div?class="center">Awesome?App</div>
  13. ??????????????</div>
  14. ????????????</div>
  15. ????????????<!--?/End?of?Top?Navbar-->
  16. ????????????
  17. ????????????<p>Other?content?goes?here</p>
  18. ????????????...
  19. ????????????
  20. ????????????<!--?Bottom?Toolbar-->
  21. ????????????<div?class="toolbar">
  22. ??????????????<div?class="toolbar-inner">
  23. ????????????????Hello
  24. ??????????????</div>
  25. ????????????</div>??????????
  26. ????????????<!--?/End?of?Bottom?Toolbar-->
  27. ????????????
  28. ??????????</div>
  29. ????????</div>
  30. ??????</div>
  31. ????</div>
  32. ??</div>
  33. ??...
  34. </body>
复制

??实例预览

固定布局

在固定布局中，也是每个页面都有它自己的导航栏和工具栏，但是它们在屏幕上始终可见，不会随着页面内容滚动：

  1. <body>
  2. ??...
  3. ??<div?class="views">
  4. ????<div?class="view?view-main">
  5. ??????<div?class="pages">
  6. ????????<!--?Now?we?need?additional?"navbar-fixed"?and?"toolbar-fixed"?classes?on?Page?-->
  7. ????????<div?data-page="index"?class="page?navbar-fixed?toolbar-fixed">
  8. ????????????
  9. ??????????<!--?Top?Navbar-->
  10. ??????????<div?class="navbar">
  11. ????????????<div?class="navbar-inner">
  12. ??????????????<div?class="center">Awesome?App</div>
  13. ????????????</div>
  14. ??????????</div>
  15. ??????????<!--?/End?of?Top?Navbar-->
  16. ?
  17. ??????????<div?class="page-content">
  18. ????????????<p>Other?content?goes?here</p>
  19. ????????????...
  20. ??????????</div>
  21. ????????????
  22. ??????????<!--?Bottom?Toolbar-->
  23. ??????????<div?class="toolbar">
  24. ????????????<div?class="toolbar-inner">
  25. ??????????????Hello
  26. ????????????</div>
  27. ??????????</div>??????????
  28. ??????????<!--?/End?of?Bottom?Toolbar-->
  29. ????????????
  30. ????????</div>
  31. ??????</div>
  32. ????</div>
  33. ??</div>
  34. ??...
  35. </body>
复制

实例预览

正如你所见，与静态布局相比，固定布局的不同之处在于：

  • 导航栏和工具栏是Page的子元素(<div class="page">)

  • 每个页面拥有额外的“navbar-fixed”类（对于固定导航栏）和“toolbar-fixed”类（对于固定工具栏）

注意，如果你想要对单视图中的每个页面使用固定布局，可以直接在父页面(<div class="pages">)上添加“navbar-fixed”和“toolbar-fixed”类，而不是对每个单页面分别添加。

穿透布局

This type of layout is only supported by iOS theme

这是最有趣，最被广泛使用的布局 —— 在不同页面间切换时，导航栏和工具栏保持不变。通过这种布局，可以实现酷炫的动态导航（不要忘记在视图初始化的时候启用它）。视图初始化)

  1. <body>
  2. ??...
  3. ??<div?class="views">
  4. ????<div?class="view?view-main">
  5. ????????????
  6. ??????<!--?Top?Navbar-->
  7. ??????<div?class="navbar">
  8. ????????<div?class="navbar-inner">
  9. ??????????<div?class="center">Awesome?App</div>
  10. ????????</div>
  11. ??????</div>
  12. ??????<!--?/End?of?Top?Navbar-->??????????
  13. ????????????
  14. ??????<!--?Now?we?need?additional?"navbar-through"?and?"toolbar-through"?classes?on?Pages?-->
  15. ??????<div?class="pages?navbar-through?toolbar-through">
  16. ????????<div?data-page="index"?class="page">
  17. ??????????<div?class="page-content">
  18. ????????????<p>Other?content?goes?here</p>
  19. ????????????...
  20. ??????????</div>
  21. ????????</div>
  22. ??????</div>
  23. ????????????
  24. ??????<!--?Bottom?Toolbar-->
  25. ??????<div?class="toolbar">
  26. ????????<div?class="toolbar-inner">
  27. ??????????Hello
  28. ????????</div>
  29. ??????</div>??????????
  30. ??????<!--?/End?of?Bottom?Toolbar-->
  31. ????????????
  32. ????</div>
  33. ??</div>
  34. ??...
  35. </body>
复制

实例预览

正如你所见，与静态和固定布局相比，穿透布局的不同之处在于：

  • 导航栏和工具栏是视图的子元素(<div class="view">)

  • 具有穿透布局的导航栏和工具栏的视图拥有额外的“navbar-through”类（对于穿透类型的导航栏）和"toolbar-through"类（对于穿透类型的工具栏）。

混合布局

对于不同的视图，你可以使用不同的布局，比如在一个视图中使用固定布局，在另一个中使用穿透布局。其实，你也可以在单视图中混合使用这些布局。例如，你可以使用穿透的导航栏和固定的工具栏：

  1. <body>
  2. ??...
  3. ??<div?class="views">
  4. ????<div?class="view?view-main">
  5. ????????????
  6. ??????<!--?Top?Navbar-->
  7. ??????<div?class="navbar">
  8. ????????<div?class="navbar-inner">
  9. ??????????<div?class="center">Awesome?App</div>
  10. ????????</div>
  11. ??????</div>
  12. ??????<!--?/End?of?Top?Navbar-->??????????
  13. ????????????
  14. ??????<!--?Now?we?need?additional?"navbar-through"?and?"toolbar-fixed"?classes?on?Pages?-->
  15. ??????<div?class="pages?navbar-through?fixed-through">
  16. ????????<div?data-page="index"?class="page">
  17. ??????????<div?class="page-content">
  18. ????????????<p>Other?content?goes?here</p>
  19. ????????????...
  20. ??????????</div>
  21. ?
  22. ??????????<!--?Bottom?Toolbar-->
  23. ??????????<div?class="toolbar">
  24. ????????????<div?class="toolbar-inner">
  25. ??????????????Hello
  26. ????????????</div>
  27. ??????????</div>??????????
  28. ??????????<!--?/End?of?Bottom?Toolbar-->
  29. ?
  30. ????????</div>
  31. ??????</div>
  32. ????</div>
  33. ??</div>
  34. ??...
  35. </body>
复制

实例预览

无导航栏/工具栏

当然，如果你不需要导航栏或工具栏，你大可不必包含它们，并且不用在page/pages/view中添加相应的类（“"navbar-fixed”，“navbar-through”，“toolbar-fixed”，“toolbar-through”）

速记表

正如你所见，这些布局都很容易理解，不同之处在于父元素上额外添加的类，以及不同的嵌套层级。下面是速记表

静态

  1. .view???
  2. ??.pages????
  3. ????.page???
  4. ??????.page-content???
  5. ????????.navbar???
  6. ????????//?other?page?content
  7. ????????.toolbar
复制

固定

  1. .view
  2. ??.pages.navbar-fixed.navbar-through
  3. ????.page
  4. ??????.navbar
  5. ??????.page-content
  6. ??????.toolbar
复制

穿透

  1. .view
  2. ??.navbar
  3. ??.pages.navbar-through.toolbar-through
  4. ????.page
  5. ??????.page-content
  6. ??.toolbar
复制

?

移动端安卓和IOS开发框架Framework7教程-导航栏&工具栏布局

原文：http://zaixianshouce.iteye.com/blog/2301663
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！