史上最全的Framework7面试题和答案详解

下面列出了最常见的Framework7面试问题和答案, 以供新生和有经验的人士参考。

1)什么是Framework7？

Framework7是一个免费的开源移动HTML框架。它用于为iOS和Android设备开发混合移动应用程序或Web应用程序。它与其他框架兼容, 例如Angular, React。

2)Framework7是在哪一年引入的？

Framework7于2014年推出。其最新版本v3.1.1已于MIT许可, 于2018年8月3日发布。

3)Framework7受欢迎的原因是什么？

Framework7之所以受欢迎是因为以下原因：

• 它可以帮助你开发适用于iOS和Android的应用程序。
• Framework7的学习曲线非常简单。
• Framework7具有许多预样式化的小部件/组件。
• 它具有内置的帮助程序库。

4)Framework7的主要功能是什么？

Framework7的主要功能：

• Framework7是一个开放源代码框架, 因此可以免费使用。
• Framework7具有简单而熟悉的jQuery语法, 因此你可以非常轻松地学习它。
• Framework7具有内置的FastClick库, 因此触摸UI的控制单击延迟非常容易。
• Framework7具有内置的网格系统布局, 用于响应性地排列元素。
• Framework7通过灵活的路由器API从模板动态加载页面。

5)Framework7有哪些优势？

Framework7的优点：

• Framework7不依赖任何第三方库。
• Framework7具有用于DOM操作的自定义DOM7。
• Framework7也可以与Angular和React框架一起使用。
• 只要知道HTML, CSS和一些基本的JavaScript, Framework7便可以帮助你创建应用程序。
• 它支持通过Bower进行更快的开发。
• 无需学习即可轻松开发适用于iOS和Android的应用程序。

6)Framework7的缺点是什么？

Framework7的缺点：

• Framework7仅支持iOS和Android等平台。
• 对Framework7的在线社区支持不如iOS和Andriod广泛。

7)Framework7有几种布局？

Framework7为你的应用程序提供了不同类型的布局。它主要支持四种类型的Navbar / Toolbar布局：

• 静态布局：静态布局是最常用的布局类型, 包括导航栏和工具栏, 它们可以是可滚动的页面内容, 并且每个页面都包含其导航栏和工具栏。
• 固定版式：固定版式使用其导航栏和工具栏, 这些导航栏和工具栏在屏幕上可见, 而在页面上无法滚动。
• 直通布局：在直通布局中, 导航栏和工具栏对于单个视图中的所有页面均显示为固定。
• 混合布局：此布局是在单个视图中上述所有布局的混合。

8)什么是Framework7中的导航栏？

导航栏中的三个部分可以通过以下方式包含任何HTML内容：

• 左：旨在放置反向链接图标或单个文本链接。
• 中心：用于显示页面标题或标签链接。
• 右：该部分可以与左部分类似地使用。

9)Framework7中不同的导航栏有什么用途？

以下是具有详细信息的不同导航栏的列表：

基本导航栏：可以使用导航栏, 内部导航栏, 左, 中和右类创建基本导航栏。

带有链接的导航栏：要在导航栏的左侧和右侧使用链接, 请在类链接中添加<a>标记。

多个链接：要使用多个链接, 请在你选择的部分中再添加几个<a class=”link”>。

带有文本和图标的链接：可以通过添加图标类并使用<span>元素包装链接文本来为链接提供图标和文本。

仅带有图标的链接：通过向链接添加仅图标类, 可以为Navbar链接提供仅图标。

相关的应用程序和视图方法：初始化视图时, framework7允许你使用可用于导航栏的方法。

自动隐藏导航栏：对于某些不需要导航栏的Ajax加载页面, 导航栏可以自动隐藏/显示。

10)Framework7中的工具栏是什么？

工具栏用于通过使用屏幕底部的导航元素来轻松访问其他页面。

11)使用什么不同的Framework7工具栏？

你可以按照表中指定的两种方式使用工具栏。

• 隐藏工具栏：如果要在加载页面时自动隐藏工具栏, 请使用no-toolbar类来加载页面。
• 底部工具栏：使用工具栏底部类将工具栏放置在页面底部。

