动态页面

Framework7 可以创建动态页面并直接加载，不需要额外的Ajax请求。

只有通过 路由器 API 才可以实现。

加载页面的结构、禁用滑动返回上一页和返回上一页等，所有这些需要考虑的事情都和 Ajax Pages 是一样的。

我们只需要使用视图的 .router.loadContent 方法，并且传入我们新页面的HTML代码即可。

// Init app
var myApp = new Framework7();
 
// Init main view
var mainView = myApp.addView('.view-main');
 
// HTML Content of new page:
var newPageContent = '<div class="page" data-page="my-page">' +
                        '<div class="page-content">' +
                          '<p>Here comes new page</p>' +
                        '</div>' +
                      '</div>';
 
//Load new content as new page
mainView.router.loadContent(newPageContent);
 
// OR using .load method if need more options
mainView.router.load({
  content: newPageContent,
  animatePages: false
});

因为写多行JS代码很不方便，所以我们一般把模板直接存在在 index.html 中的script标签中：

<script type="text/template" id="myPage">
    <div class="navbar">
        <div class="navbar-inner">
            <div class="center">My Page</div>
        </div>
    </div>
    <div class="page" data-page="my-page">
        <div class="page-content">
            <p>Here comes page content</p>
        </div>
    </div>
</script>  

在JS中只需要这样:

mainView.router.loadContent($('#myPage').html());

动态页面的URL

默认情况下，动态页面的url是这样的：#content-{{index}},其中 {{index}} 是浏览历史中的序号。你可以在 初始化应用 的时候传入一个 dynamicPageUrl 来改变。