framework7---framework7下关于导航栏和工具栏的几种布局类型

最新推荐文章于 2024-08-10 07:19:09 发布

武东10号

最新推荐文章于 2024-08-10 07:19:09 发布

阅读量4.2k

点赞数

分类专栏： framework7 文章标签： framwork7 穿透布局固定布局混合布局

本文链接：https://blog.csdn.net/Wbiokr/article/details/73773638

版权

framework7 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

静态布局

静态布局，导航栏和工具栏流式布局，随页面滚动


.views
    .view
        .pages
            .page
                .page-content
                    .navbar
                    ........
                    .toolbar

固定布局

固定布局，页面中的导航栏和工具栏被fixed到页面中，不会随着页面滚动而变化

.views
    .view
        .pages
            .page.navbar-fixed.toolbar-fixed
                .navbar
                .page-content
                .toolbar

//不居中，navbar-fixed被放置于page盒子中，只针对这一页面实行固定布局，如果置于pages盒子中，则针对所有page页面，进行固定布局

穿透布局

不同页面间切换时，导航栏和工具栏保持不变。通过这种布局，可以实现酷炫的动态导航。穿透布局下，navbar和toolbar是view的子元素

.views
    .view
        .navbar
        .pages.navbar-through.toolbar-through
            ......
        .toolbar

混合布局

不同页面间切换时，导航栏和工具栏保持不变。通过这种布局，可以实现酷炫的动态导航。穿透布局下，navbar和toolbar是view的子元素

.views
    .view
        .navbar
        .pages.navbar-through.toolbar-fixed
            .page
                .page-content
                .toolbar

//例子上是穿透与固定混合布局，其分别对应的类名与位置要一一对应。