动态页面
优质
小牛编辑
127浏览
2023-12-01
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
来改变。