应用 / 核心

当我们初始化应用时，我们可以使用new Framework7构造函数，并传递一个包含主应用参数的对象：

var app = new Framework7({
  // Enable swipe panel
  panel: {
    swipe: true,
  },
  // ... other parameters
});

这个构造函数返回主应用 Framework7 实例。

App参数

让我们看看可用参数的列表：

参数类型默认描述
el字符串body应用根元素。如果你的主应用布局不是直接子元素<body>，那么必须在这里指定根元素
组件上传递单独的属性路由组件从传递的主应用组件加载应用布局。仅适用于 Framework7 核心版本
组件Url字符串组件单文件路径主应用组件通过 XHR 加载。仅适用于 Framework7 核心版本
name字符串Framework7应用名称。其他组件可以使用它，例如作为默认标题对话框组件。
主题字符串自动应用主题。可以是ios, md或auto。如果设置为auto，它将使用 iOS 主题的 iOS 设备和 MD 主题的所有其他设备。
颜色对象应用颜色。必须是一个带有必需primary键和其他你可能需要的颜色的对象。对于这里指定的所有颜色，应用将使用 Material You 色彩调板生成动态 CSS 样式。默认为：
{
  primary: '#007aff',
  red: '#ff3b30',
  green: '#4cd964',
  blue: '#2196f3',
  pink: '#ff2d55',
  yellow: '#ffcc00',
  orange: '#ff9500',
  purple: '#9c27b0',
  deeppurple: '#673ab7',
  lightblue: '#5ac8fa',
  teal: '#009688',
  lime: '#cddc39',
  deeporange: '#ff6b22',
  white: '#ffffff',
  black: '#000000',
}
userAgent字符串用户代理字符串。在服务器端环境中使用时，需要它以进行正确的设备检测。
路由数组[]默认路由到所有视图的数组。
lazyModulesPath字符串Framework7 的懒加载组件的路径。使用浏览器模块时需要它。懒加载模块darkMode
darkMode布尔值
字符串		undefined如果设置为true，启用暗黑模式。如果设置为false，禁用暗黑模式。如果设置为auto，根据用户系统色彩方案偏好自动启用暗黑主题。此功能支持基于(prefers-color-scheme)media query 支持.
init布尔值true默认情况下，当您调用new Framework7()时，Framework7 将自动初始化。如果您想阻止此行为，您可以使用此选项禁用它，然后在需要时手动使用app.init()初始化它。
initOnDeviceReady布尔值true如果使用init: true参数启用自动初始化，并且应用在 cordova 环境下运行，则它将在deviceready事件上初始化。
iosTranslucentBars布尔值true在 iOS 主题的导航栏上启用半透明效果（模糊背景）（在 iOS 设备上）
iosTranslucentModals布尔值true在 iOS 主题的模态（对话框、弹出框、操作）上启用半透明效果（模糊背景）（在 iOS 设备上）
on对象{}

带有事件处理程序的对象。例如：

var app = new Framework7({
  on: {
    init: function () {
      console.log('App initialized');
    },
    pageInit: function () {
      console.log('Page initialized');
    },
  }
})
点击模块参数
clicks对象与点击模块相关的参数对象：
var app = new Framework7({
  clicks: {
    externalLinks: '.external',
  }
})
{
externalLinks字符串'.external'CSS 选择器，用于将链接视为外部链接，并且不应由 Framework7 处理。例如，'.external' 值将匹配具有 "external" 类的链接<a href="somepage.html" class="external">(具有 "external" 类)
}
触摸模块参数
touch对象与触摸模块相关的参数对象：
var app = new Framework7({
  touch: {
    tapHold: true,
  }
})
{
touchClicksDistanceThreshold数字5防止短滑动的距离阈值（以 px 为单位）。因此，如果点击/移动距离大于此值，则不会触发 "click"。
disableContextMenu布尔值false设置为 true 以禁用上下文菜单（使用右键单击或长按）
tapHold布尔值false启用长按
tapHoldDelay数字750确定用户必须按住多长时间（以 ms 为单位），才能在目标元素上触发 taphold 事件
tapHoldPreventClicks布尔值true启用后（默认情况下），点击事件将在长按事件后不会触发
activeState布尔值true启用后，应用将向当前触摸的 (:active) 元素添加 "active-state" 类。
activeStateElements字符串a, button, label, span, .actions-button, .stepper-button, .stepper-button-plus, .stepper-button-minus, .card-expandable, .menu-item, .link, .item-link, .accordion-item-toggleCSS 选择器，用于在启用的元素中添加适当的 active 类activeStateactiveStateOnMouseMove
activeStateOnMouseMove布尔值false启用后，在鼠标移动时保持 "active state"
iosTouchRipple布尔值false为 iOS 主题启用触摸涟漪效果
mdTouchRipple布尔值true为 MD 主题启用触摸涟漪效果
touchRippleElements字符串.ripple, .link, .item-link, .list-button, .links-list a, .button, button, .input-clear-button, .dialog-button, .tab-link, .item-radio, .item-checkbox, .actions-button, .searchbar-disable-button, .fab a, .checkbox, .radio, .data-table .sortable-cell:not(.input-cell), .notification-close-button, .stepper-button, .stepper-button-minus, .stepper-button-plus, .menu-item-content, .list.accordion-list .accordion-item-toggleCSS 选择器，用于在点击时应用触摸涟漪效果
touchRippleInsetElements字符串.ripple-inset, .icon-only, .searchbar-disable-button, .input-clear-button, .notification-close-button, .md .navbar .link.backCSS selector of elements to apply inset touch ripple effect on click
}
serviceWorker对象服务工作者模块参数对象：
var app = new Framework7({
  serviceWorker: {
    path: './service-worker.js',
    scope: '/',
  }
})
{
路径字符串服务工作者文件的路径
scope字符串Path to service worker scope
}

这些是应用核心模块的默认应用参数。

大多数具有 JavaScript API 的组件可以通过名为 component 的属性扩展此参数列表。例如面板component 属性扩展应用参数，接受特定于 Panel 的参数。panel示例：

示例：

var app = new Framework7({
  // Extended by Panel component:
  panel: {
    swipe: true,
    visibleBreakpoint: 1024,
  },
  // Extended by Dialog component:
  dialog: {
    title: 'My App',
  },
  // Extended by Statusbar component:
  statusbar: {
    iosOverlaysWebview: true,
  },
});

App方法与属性

返回的 Framework7 实例app包含许多有用的属性和方法：

属性
app.name传递的参数中的应用名称
app.routes应用路由
app.el应用根 HTML 元素
app.$el包含应用根 HTML 元素的 Dom7 实例
app.rtl布尔属性指示应用是否为从右到左布局
app.theme包含当前应用主题的字符串。可以是md, ios
app.darkMode布尔属性指示暗黑主题是否激活。
app.width应用宽度（以 px 为单位）
app.height应用高度（以 px 为单位）
app.left应用左偏移（以 px 为单位）
app.top应用顶部偏移（以 px 为单位）
app.initialized布尔属性指示应用是否已初始化。
app.$Dom7别名
app.params应用参数
app.support一个具有关于支持功能的属性的对象。查看支持工具部分
app.device一个具有关于设备属性的对象。查看设备工具部分
app.utils一个具有一些有用工具的对象。查看实用工具部分
app.serviceWorker.container服务工作者容器（navigator.serviceWorker)
app.serviceWorker.registrations注册的服务工作者数组
app.online指示app连接状态的布尔属性。（true在线时）
方法
app.setColorTheme(color)设置主色调。color必须是HEX颜色，例如#ff0000
app.setDarkMode(模式)如果mode是true，启用暗模式。如果mode是false，禁用暗模式。如果mode是auto根据用户系统配色方案偏好自动启用暗主题。
app.on(事件上触发, 处理程序)添加事件处理程序
app.once(事件上触发, 处理程序)添加在触发后将被移除的事件处理程序
app.off(事件上触发, 处理程序)移除事件处理程序
app.off(事件上触发)移除指定事件的所有处理程序
app.emit(事件上触发, ...args)在实例上触发事件
app.init()初始化app。如果你使用init: falseparameter
禁用了自动初始化路径, scope)注册服务工作者。它返回一个将解析为ServiceWorkerRegistration
app.serviceWorker.unregister(registration)注销服务工作者。它返回一个将在服务工作者注销时解析的承诺。

与app参数类似，大多数具有JavaScript API的组件都可以通过名为组件的属性扩展此属性列表。例如，Panel组件通过panel属性扩展app实例属性，该属性接受Panel特定属性和方法。

示例：

// Open panel
app.panel.open('left');

// Hide statusbar
app.statusbar.hide();

App Events

App实例发出以下核心事件：

事件参数描述
init在app初始化时触发的事件。在new Framework7()或在app.init()如果你禁用了自动初始化。
resize在app调整大小（窗口调整大小）时触发的事件。
orientationchange在app方向改变（窗口方向改变）时触发的事件。
click(event)在app点击时触发的事件
touchstart:active(event)在触摸开始（mousedown）事件添加为活动监听器时触发的事件（可以阻止默认行为）
touchmove:active(event)在触摸移动（mousemove）事件添加为活动监听器时触发的事件（可以阻止默认行为）
touchend:active(event)在触摸结束（mouseup）事件添加为活动监听器时触发的事件（可以阻止默认行为）
touchstart:passive(event)在触摸开始（mousedown）事件添加为被动监听器时触发的事件（无法阻止默认行为）
touchmove:passive(event)在触摸移动（mousemove）事件添加为被动监听器时触发的事件（无法阻止默认行为）
touchend:passive(event)在触摸结束（mouseup）事件添加为被动监听器时触发的事件（无法阻止默认行为）
serviceWorkerRegisterSuccess（registration）当服务工作者成功注册时触发的事件
serviceWorkerRegisterError（error）当服务工作者注册失败时触发的事件
serviceWorkerUnregisterSuccess（registration）当服务工作者成功注销时触发的事件
serviceWorkerUnregisterError（registration, error）当服务工作者注销失败时触发的事件
online当app上线时触发的事件
offline当app离线时触发的事件
connection（isOnline）在网络状态改变时触发的事件
darkModeChange（isDarkTheme）在设备首选配色方案改变时触发的事件。它仅在darkMode参数设置为'auto'

时有效。

示例：

app.on('panelOpen', function (panel) {
  console.log('Panel ' + panel.side + ' opened');
});

app.on('connection', function (isOnline) {
  if (isOnline) {
    console.log('app is online now')
  } else {
    console.log('app is offline now')
  }
});

app.on('darkModeChange', function (isDark) {
  if (isDark) {
    console.log('color scheme changed to Dark')
  } else {
    console.log('color scheme changed to Light')
  }
});

CSS 变量

/*====================
  Core
  ==================== */
:root {
  --f7-safe-area-left: 0px;
  --f7-safe-area-right: 0px;
  --f7-safe-area-top: 0px;
  --f7-safe-area-bottom: 0px;

  --f7-safe-area-outer-left: 0px;
  --f7-safe-area-outer-right: 0px;

  @supports (left: env(safe-area-inset-left)) {
    --f7-safe-area-top: env(safe-area-inset-top);
    --f7-safe-area-bottom: env(safe-area-inset-bottom);
    .ios-left-edge,
    .ios-edges,
    .safe-area-left,
    .safe-areas,
    .popup,
    .sheet-modal,
    .panel-left {
      --f7-safe-area-left: env(safe-area-inset-left);
      --f7-safe-area-outer-left: env(safe-area-inset-left);
    }
    .ios-right-edge,
    .ios-edges,
    .safe-area-right,
    .safe-areas,
    .popup,
    .sheet-modal,
    .panel-right {
      --f7-safe-area-right: env(safe-area-inset-right);
      --f7-safe-area-outer-right: env(safe-area-inset-right);
    }
    .no-safe-areas,
    .no-safe-area-left,
    .no-ios-edges,
    .no-ios-left-edge {
      --f7-safe-area-left: 0px;
      --f7-safe-area-outer-left: 0px;
    }
    .no-safe-areas,
    .no-safe-area-right,
    .no-ios-edges,
    .no-ios-right-edge {
      --f7-safe-area-right: 0px;
      --f7-safe-area-outer-right: 0px;
    }
  }

  --f7-device-pixel-ratio: 1;
  @media (min-resolution: 2dppx) {
    --f7-device-pixel-ratio: 2;
  }
  @media (min-resolution: 3dppx) {
    --f7-device-pixel-ratio: 3;
  }
}
/*====================
  Fonts & Bars
  ==================== */
:root {
  --f7-font-size: 14px;

  --f7-bars-translucent-opacity: 0.8;
  --f7-bars-translucent-blur: 20px;
}
.ios {
  --f7-font-family: -apple-system, SF Pro Text, SF UI Text, system-ui, Helvetica Neue, Helvetica, Arial, sans-serif;
  --f7-line-height: 1.4;
  /*
  --f7-bars-link-color: var(--f7-theme-color);
  */
  --f7-bars-text-color: #000;
  --f7-text-color: #000;
  --f7-bars-bg-color: #f7f7f8;
  --f7-bars-bg-color-rgb: 247, 247, 248;
  --f7-bars-border-color: rgba(0,0,0,0.25);
}
.ios .dark,
.ios.dark {
  --f7-bars-text-color: #fff;
  --f7-text-color: #fff;
  --f7-bars-bg-color: #121212;
  --f7-bars-bg-color-rgb: 22, 22, 22;
  --f7-bars-border-color: rgba(255,255,255,0.16);
}

.md {
  --f7-font-family: Roboto, system-ui, Noto, Helvetica, Arial, sans-serif;
  --f7-line-height: 1.5;
  --f7-bars-border-color: transparent;
  --f7-text-color: #212121;
}
.md .dark,
.md.dark {
  --f7-text-color: rgba(255,255,255,0.87);
}

.md,
.md .dark,
.md [class*='color-'] {
  --f7-bars-link-color: var(--f7-md-on-surface);
  --f7-bars-bg-color: var(--f7-md-surface-2);
  --f7-bars-bg-color-rgb: var(--f7-md-surface-2-rgb);
}

/*====================
  Color Themes
  ==================== */
.text-color-primary {
  --f7-theme-color-text-color: var(--f7-theme-color);
}
.bg-color-primary {
  --f7-theme-color-bg-color: var(--f7-theme-color);
}
.border-color-primary {
  --f7-theme-color-border-color: var(--f7-theme-color);
}
.ripple-color-primary {
  --f7-theme-color-ripple-color: rgba(var(--f7-theme-color-rgb), 0.3);
}
改进此文档
在本页上