Question

我使用jQuery Mobile（JQM）开发了几个多页面应用程序，并计划使用Framework7。

在JQM中，我创建了几个HTML页面及其各自的JS文件

login.html
login.js

home.html
home.js

payment.html
payment.js

所有js文件都链接在各自的html页面中

<div data-role="page">
    <script src="js/login.js"></script>
</div>

使用$.mobile.changepage打开页面时，会触发相应js中的页面事件（pageinit，pageshow等）。所有控制事件都以$('#element').on('click', function(e){});

处理但是，我无法在Framework7中实现此功能。需要有关此的指导。我尝试将JS添加到HTML文件中，但没有添加。

Answer 1

首先要注意的是，Framework7需要在运行任何脚本之前进行初始化。因此，您需要首先在html页面中添加framework7 js。对于framework7应用程序，页面的方法与jQM略有不同。您可以在F7中创建两种类型的页面 1）您可以在单个html文件中创建所有页面 2）多个html页面。
F7具有特定的视图定义，这对于创建html页面很重要。因此在F7中需要主视图。在初始化f7之后，您还需要初始化主视图。
要在页面之间导航，您需要使用路由器api。对于ie：

mainView.router.load(selector) // selector can be data-page/html file name

Mainview是View的对象，需要在F7 init之后初始化。

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

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

从Git下载F7主机并查看示例文件夹。它会让您对所有视图和页面有所了解。
希望这有帮助

Answer 2

mainView.router.loadPage('ur_page.html');

将解决您的应用/网站中的页面导航。

Framework7中的多页面应用程序

2 个答案: