赞助商成为赞助商

应用 / 核心

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

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

此构造函数返回主应用程序 Framework7 实例。

应用程序参数

让我们看看可用参数列表

参数类型默认描述
el字符串body应用程序根元素。如果您的主应用程序布局不是 <body> 的直接子元素，则需要在此处指定根元素
component路由器组件从传递的 主应用程序组件 加载应用程序布局。仅适用于 Framework7 核心版本
componentUrl字符串组件要通过 XHR 加载的单个文件 主应用程序组件 的路径。仅适用于 Framework7 核心版本
name字符串Framework7应用程序名称。可以被其他组件使用，例如作为 对话框 组件的默认标题。
theme字符串自动应用程序主题。可以是 ios、md 或 auto。如果是 auto，它将为 iOS 设备使用 iOS 主题，为所有其他设备使用 MD 主题。
colors对象应用程序颜色。必须是一个带有必需 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字符串用户代理字符串。在服务器端环境中使用时需要此选项才能正确检测设备。
routes数组[]包含所有视图的默认路由的数组。
lazyModulesPath字符串Framework7 的延迟加载组件的路径。需要使用浏览器模块的 延迟加载模块。
darkMode布尔值
字符串		未定义如果设置为 true，则启用暗模式。如果设置为 false，则禁用暗模式。如果设置为 auto，则根据用户系统配色方案首选项自动启用暗主题。此功能支持基于 (prefers-color-scheme) 媒体查询支持。
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'应被视为外部链接且不应由 Framework7 处理的链接的 CSS 选择器。例如，这样的 '.external' 值将匹配 <a href="somepage.html" class="external">（带有类“external”）之类的链接
}
触摸模块参数
touch对象包含与触摸模块相关的参数的对象
var app = new Framework7({
  touch: {
    tapHold: true,
  }
})
{
touchClicksDistanceThreshold数字5防止短滑动的距离阈值（以像素为单位）。因此，如果点击/移动距离大于此值，则不会触发“点击”。
disableContextMenu布尔值false设置为 true 以禁用上下文菜单（右键单击或点击并按住）
tapHold布尔值false启用点击并按住
tapHoldDelay数字750确定用户必须在目标元素上按住多长时间（以毫秒为单位）才会触发 taphold 事件
tapHoldPreventClicks布尔值true启用后（默认情况下），点击事件将不会在点击并按住事件后触发
activeState布尔值true启用后，应用程序会将“active-state”类添加到当前触摸的（：active）元素。
activeStateElements字符串a, button, label, span, .actions-button, .stepper-button, .stepper-button-plus, .stepper-button-minus, .card-expandable, .menu-item, .link, .item-link, .accordion-item-toggle启用了 activeState 的元素的 CSS 选择器将添加适当的活动类
activeStateOnMouseMove布尔值false启用后，鼠标移动时会保持“活动状态”
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-toggle要应用触摸波纹效果的元素的 CSS 选择器
touchRippleInsetElements字符串.ripple-inset, .icon-only, .searchbar-disable-button, .input-clear-button, .notification-close-button, .md .navbar .link.back要应用插入触摸波纹效果的元素的 CSS 选择器
}
serviceWorker对象包含服务工作程序模块参数的对象
var app = new Framework7({
  serviceWorker: {
    path: './service-worker.js',
    scope: '/',
  }
})
{
path字符串服务工作程序文件的路径
scope字符串服务工作程序范围的路径
}

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

大多数具有 JavaScript API 的组件都可以使用名为 component 的属性扩展此参数列表。例如，面板组件使用接受面板特定参数的 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,
  },
});

应用程序方法和属性

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

属性
app.name在参数中传递的应用程序名称
app.routes应用程序路由
app.el应用程序根 HTML 元素
app.$el具有应用程序根 HTML 元素的 Dom7 实例
app.rtl布尔属性，指示应用程序是否采用 RTL 布局
app.theme包含当前应用程序主题的字符串。可以是 md、ios
app.darkMode指示深色主题是否活动的布尔属性。
app.width应用程序宽度（以像素为单位）
app.height应用程序高度（以像素为单位）
app.left应用程序左侧偏移量（以像素为单位）
app.top应用程序顶部偏移量（以像素为单位）
app.initialized指示应用程序是否已初始化的布尔属性
app.$Dom7 别名
app.params应用程序参数
app.support包含有关支持功能属性的对象。请查看支持实用程序部分
app.device包含有关设备属性的对象。请查看设备实用程序部分
app.utils包含一些有用实用程序的对象。请查看实用程序部分
app.serviceWorker.containerService worker 容器 (navigator.serviceWorker)
app.serviceWorker.registrations已注册 service worker 的数组
app.online指示应用程序连接状态的布尔属性。（如果在线，则为 true）
方法
app.setColorTheme(color)设置主要颜色主题。color 必须是十六进制颜色，例如 #ff0000
app.setDarkMode(mode)如果 mode 为 true，则启用深色模式。如果 mode 为 false，则禁用深色模式。如果 mode 为 auto，则根据用户系统配色方案偏好自动启用深色主题。
app.on(event, handler)添加事件处理程序
app.once(event, handler)添加在触发后将被移除的事件处理程序
app.off(event, handler)移除事件处理程序
app.off(event)移除指定事件的所有处理程序
app.emit(event, ...args)在实例上触发事件
app.init()初始化应用程序。如果您使用 init: false 参数禁用了自动初始化。
app.serviceWorker.register(path, scope)注册 service worker。它会返回一个解析为 ServiceWorkerRegistration 的 promise。
app.serviceWorker.unregister(registration)取消注册 service worker。它会返回一个在 service worker 取消注册时解析的 promise。

与应用程序参数一样，大多数具有 JavaScript API 的组件都可以使用名为 component 的属性来扩展此属性列表。例如，Panel 组件使用接受 Panel 特定属性和方法的 panel 属性扩展了应用程序实例属性。

例子

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

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

应用程序事件

应用程序实例会发出以下核心事件

事件参数描述
init事件将在应用程序初始化时触发。在 new Framework7() 之后自动触发，或者如果您禁用了自动初始化，则在 app.init() 之后自动触发。
resize事件将在应用程序调整大小时触发（窗口调整大小）。
orientationchange事件将在应用程序方向更改时触发（窗口方向更改）。
click(event)事件将在应用程序点击时触发
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）Service Worker 成功注册时触发事件
serviceWorkerRegisterError（error）Service Worker 注册失败时触发事件
serviceWorkerUnregisterSuccess（registration）Service Worker 成功注销时触发事件
serviceWorkerUnregisterError（registration, error）Service Worker 注销失败时触发事件
online应用程序上线时触发事件
offline应用程序离线时触发事件
connection（isOnline）网络状态改变时触发事件
darkModeChange（isDarkTheme）设备首选配色方案更改时触发事件。仅当 darkMode 参数设置为 'auto' 时才有效

同样，大多数具有 JavaScript API 的组件可能会扩展此事件列表，例如 Panel 组件也会在应用程序实例上触发其他事件。

示例

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);
}
改进此文档
在本页