12)工具栏使用哪些不同的方法？

以下是工具栏使用的方法的列表：

• myApp.hideToolbar(toolbar)：隐藏指定的工具栏。
• myApp.showToolbar(toolbar)：显示指定的工具栏。
• view.hideToolbar()：在视图中隐藏指定的工具栏。
• view.showToolbar()：在视图中显示指定的工具栏。

13)什么是Framework 7中的搜索栏？

通过使用SearchBar类在Framework 7中获得SearchBar。用于搜索元素。

14)框架7中有哪些不同的SearchBar属性？

以下是不同的SearchBar属性的列表：

• mySearchbar.params：它表示随对象传递的初始化参数。
• mySearchbar.query：它搜索当前查询。
• mySearchbar.searchList：它定义搜索列表块。
• mySearchbar.container：它使用HTML元素定义搜索栏容器。
• mySearchbar.input：它使用HTML元素定义搜索栏输入。
• mySearchbar.active：它定义是启用还是禁用搜索栏。

15)有什么不同的SearchBar方法？

以下是SearchBar方法的列表：

• mySearchbar.search(query)：此方法用于搜索传递的查询。
• mySearchbar.enable()：用于启用搜索栏。
• mySearchbar.disable()：用于禁用搜索栏。
• mySearchbar.clear()：它有助于你清除查询和搜索结果。
• mySearchbar.destroy()：用于破坏搜索栏实例。

16)你对Framework 7中的内容块是什么意思？

在Framework 7中, 内容块使你能够添加其他格式的额外内容。通常, 当你有许多不同类型的内容并且必须将所有内容放在页面上时使用。例如：

<div class = "page-content">  
                     <p>This is out side of content block!!!</p>      
                     <div class = "content-block">  
                        <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium   
                        doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis   
                        et quasi architecto beatae vitae dicta sunt explicabo.</p>  
                     </div>

有关完整的示例：单击此处

17)什么是Framework 7中的布局网格？

Framework7提供了不同类型的网格类型, 可根据用户需求放置内容。

布局网格用于提供不同类型的列大小。

有关更多：单击此处。

18)你对Framework 7中的Overlays了解什么？

在Framework7中, 叠加层用于顺利地与应用程序协同工作。以下是Framework 7中一些叠加层的列表：

• 模态：模态是一个小窗口, 用于显示来自不同来源的内容而不会离开父窗口。
• 弹出窗口：弹出窗口是一个弹出框, 用于在用户单击元素时显示内容。
• 弹出窗口：它管理临时内容的显示。
• 操作表：操作表用于向用户展示如何处理给定任务的一组可能性。
• 登录屏幕：覆盖登录屏幕显示登录屏幕格式, 可以在页面或弹出窗口中使用, 也可以作为独立覆盖使用。
• 选择器模式：选择器模式用于选择一些自定义内容, 类似于日历选择器。

19)框架7中的进度条是什么？

进度条可用于向用户显示资产的负载或任务的进度。可以使用进度条类指定进度条。当用户不知道加载处理请求的时间时, 可以使用进度条无限类。

<div class = "progressbar-inline">  
                              <p><span data-progress = "10" class = "progressbar"></span></p>  
                                
                              <p class = "buttons-row">  
                                 <a href = "#" data-progress = "25" class = "button button-raised">25%</a>  
                                 <a href = "#" data-progress = "50" class = "button button-raised">50%</a>  
                                 <a href = "#" data-progress = "75" class = "button button-raised">75%</a>  
                                 <a href = "#" data-progress = "100" class = "button button-raised">100%</a>  
                              </p>  
                           </div>

有关完整的示例：单击此处。

20)Framework7中的手风琴是什么？

在Framework 7中, 手风琴是一个图形控制元素, 显示为堆叠的项目列表。可以扩展或拉伸每个手风琴以显示与该手风琴相关的内容。

有关完整的示例：单击此处。

21)框架7中用于手风琴的不同类有哪些？

Framework 7手风琴中使用以下类：

• 手风琴列表：这是一个可选类, 包含手风琴项目列表组。
• 手风琴项目：这是单个手风琴项目的必需类。
• 手风琴-项目-切换：这是用于扩展手风琴项目内容的必需类。
• 手风琴项目内容：这是用于隐藏手风琴项目内容的必需类。
• 手风琴项目扩展：这是一个扩展的手风琴项目。

