Framework7学习笔记之Page的定义与Page初始化

一：Page

一个page文件定义了一个app页面，它可以定义该页面的导航栏、底部工具栏、中间详细内容等等。
  page通过加载到view容器中运行，而view在index.html中定义。

index.html定义了app的基本结构：引入样式文件、引入js文件、创建app标签、创建view标签。

因此，page的定义文件 XX.html 不需要在定义head、body等等部分，只需要使用 div 搭建出页面的 状态栏、侧边栏、页面内容(导航栏、主体部分、底部工具栏)。（不是每部分都要有，按需搭建即可）。

【注：view组件中也可以通过div搭建视图的 导航栏、二级导航栏、popup菜单等，但页面内容主体部分仍然需要通过 pages div 来引入或直接在其中定义一个page】

二：定义page文件

新建一个 页面名.html 文件，不需要在定义head、body等等部分、不需要导入样式、js文件，只需用div搭建页面内容即可。

<div class="page" data-name="页面名">
  <div class="page-content">
    页面内容：
          可选：状态栏、侧边栏、导航栏、list、滚动视图、工具栏等等
  </div>
</div>

三：page的跳转

可以通过 <a> 标签来加载、跳转页面。

四：page的生命周期函数

1）旧版

针对page的操作，最多就是在page的生命周期中进行一些操作，如：页面初始化时进行一些数据赋值等。

格式：

// Option 1. 为所有page的init事件定义相应函数
$$(document).on(‘pageInit‘, function (e) {
  // 在这里根据page的不同进行不同的操作

  var page = e.detail.page;//获取该事件发生的page  var pageName = page.name;//获取page名称  //根据pageName不同，进行不同操作

 }) // Option 2. 为每个page的init事件逐一定义函数（不推荐）【太分散】 $$(document).on(‘pageInit‘, ‘.page[data-page="about"]‘, function (e) { // Do something here when page with data-page="about" attribute loaded and initialized

  var page = e.detail.page;//获取该事件发生的page;  //通过page对象，调用一些page的属性 或者 方法。

})          

事件列表：

page的内置属性列表：

{
  id: ‘10‘,
  count: ‘20‘,
  color: ‘blue‘
}                  

2）新版

格式：与旧版一样。

// Option 1. Using one ‘page:init‘ handler for all pages
$$(document).on(‘page:init‘, function (e) {
  // Do something here when page loaded and initialized
})

// Option 2. Using live ‘page:init‘ event handlers for each page
$$(document).on(‘page:init‘, ‘.page[data-name="about"]‘, function (e) {
  // Do something here when page with data-name="about" attribute loaded and initialized
})

事件列表：

page数据：

五：回调函数

上面的方法中，还需要通过参数e获取page对象，比较麻烦。

F7提供了回调函数，针对上面的事件可以触发回调函数，回调函数的参数会自动把page对象传递过来，十分方便。

格式：

myApp.onPageBeforeInit(pageName, callback(page)) - 当Framework7把新页面(必须带有data-page属性)插入到DOM的时候会触发。

• pageName - string - 页面的 "data-page" 属性
• callback(page) - function - 要执行的回调. 会传入一个 Page Data 对象作为参数

myApp.onPageInit(pageName, callback(page)) - 当Framework7初始化一个页面(必须带有data-page属性)的组件和导航栏的时候会触发。

• pageName - string - 页面的 "data-page" 属性
• callback(page) - function - 要执行的回调. 会传入一个 Page Data 对象作为参数

myApp.onPageReinit(pageName, callback(page)) - "callback" function will be executed for specified cached page (with "pageName" data-page attribute) that becomes visible. It is only applicaple for Inline Pages (DOM cached pages)

• pageName - string - expected page‘s "data-page" attribute
• callback(page) - function - callback function that will be executed. As an argument it receives Page Data object

myApp.onPageBeforeAnimation(pageName, callback(page)) - 当一个页面(有 data-page 属性)初始化完成并且可以开始做动画的时候触发

• pageName - string - 页面的 "data-page" 属性
• callback(page) - function - 要执行的回调. 会传入一个 Page Data 对象作为参数

myApp.onPageAfterAnimation(pageName, callback(page)) - 当一个页面(有 data-page 属性)动画完成之后会触发

• pageName - string - 页面的 "data-page" 属性
• callback(page) - function - 要执行的回调. 会传入一个 Page Data 对象作为参数

myApp.onPageBeforeRemove(pageName, callback(page)) - 当一个页面(有 data-page 属性)从DOM移除之前会触发

• pageName - string - 页面的 "data-page" 属性
• callback(page) - function - 要执行的回调. 会传入一个 Page Data 对象作为参数

myApp.onPageBack(pageName, callback(page)) - 当页面开始执行返回动画之前调用。区别于 "onPageBeforeAnimation", 这个函数在老的页面上也会调用，也就是从中间向右滑动的那个页面。

• pageName - string - 你要操作的page的 "data-page" 指定的名字
• callback(page) - function - 回调函数。这个函数会接收一个 Page Data 对象作为参数。

myApp.onPageAfterBack(pageName, callback(page)) - 当页面开始执行返回动画完成之后调用。区别于 "onPageBeforeAnimation", 这个函数在老的页面上也会调用，也就是从中间向右滑动的那个页面。

• pageName - string - 你要操作的page的 "data-page" 指定的名字
• callback(page) - function - 回调函数。这个函数会接收一个 Page Data 对象作为参数。

六：让页面在app初始化之前初始化

因为我们在js文件中是先创建的app对象，在定义各个页面的回调函数的，所以app初始化时不能获取到页面的回调函数的结果。

对于这种情况，我们可以将app的初始化动作改为手动，在页面的回调函数之后执行：

var myApp = new Framework7({
  init: false //Disable App‘s automatica initialization
});          

//Now we add our callback for initial page
myApp.onPageInit(‘home‘, function (page) {
  //Do something here with home page
});

//And now we initialize app
myApp.init();

原文地址：https://www.cnblogs.com/ygj0930/p/8445044.html