Framework7(03:基本布局,视图View)

2023年8月4日 405次阅读 来源: 廖马儿

1.App基本布局

布局结构非常简单，引用Framework7的CSS样式文件到<head>，引用JS文件到<body>的结束标签之前。

Material布局同样很容易理解，不同点在于其引用了不同的CSS文件，同时，页面布局上有一个很重要的不同点：即导航栏和工具栏放置在页面结构内部。

在my-app.js中初始化应用。

2.从右到左布局

Note that all RTL "mirrors" in RTL mode are made using CSS only, so you should not change order of HTML elements and keep it in LTR way.

3.初始化应用

比如在 my-app.js中.
var myApp = new Framework7();
这样初始化非常简单，但是Framework7也提供了更多个性化的定制，只需要在初始化的时候传入一个配置对象即可。

var myApp = new Framework7({ 
    pushState: true, 
    swipePanel: 'left', 
    // ... other parameters 
});

4.View

View (<div class=”view”>) – 在应用中是一个独立的部分，她有自己的设置、页面切换和历史。每一个视图都可以有不同的导航栏、工具栏布局和不同的样式。所以View就像是嵌在应用中的另一个应用。这种功能可以让你来分别操作一个应用中的不同部分。

Views (<div class=”views”>) – 是所有可见View的容器（不包括Modal和Panel）。Views 是你的应用主容器。一个应用中只能有一个 Views

View 可以放在应用中的任何位置，但是有一个重要的规则 – 所有的可见 View都应该放在 Views (<div class=”views”>)中。因为我们会用来做页面切换的动画。

5.Main View
主视图会有一个 view-main 的class，因为我们会默认把所有的链接加载的页面放进主视图中。 并且，你使用 pushState hash navigation 的时候也是只在主视图中工作。

6.初始化View

在我们的HTML中已经有需要的 view，并且应用已经初始化了，现在我们需要在JavaScript中初始化我们的 view。
注意不是所有的view都需要初始化，只有你需要浏览的那些view才需要。其他的view（比如 popup）不需要初始化，我们仅仅用来正确的布局navbar，pages和toolbars。

在之前我们把应用初始化的实例存放在 myApp 变量中。

var myApp = new Framework7({
     // ...
});

myApp.addView(selector, parameters) – initialize View.

/* Initialize views */
var mainView = myApp.addView('.view-main', {         
    dynamicNavbar: true
})
var anotherView = myApp.addView('.another-view');

这个例子中我们没有初始化在 panel和 popup中的view，因为我们不需浏览他们。但是如果你需要浏览这些，你就需要初始化他们。

从DOM中获取到view 的实例:

var viewsElement = $$('.view-main')[0];
var viewInstance = viewsElement.f7View;

Framework学习交流QQ群：548512517

    原文作者：廖马儿
    原文地址: https://www.jianshu.com/p/2b05a73021bf
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