22)Framework 7中有哪些功能卡？

Framework 7卡包含与单个主题相关的组织信息, 例如照片, 链接和文本。

以下是Framework 7卡类型的列表：

卡片HTML布局：基本的卡片HTML布局使用卡片类来安排其项目。

带卡的列表视图：通过将卡列表类添加到<div class =” list-block”>, 可以将卡用作列表视图元素。

23)Framework 7中的浮动操作按钮有什么用途？

Framework7浮动操作按钮用于提升操作。它就像漂浮在UI上方的带圆圈的图标, 并且具有包括变形, 启动和转移锚点在内的运动行为。

Framework7中使用3种类型的操作按钮：

1. 浮动操作按钮布局：非常简单。你必须将其放置为页面或视图的子级。
2. 变形弹出窗口：如果要在单击浮动操作按钮时打开弹出窗口, 则可以使用浮动按钮弹出窗口类。
3. 快速拨号：单击快速操作上的浮动操作按钮可以调用相关操作。

24)Framework 7中的选项卡是什么？

Framework7选项卡是一组按逻辑分组的内容, 可帮助你在它们之间移动并像手风琴一样快速节省空间。让我们看一下Framework7选项卡的布局：

<!-- Tabs wrapper should have "tabs" class. It is a required element -->
<div class = "tabs">
   <!-- The tab should have "tab" class and unique id attribute -->
   
   <!-- The tab is active by default - "active" class -->
   <div class = "tab active" id = "tab1">
      ...  The content for Tab 1 goes here ...
   </div>
   
   <!-- The second tab, should have "tab" class and unique id attribute -->
   <div class = "tab" id = "tab2">
      ... The content for Tab 2 goes here ...
   </div>
</div>

25)Framework 7中的消息栏是什么？

Framework7消息栏是可调整大小的工具栏, 可用于消息。它提供了一个可调整大小的特殊工具栏, 可与应用程序中的消息传递系统一起使用。

语法

<div class="page toolbar-fixed">  
  <div class="toolbar messagebar">  
  <div class="toolbar-inner">  
    <textarea placeholder="Message"></textarea><a href="#" class="link">Send</a>  
  </div>  
</div>     
</div>

26)Framework 7中的选择器是什么？

在Framework7中, 选取器是一个非常强大的组件, 它使你可以从列表中选择任何值, 还可以用来创建自定义叠加层选取器。它看起来像本机iOS选择器, 可以用作嵌入式组件或叠加层。

27)无限滚动在Framework 7中有什么用途？

当页面靠近底部时, 当你要加载其他内容并执行所需的操作时, 将使用”无限滚动”。

语法

<div class = "page">
   <div class = "page-content infinite-scroll" data-distance = "100">
      ...
   </div>
</div>

这里：

页面内容无限滚动：用于无限滚动容器。

data-distance：此属性用于配置距页面底部的距离(以px为单位)以触发无限滚动事件, 其默认值为50px。

28)什么是Framework 7中的自动完成功能？

在Framework7中, 自动完成功能是一种移动友好且触摸优化的组件, 可以是下拉列表, 也可以是独立方式。你可以使用JavaScript方法创建和初始化自动完成实例：

myApp.autocomplete(parameters)

在这里, 参数是用于初始化自动完成实例的必需对象。

29)我们如何在Framework 7中使用日期功能？

Framework7提供了日历组件, 它使你可以轻松地处理日期, 并且可以用作内联或覆盖组件。重叠式日历会自动转换为在平板电脑上弹出。

myApp.autocomplete(parameters)

在这里, 参数是用于初始化自动完成实例的必需对象。

30)Framework7中通知的用途是什么？

通知用于显示必需的消息, 这些消息看起来像”推送”(或”本地”)iOS通知。

Framework7通知的用法是：

1)

2)

3)

4)

Java基础面试问题

Java多线程面试问题

Java Collection面试题

Servlet面试问题

春季面试问题

PL / SQL面试问题

Oracle面试问题

SQL Server面试问题