CN116107681A - 界面交互方法、容器组件、计算机可读存储介质及设备 - Google Patents

Abstract

本申请实施例提供一种界面交互方法、容器组件、计算机可读存储介质及设备。本申请实施例提供了一种容器组件。该容器组件包括第一容器和第二容器；第一容器可响应于界面操作移动，第二容器跟随第一容器移动；第一容器承载的展示内容中包含有第二容器的第一列承载区承载的第一页面；第二容器包括多列承载区，一列承载区承载一个页面；多列承载区中除第一列承载区外的承载区隐藏。第二容器可响应于界面操作切换承载区以切换页面。有上述架构的容器组件，本申请实施例提供的方案便可基于该架构的容器组件做到展示内容滑动过程无实时监听、无实时计算还能具有较好的操作体验，页面操作更顺滑，出现卡顿掉帧的概率低。

Description

界面交互方法、容器组件、计算机可读存储介质及设备

技术领域

本申请涉及计算机技术领域，尤其涉及一种界面交互方法、容器组件、计算机可读存储介质及设备。

背景技术

客户端应用界面的交互体验越来越重要，好的交互体验能带来诸多效益。现阶段，电商客户端应用的导购页面(如首页)大多是通过H5(HTML5，HyperTwxt Markup Language,第五次修改的超文本标记语言)来实现的。这些页面在用户操作过程中，容易出现卡顿掉帧的情况，操作不顺滑。

发明内容

为改善现有技术存在的问题，本申请提供了一种界面交互方法、容器组件、计算机可读存储介质及设备。具体的，

在本申请的一个实施例中，提供了一种界面交互方法。该方法包括：

显示第一容器承载的展示内容；其中，所述展示内容包括第二容器的第一列承载区承载的第一页面；所述第二容器包括多列承载区，一列承载区承载一个页面；所述多列承载区中除所述第一列承载区外的承载区隐藏；

响应于滑动指令，所述第一容器移动，所述第二容器随动，使得所述展示内容滑动显示；

响应于切换指令，获取所述展示内容的滑动信息，并基于所述滑动信息确定所述第一页面的历史浏览记录，以在切换回所述第一页面时用于定位所述第一页面被切走前的浏览位置；

响应于所述切换指令，隐藏所述第一列承载区，显示所述第二容器的第二列承载区承载的第二页面。

在本申请的另一个实施例中，还提供了一种容器组件。该容器组件包括第一容器和第二容器；其中，

第一容器用于承载展示内容，所述展示内容包括第二容器的第一列承载区承载的第一页面；

所述第一容器还用于响应滑动指令移动，所述第二容器跟随所述第一容器移动，使得所述展示内容滑动显示；

所述第二容器包括多列承载区，一列承载区承载一个页面；所述多列承载区中除所述第一列承载区外的承载区隐藏；

所述第二容器还用于响应于切换指令切换承载区。

在本申请的又一实施例中，还提供了一种界面交互装置。该装置包括：

第二容器，包括多列承载区，一列承载区承载一个页面；

第一容器，用于承载展示内容；所述展示内容包括所述第二容器的第一列承载区承载的第一页面，所述多列承载区中除所述第一列承载区外的承载区隐藏；

交互组件，用于响应于滑动指令，控制所述第一容器移动，所述第二容器随动，使得所述展示内容滑动显示；还用于响应于切换指令，获取所述展示内容的滑动信息，并基于所述滑动信息确定所述第一页面的历史浏览记录，以在切换回所述第一页面时用于定位所述第一页面被切走前的浏览位置；还用于响应于所述切换指令，控制所述第二容器切换，以隐藏所述第一列承载区，显示所述第二容器的第二列承载区承载的第二页面。

本申请实施例还提供一种包括存储器、处理器及显示器；其中，所述存储器，用于存储计算机程序；

所述处理器，用于与所述存储器和所述显示器耦合，用于执行所述存储器中存储的所述计算机程序，以用于实现上述实施例提供的界面交互方法中的步骤。

本申请实施例还提供一种存储有计算机指令的计算机可读存储介质，当所述计算机指令被一个或多个处理器执行时，使得所述一个或多个处理器执行上述界面交互方法中的步骤。

本申请还有一实施例提供一种计算机程序产品，该计算机程序产品包括计算机程序或指令，当所述计算机程序或指令被处理器执行时，使得所述处理器执行上述界面交互方法中的步骤。

本申请实施例提供的一个技术方案中提供了一种容器组件。该容器组件包括第一容器和第二容器；第一容器可响应于界面操作移动，第二容器跟随第一容器移动；第一容器承载的展示内容中包含有第二容器的第一列承载区承载的第一页面；第二容器包括多列承载区，一列承载区承载一个页面；多列承载区中除第一列承载区外的承载区隐藏。第二容器可响应于界面操作切换承载区以切换页面。

有上述架构的容器组件作为基础，本申请实施例提供的方案便可基于该架构的容器组件做到展示内容滑动过程无实时监听、无实时计算还能具有较好的操作体验。具体的，本申请实施例提供的方案中，因为第二容器跟随第一容器移动，所以在发生切换指令时，再获取第一容器承载的展示内容的滑动信息，基于该滑动信息便可确定出当前要被切换走的第一页面的历史浏览记录，以在后续第一页面被切换回时用以定位第一页面的浏览位置。可见，本申请实施例提供的技术方案，能做到第一容器移动、第二容器随动过程中不需要实时跟踪监听计算，这就避免了实时监听计算对线程的占用，这就有助于提高页面的操作顺滑性。经过实际测试，进一步验证本申请实施例提供的技术方案，页面操作更顺滑，出现卡顿掉帧的概率低。

进一步的，本申请各实施例可基于React实现，这样在web浏览器环境下兼容性高，可投放在任意H5场景，且改动和发布成本均降低。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作一简单地介绍，显而易见地，下面描述中的附图是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。

图1为本申请一实施例提供的一种容器组件的结构示意图；

图2为本申请一实施例提供的容器组件中第二容器跟随第一容器移动使得多个标签4吸顶后的示意图；

图3为本申请一实施例提供的界面交互方法的流程示意图；

图4a为本申请一实施例示出的多个标签4滑动距离的示意图；

图4b为本申请一实施例示出的第二容器跟随第一容器移动后第一页面滑动距离的示意图；

图5为本申请一实施例提供的界面交互装置的结构框图；

图6为本申请一实施例提供的电子设备的结构示意图；

图7示出了采用本申请实施例提供的技术方案实现的交互界面，用户上滑操作后第二容器的第一列承载区承载的页面a展示在可视界面内的示意图；

图8示出了用户右滑操作后第二容器的第一列承载区隐藏，第二列承载区承载的页面b展示在可视界面内的示意图。

具体实施方式

为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述。在本申请的说明书、权利要求书及上述附图中描述的一些流程中，包含了按照特定顺序出现的多个操作，这些操作可以不按照其在本文中出现的顺序来执行或并行执行。操作的序号如101、102等，仅仅是用于区分各个不同的操作，序号本身不代表任何的执行顺序。另外，这些流程可以包括更多或更少的操作，并且这些操作可以按顺序执行或并行执行。需要说明的是，本文中的“第一”、“第二”等描述，是用于区分不同的信息、设备、模块等，不代表先后顺序，也不限定“第一”和“第二”是不同的类型。另外，下文所描述的各实施例仅仅是本申请一部分实施例，而不是全部的实施例。基于本申请中的实施例，本领域技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。

在介绍本申请各实施例之前，先对本文中会出现的专有名词做简单的介绍。

H5：HTML5，是构建web内容的一种语言描述方式。H5适合的场景可包括但不限于：品牌传播、促销活动、事件营销、产品展示等等。

Tab：标签，Web页面中常见的分区展示UI(uesr interface)元素。

React：一种开发工具库，可用于web开发。React主要用于构建UI，可以在React里传递多种类型的参数，如声明代码，帮助渲染出UI；也可以是静态的HTML DOM(DocumentObject Model，文件对象模型)元素；也可以传递动态变量，甚至是可交互的应用组件。

DOM：文档对象模型(Document Object Model)，一种处理可扩展标记语言(HTML或XML)的标准。一个页面就是一个文档，DOM中使用document(文档)表示。页面中的所有标签都是元素，DOM中使用element(元素)表示。网页中的所有内容都是节点(标签、属性、文本、注释等)，DOM中使用node(节点)表示。DOM把文档、元素和节点都看做是对象。

CSS：Cascading Style Sheets，级联样式表，是一种为网站添加布局效果的工具。CSS3是CSS的技术升级版本。

图1示出了本申请一实施例提供的一种容器组件的结构示意图。如图1所示，所述容器组件可包括第一容器1和第二容器2。其中，第一容器1用于承载展示内容。所述展示内容包括第二容器2的第一列承载区21承载的第一页面31。所述第一容器1还用于响应滑动指令移动，所述第二容器2跟随所述第一容器1移动，使得所述展示内容滑动显示。所述第二容器2包括多列承载区，一列承载区承载一个页面。所述多列承载区中除所述第一列承载区外的承载区隐藏。如图1所示的实施例，第二容器2的第一承载区21处于显示状态，第二承载区22和第三承载区23均处于隐藏状态。第二容器2还可用于响应于切换指令切换承载区。

这里需要说明的是：上文中的“滑动”还可称为“滚动”或其他类似的意思。“滑动”或“滚动”是从用户操作角度描述的词汇。实际上，“滑动显示”可简单理解为：一个长列表页面沿着一个方向(如图1中的Y方向)移动，动态地从可视界面的一侧隐藏一部分内容，从另一侧又不断呈现新内容的过程。

上文中滑动指令或切换指令可以：用户在交互界面上的操作生成的指令，或是基于用户语音或动作影像生成的指令，等等。

以用户在交互界面操作触发滑动指令和切换指令为例，所述第一容器1响应于第一方向(如图1中的Y方向)上的滑动操作，沿第一方向移动使得承载的展示内容滑动显示。若用户客户端为触摸屏，用户可在触摸屏上触发沿Y轴正向方向的滑动，第一容器1承载的展示内容沿Y轴正向方向(即图1所示方位的向上的方向)移动。用户在触摸屏上触发沿Y轴负向方向的滑动，第一容器1承载的展示内容沿Y轴负向方向(即图1所示方位的向下的方向)移动。或者，用户可通过鼠标或触摸屏触控如图1中右边沿显示滑动条(或滚动条)，沿Y轴负向方向(即图1中的向下的方向)拉动滑动条，第一容器1承载的展示内容沿Y轴正向方向(即图1所示方位的向上的方向)移动。用户通过鼠标或触摸屏触控滑动条，沿Y轴正向方向(即图1中的向上的方向)拉动滑动条，第一容器1承载的展示内容沿Y轴负向方向(即图1所示方位的向下的方向)移动。第二容器2随动，使得第一页面沿第一方向滑动显示。所述第一容器1响应于第二方向(如图1中X方向)上的滑动操作隐藏所述第一列承载区，显示所述第二容器的第二列承载区承载的第二页面。

图1所示的一个具体实施例，第一容器1为外层唯一的滑动容器。第二容器2为第一容器1的内层容器，第二容器2跟随外层的第一容器移动。具体实施时，外层的第一容器1可使用H5原生的滑动(或滚动)，可做到滑动(或滚动)时无监听无计算。第二容器2的一列承载区可承载一个feed流(信息流)列表。即多个feed流列表用一个宽度很大第二容器包裹。如图1所示，多列承载区沿第二方向排列。可通过横向(如图中X方向)的操作切换各feed流，以使其中一个feed流呈现在可视界面中。

本申请实施例提供的容器组件可适用于各类应用的首页或引导页。比如，电商应用首页，第一容器承载的展示内容可包括各种类型的内容，如Tab(标签)、广告图片或视频、推荐信息、搜索栏等等。如图1所示的一具体实施方案中，所述展示内容还包括多个标签4。一个标签与一列承载区承载的页面关联；通过切换标签切换承载区以实现页面切换。例如，第一标签41与第一列承载区21承载的第一页面31关联。第二标签42与第二列承载区22承载的第二页面32关联。第三标签43与第三承载区23承载的第三页面33关联。

在具体实施时，第一容器1移动，多个标签4沿Y方向向上移动至第一容器1(或可视界面)的上边界后，多个标签可停留在顶部，即本实施例中多个标签可具有自动吸顶功能。实施时，可使用CSS(Cascading Style Sheets，级联样式表)中的position:sticky(位置：吸附)实现多个标签的自动吸顶。如图2所示，多个标签4吸顶后的示意图，第一容器再响应滑动指令移动时，第一容器1承载的多个标签4位置不动，第二容器2随动使得第一承载区的第一页面滑动显示。另外需要补充的是：多个标签4吸顶后，从界面上来看滑动指令作用的对象就是第一页面了，因此在实际应用时图中的滑动条的位置可恢复移动至第一容器(或可视界面)的顶部；或者移动至第二容器的顶部。

为提高兼容性，同时降低改动和发布成本，本实施例中的第一容器和第二容器可基于React Native(一种开源的跨平台移动应用开发框架)框架实现。react-native结合了web应用和native(原生)的应用优势，可以使用javascript(一种多范式、解释型的编程语言)来开发IOS(一种移动操作系统)和安卓原生应用。在JavaScript中用react抽象操作系统原生的UI(用户界面)组件，代替DOM元素来渲染等。

包含有本实施例的容器组件的界面交互模块(或装置)使用React-native实现了网页原生应用，因此在界面交互模块需要更新时，由本地工程师将更新代码直接上传至服务器，用户经由客户端直接登录服务器即可使用更新后的应用，这种更新方式实现了系统的动态更新，与以往的更新方法存在根本区别。以往方式如果客户端出现紧急问题，必须要重新发布新版本来解决，而重新发布版本步骤繁琐。

基于React-native使用服务器语言编写的前端原生应用，在需要更新的时候，只需要本地修改代码上传到服务器，然后客户端访问服务器即可进行更新，避免了频繁的版本更新。可见，基于React-native实现本申请各实施例，在web浏览器环境下兼容性高，可投放在任意H5场景，且改动和发布成本均降低。

基于上述容器组件，本申请另一实施例提供一种界面交互方法。图3示出了该界面交互方法的流程示意图。如图3所示，所述方法包括：

101、显示第一容器承载的展示内容。

其中，所述展示内容包括第二容器的第一列承载区承载的第一页面；所述第二容器包括多列承载区，一列承载区承载一个页面；所述多列承载区中除所述第一列承载区外的承载区隐藏。

102、响应于滑动指令，所述第一容器移动，所述第二容器随动，使得所述展示内容滑动显示。

103、响应于切换指令，获取所述展示内容的滑动信息，并基于所述滑动信息确定所述第一页面的历史浏览记录，以在切换回所述第一页面时用于定位所述第一页面被切走前的浏览位置。

104、响应于所述切换指令，隐藏所述第一列承载区，显示所述第二容器的第二列承载区承载的第二页面。

有上述架构的容器组件作为基础，本申请实施例提供的方案便可基于该架构的容器组件做到展示内容滑动过程无实时监听、无实时计算还能具有较好的操作体验。具体的，本申请实施例提供的方案中，因为第二容器跟随第一容器移动，所以在发生切换指令时，再获取第一容器承载的展示内容的滑动信息，基于该滑动信息便可确定出当前要被切换走的第一页面的历史浏览记录，以在后续第一页面被切换回时用以定位第一页面的浏览位置。可见，本申请实施例提供的技术方案，能做到第一容器移动、第二容器随动过程中不需要实时跟踪监听计算，这就避免了实时监听计算对线程的占用，这就有助于提高页面的操作顺滑性。经过实际测试，进一步验证本申请实施例提供的技术方案，页面操作更顺滑，出现卡顿掉帧的概率低。

在一可实现的实施方式中，上述103中“基于所述滑动信息，确定所述第一页面的历史浏览记录”，可包括：

1031、基于所述滑动信息，确定所述第二容器在可视界面上的第一滑动距离；

1032、基于所述滑动信息，确定所述第一页面的第二滑动距离；

1033、根据所述第一滑动距离和所述第二滑动距离，确定所述第一页面的历史浏览记录。

如图1所示的实例中，所述展示内容还包括多个标签；一个标签与一列承载区承载的页面关联。相应的，本申请实施例提供的所述方法还可包括如下步骤：

105、响应于所述滑动指令，所述多个标签移动，移动至可视界面的设定位置时维持在所述设定位置不动；

106、将所述多个标签的滑动距离作为所述第二容器在所述可视界面上的第一滑动距离，记录在所述滑动信息中。

当然，多个标签已吸顶不存在移动，则上述第二容器在可视界面上的第一滑动距离即为零。或者，在其他实施例中，也可以不是多个标签，是其他类型的控件或图标等均可，本实施例对此不作限定。

本实施例中因为第二容器会跟随外层的第一容器移动，为了在发生页面切换(即承载区切换)再切换回能恢复至该页面被切走前的浏览位置，需要在切换发生时获取展示内容的滑动信息。

参见图4a和4b所示的示例，图4a示出了第一容器移动多个标签4吸顶后的情况。图4a中第一容器上方灰显的内容为不可见内容。多个标签4的滑动距离d1实际上就是第二容器在可视界面(或第一容器)内的移动距离。多个标签4吸顶后，第一容器继续响应滑动指令移动时，多个标签4吸顶位置不动，第二容器2随动使得第一承载区21的第一页面31滑动显示。因为多个承载区，如第一承载区21、第二承载区22和第三承载区23为同一容器的散列。所以第二容器2随动时，处于隐藏状态的第二承载区22承载的第二页面32和第三承载区23承载的第三页面33也是同步滑动的；处于可视界面内的第一承载区21承载的第一页面31滑走区域的内容(即图4b中示出的距离d2对应段处的内容)不可见。

在可视界面上，第一页面31的滑动距离为D。其中，D＝d1+d2，即第一页面31先上移了d1，再滑动了d2。假设此时要切走，切换到第二承载区22承载的第二页面32，获取到的展示信息的滑动信息可包括但不限于：d1(即第二容器在可视界面上的第一滑动距离)以及第一页面的第二滑动距离D。

这里需要说明的是：本文为了方便理解将D取值做了拆解分析说明，实际上第一容器为唯一的可滑动的容器，且本方案中对滑动不作实时监听和计算，因此在获取滑动信息时只在切走前时刻可通过第一页面内容的展示情况获取到第一页面的滑动距离D，还可根据多个标签4的展示情况获取到多个标签4的移动距离d1。

具体实施时，可采用如下计算公式确定第一页面的历史浏览记录：

第一页面的历史浏览记录d2＝D-d1

存储该第一页面的历史浏览记录，以在切换回所述第一页面时用于定位所述第一页面被切走前的浏览位置。若第一页面被切换走后又被切回，则可基于该d2值，设置第一页面对应第一列承载区的顶部偏移padding-top值。更具体，将第一页面对应第一列承载区的顶部偏移padding-top值设置为d2，即可在切回第一页面后准确显示出第一页面被切走前的浏览位置。

其中，获取到的展示内容的滑动信息除包括第一页面的滑动距离、第二容器在可视界面上的滑动距离外，还可包括滑动时间戳、滑动坐标等等。获取滑动距离的方法可以通过记录一标记位置的初始坐标(x₁，y₁)，滑动后的坐标(x₂，y₂)，然后根据初始坐标(x₁，y₁)和滑动后坐标(x₂，y₂)计算滑动距离。该标记位置可以是容器承载的内容中任一位置，本实施例对此不作限定。

上述步骤104中“显示所述第二容器的第二列承载区承载的第二页面”可包括：

1041、若所述第二页面对应有历史浏览记录，则根据所述第二页面的历史浏览记录，定位所述第二页面的浏览位置；

1042、基于所述第二页面的浏览位置，显示所述第二容器的第二列承载区承载的第二页面。

若第二页面无历史浏览记录，则直接将第二页面的顶部位置定位浏览位置。

在一个可实现的技术方案中，上述1042“基于所述第二页面的浏览位置，显示所述第二容器的第二列承载区承载的第二页面”可包括：

S1、根据所述第二页面的浏览位置，设置所述第二页面相对所述第二容器的第二列承载区的顶部偏移padding-top值；

S2、按照所述顶部偏移padding-top值，在所述第二列承载区内显示所述第二页面。

进一步的，显示所述第二容器的第二列承载区承载的第二页面之前，本申请实施例提供的方法还可包括如下步骤：

显示由所述第一页面切换为第二页面的切换动画。

具体实施时，可使用translate3d(是CSS3的一个新的css属性)的原生动画方法实现第二容器的不同承载区承载的页面(如feed信息流)的切换动画，避免用JavaScript(一种多范式、解释型的编程语言)操作DOM(文档对象模型)元素导致的卡顿。如果通过JavaScript实现一个DOM元素移动的动画，需要设置该元素位置为absolute(JavaScript中的一个参数)，然后通过JavaScript改变其top(顶)，left(左)，right(右)，bottom(底)等属性来实现动画。使用CSS3 translate3d，无需设置元素位置，这就减少了操作各元素改变属性的计算过程，进而解决了卡顿问题。

本申请实施例提供的方案还可预先自定义onTouch(是一种接口中定义的一个方法)事件，以避免左右滑动切换页面与上下滑动操作发生冲突。即，本申请实施例提供的所述方法还可包括如下步骤：

107、检测到上下滑动指令事件时，所述第一容器拦截并消费所述上下滑动指令事件以执行所述响应于滑动指令，所述第一容器移动的步骤；

108、检测到左右滑动指令事件时，所述第一容器将所述左右滑动指令事件传递至所述第二容器，所述第二容器消费所述左右滑动指令事件以执行所述响应于所述切换指令，隐藏所述第一列承载区，显示所述第二容器的第二列承载区承载的第二页面的步骤。

因为外层和内层滑动的方向不一致，所以根据手势的动向来确定把事件给谁。当操作事件针对的是内层容器承载的内容时，事件会先一层层从外层传到内层，由内层来处理。以外层第一容器为上下滑动，内层第二容器为左右滑动为例。当判定操作手势的滑动为上下时，需要外层第一容器来消费该上下滑动事件，所以外层第一容器将上下滑动事件拦截，即在外层的onInterceptTouchEvent(事件拦截)中检测为ACTION_MOVE(滑动)时返回true(正确)；而如果判定操作手势的滑动为左右时，需要内层第二容器来消费事件，外层第一容器不需要拦截，左右滑动事件会传递到内层第二容器来处理。这样就通过判断滑动的方向来决定事件的处理对象，从而解决滑动冲突的问题。

判定操作手势的滑动方向，可通过比较水平和竖直方向上的位移值来实现。MotionEvent滑动事件包含了事件的坐标，只要记录一次滑动事件的起点和终点坐标，通过比较在水平方向的位移|dx|和竖直方向上的位移|dy|的大小，来决定滑动的方向。比如，|dy|>|dx|，本次移动的方向认为是上下方向；反之，则认为是左右方向。当然，还可以通过夹角α的大小、斜率、速率等方式来作为判断条件。

进一步的，在完成切换后，本申请实施例还可包括如下步骤：

109、显示所述第二容器的第二列承载区承载的第二页面后，将所述第一容器的滚动顶部scrollTop值重置为初始值。

完成切换后重置外层第一容器的滚动顶部scrollTop值重置为初始值，以不影响第二容器的移动。本实施例对该初始值的具体取值不作限定。

进一步的，本申请实施例提供的方法还可包括如下步骤：

110、将所述第二容器的所述多列承载区中的至少一列承载区承载的页面对应的不可见区域的高度置为预设值。

例如，将第二容器的所有页面的不可见区域的高度置为零，以完成内存回收，提升滑动性能。

由上文可知，本申请实施例方案在发生切换时需要做两件事：

①获取展示内容的滑动信息，用于确定当前要被切走页面的历史浏览记录。

②执行切换显示第二页面时，因为多个页面的承载区在同一容器中，第二容器跟随第一容器随动，所以需要定位第二页面的浏览位置。第二页面有历史浏览记录时，直接基于历史浏览记录设置第二列承载区的顶部偏移padd i ng-top值；无历史浏览记录时基于第二页面的顶部位置设置第二列承载区的顶部偏移padd i ng-top值。

切换完成后重置第一容器的滚动顶部scro l l Top。

本申请实施例提供的技术方案可适用在客户端应用(Application，APP)的页面或浏览器网页页面实现。H5页面为APP响应于用户的操作，向用户显示相应的内容。例如，APP可以是安装在客户端(如手机、平板电脑、智能穿戴设备或台式计算机)上的应用，如购物类应用、社交类应用、资讯类应用等等。APP的页面用于向用户展示分类标签(如商品分类标签、资讯分类标签)、图片信息(商品的图片、新闻图片等)、文本信息(商品名称、新闻题目等)、视频等等。

APP页面的加载包括网络请求和页面渲染等步骤。网络请求为APP对应客户端通过网络向服务器发送相关数据等的请求。服务器响应于该网络请求，发送包含相关数据的文件(如React Native组件文件)至APP客户端。

APP对接收到的文件进行解析，进行页面渲染后得到H5页面。页面可包括多个元素，例如段落、图片、按钮、表格、表单等，元素之间可以进行嵌套。页面具有对应的DOM。DOM定义了页面中的所有元素的对象和属性，以及访问他们的方法。DOM以树结构来表达页面，页面中的元素内容均被表达为DOM树中的节点(即DOM节点)。

即APP对文件进行解析，生成JavaScript文件，然后利用JavaScript便可构建出对应的DOM树；基于DOM树渲染页面到屏幕上，从而实现H5页面的加载。

本申请实施例的方案可使用React技术。React核心概念：虚拟DOM(VituralDocument Object Model，文档对象模型)。DOM是一种跨平台的、独立于编程语言的API，它把HTML、XHTML或XML文档都当做一个树结构，而每个节点视为一个对象，这些对象可以被编程语言操作，进而改变文档的结构，映射到文档的显示。

虚拟DOM算法，它的本质就是用JS对象来模拟出DOM树，它的算法大致如下：

步骤一、用JavaScript对象映射形成DOM树的结构，然后用这个树构建一个真正的DOM树；

步骤二、当状态变更的时候，重新构造一棵新的对象树，然后用新的树和旧的树进行比较(Diff算法)，记录两棵树差异；

步骤三、把步骤二中所记录的差异应用到步骤一所构建的真正的DOM树上，页面就更新了。

虚拟DOM的核心在于Diff算法，Diff算法自动计算出应该调的区域，然后只修改应该被调整的区域。

图5示出了本申请又一个实施例提供的一种界面交互装置。该装置包括：第一容器1、第二容器2和交互组件5。其中，

第二容器2，包括多列承载区20，一列承载区20承载一个页面。

第一容器1，用于承载展示内容；所述展示内容包括所述第二容器2的第一列承载区承载的第一页面，所述多列承载区中除所述第一列承载区外的承载区隐藏；

交互组件5，用于响应于滑动指令，控制所述第一容器1移动，所述第二容器2随动致所述第一页面滑动显示；还用于响应于切换指令，获取所述展示内容的滑动信息；基于所述滑动信息确定所述第一页面的历史浏览记录，以在切换回所述第一页面时基于所述第一页面的历史浏览记录定位所述第一页面被切走前的浏览位置；还用于响应于所述切换指令，控制所述第二容器切换，以隐藏所述第一列承载区，显示所述第二容器的第二列承载区承载的第二页面。

进一步的，所述交互组件5在基于所述滑动信息，确定所述第一页面的历史浏览记录时，具体用于：

基于所述滑动信息，确定所述第二容器在可视界面上的第一滑动距离；

基于所述滑动信息，确定所述第一页面的第二滑动距离；

根据所述第一滑动距离和所述第二滑动距离，确定所述第一页面的历史浏览记录。

进一步的，所述展示内容还包括多个标签；一个标签与一列承载区承载的页面关联。

相应的，所述交互组件5还用于：

响应于所述滑动指令，控制所述第一容器移动使得所述多个标签移动，移动至可视界面的设定位置时维持在所述设定位置不动；

将所述多个标签的滑动距离作为所述第二容器在所述可视界面上的第一滑动距离，记录在所述滑动信息中。

进一步的，所述交互组件5在控制第二容器2显示所述第二承载区承载的第二页面时，具体用于：

若所述第二页面对应有历史浏览记录，则根据所述第二页面的历史浏览记录，定位所述第二页面的浏览位置；

基于所述第二页面的浏览位置，显示所述第二容器的第二列承载区承载的第二页面。

再进一步的，所述交互组件5在基于所述第二页面的浏览位置，显示所述第二容器的第二列承载区承载的第二页面时，具体用于：

根据所述第二页面的浏览位置，设置所述第二页面相对所述第二容器的第二列承载区的顶部偏移padding-top值；

按照所述顶部偏移padding-top值，在所述第二列承载区内显示所述第二页面。

进一步的，在所述交互组件5控制所述第二容器显示第二列承载区承载的第二页面之前，所述交互组件5还用于：

显示由所述第一页面切换为第二页面的切换动画。

进一步的，所述交互组件5还用于检测滑动事件。第一容器1在所述交互组件5检测到滑动事件为上下滑动指令事件时，拦截并消费所述上下滑动指令事件以执行所述响应于滑动指令，所述第一容器移动的步骤。第一容器1在所述交互组件5检测到左右滑动指令事件时，将所述左右滑动指令事件传递至所述第二容器2。所述第二容器2消费所述左右滑动指令事件以执行所述响应于所述切换指令，隐藏所述第一列承载区，显示所述第二容器的第二列承载区承载的第二页面的步骤。

进一步的，所述交互组件5在控制所述第二容器2显示第二列承载区承载的第二页面后，还用于将所述第一容器1的滚动顶部scrollTop值重置为初始值。

进一步的，所述交互组件5还用于将所述第二容器2的所述多列承载区中的至少一列承载区承载的页面对应的不可见区域的高度置为预设值。

这里需要说明的是：上述实施例提供的界面交互装置可实现上述各方法实施例中描述的技术方案，上述各模块或单元具体实现的原理可参见上述各方法实施例中的相应内容，此处不再赘述。

本申请还一个实施例提供了采用上述各实施例对应方案的电子设备。该电子设备的原理性结构示意图如图6所示。所述电子设备包括：存储器61、处理器62和显示器64。其中，存储器61用于存储计算机程序。所述处理器62，与所述存储器61耦合，用于执行存储器中存储的计算机程序(该计算机程序可包括一条或多条计算机指令)，以用于实现本申请实施例提供的界面交互方法中的步骤。

上述中，存储器61可以由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。

图6中仅示意性给出了电子设备可包含的部分组件，并不意味着电子设备只包括图6所示组件，如音频组件66、电源组件65、通信组件63等等。

本申请还有一实施例提供一种计算机程序产品(说明书附图中无相应附图示出)。该计算机程序产品包括计算机程序或指令，当所述计算机程序或指令被处理器执行时，致使所述处理器能够实现上述各方法实施例中的步骤。

相应地，本申请实施例还提供一种存储有计算机程序的计算机可读存储介质，所述计算机程序被计算机执行时能够实现上述各实施例提供的方法步骤或功能。

本申请各实施例提供的技术方案可适用在各类型的应用(APP)中，比如，社交应用、电商应用、游戏类应用、资讯类应用等等。除此之外，本申请各实施例提供的技术方案还可使用小程序应用中。小程序应用是一种不需要下载安装即可使用的应用。例如，以电商应用为例，如图7所示。该电商应用的首页可采用本申请各实施例提供的技术方案实现。以该首页包括两个标签为例，标签A与第一列承载区承载的页面a关联；标签B与第二列承载区承载的页面b关联。具体的，一种界面交互方法包括：

S1、响应于应用启动指令，显示第一容器承载的展示内容。

如用户触控应用图标便触发所述应用启动指令，或是用户发出启动应用的语音后触发所述应用启动指令。其中，展示内容包括但不限于：搜索栏、广告图片、页面跳转控件、标签栏(包括上述提及的两个标签A和B)等等，以及第二容器的第一列承载区承载的页面a。所述第二容器包括两列承载区；第二列承载区隐藏。或者，在应用首页打开时，展示内容中可不包含第二容器承载的内容。待用户触发滑动操作，第二容器随第一容器移动一段后，第二容器的第一列承载区承载的页面a才进入可视界面。

S2、响应于滑动指令，所述第一容器移动，所述第二容器随动，使得所述展示内容滑动显示。

如图7所示，展示内容中的标签栏(即标签A和标签B)移动至可视界面的顶部时位置在顶部位置不动(即自动吸顶)。

S3、响应于第一切换指令，获取展示内容的滑动信息，并基于所述滑动信息确定第二容器在可视界面上的第一滑动距离及页面a的第二滑动距离；根据所述第一滑动距离和所述第二滑动距离，确定并存储所述页面a的历史浏览记录。

如图8中，用户在可视界面上触发了左滑操作后产生所述第一切换指令。

S4、响应于所述第一切换指令，隐藏所述第一列承载区，定位所述第二容器的第二列承载区承载的页面b的浏览位置，根据页面b的浏览位置，设置页面b相对第二容器的第二列承载区的顶部偏移padding-top值；按照所述顶部偏移padding-top值，在所述第二列承载区内显示所述页面b。

这里需要说明的是：因为本实施例的步骤是从应用刚启动开始撰写的，所以在切换页面b时，页面b没有历史浏览记录的。此时定位的页面b的浏览位置即页面b的头部。

S5、显示第二容器的第二列承载区承载的页面b后，将第一容器的滚动顶部scrollTop值重置为初始值。

S6、响应于第二切换指令，确定页面b的历史浏览记录。

其中，确定页面b的历史浏览记录的过程同页面a的历史浏览记录确定过程，可参见上文的内容，此次不作赘述。

S7、响应于第二切换指令，隐藏第二承载区，获取页面a的历史浏览记录，并基于页面a的历史浏览记录，定位页面a的浏览位置；基于页面a的浏览位置，显示第一列承载区承载的页面a。

第二切换指令可以是用户在可视界面上触发了右滑操作后产生的。

S8、将所述第二容器的两列承载区中的至少一列承载区承载的页面对应的不可见区域的高度置为预设值。

这里需要说明的是：上述步骤S8可定期或不定期执行，或在接收到内存回收指令时执行等等，本申请实施例对此不作具体限定。

可见，上述方案中只有第一容器是可移动容器，第二容器是跟随移动的。在用户操作界面展示内容滑动过程不作实时监听和计算，只有在发生对第二容器承载的多个页面间的切换时再确定被切换走页面当前的浏览位置，以作为历史浏览记录，便于后续再切回时回复显示到该浏览位置，这就避免了实时监听计算对线程的占用，这就有助于提高页面的操作顺滑性。经过实际测试，进一步验证本申请实施例提供的技术方案，页面操作更顺滑，出现卡顿掉帧的概率低。

以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。

通过以上的实施方式的描述，本领域的技术人员可以清楚地了解到各实施方式可借助软件加必需的通用硬件平台的方式来实现，当然也可以通过硬件。基于这样的理解，上述技术方案本质上或者说对现有技术做出贡献的部分可以以软件产品的形式体现出来，该计算机软件产品可以存储在计算机可读存储介质中，如ROM/RAM、磁碟、光盘等，包括若干指令用以使得一台计算机设备(可以是个人计算机，服务器，或者网络设备等)执行各个实施例或者实施例的某些部分所述的方法。

最后应说明的是：以上实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的精神和范围。

Claims (14)

1.一种界面交互方法，其特征在于，包括：

显示第一容器承载的展示内容；其中，所述展示内容包括第二容器的第一列承载区承载的第一页面；所述第二容器包括多列承载区，一列承载区承载一个页面；所述多列承载区中除所述第一列承载区外的承载区隐藏；

响应于滑动指令，所述第一容器移动，所述第二容器随动，使得所述展示内容滑动显示；

响应于切换指令，获取所述展示内容的滑动信息，并基于所述滑动信息确定所述第一页面的历史浏览记录，以在切换回所述第一页面时用于定位所述第一页面被切走前的浏览位置；

响应于所述切换指令，隐藏所述第一列承载区，显示所述第二容器的第二列承载区承载的第二页面。

2.根据权利要求1所述的方法，其特征在于，基于所述滑动信息，确定所述第一页面的历史浏览记录，包括：

基于所述滑动信息，确定所述第二容器在可视界面上的第一滑动距离；

基于所述滑动信息，确定所述第一页面的第二滑动距离；

根据所述第一滑动距离和所述第二滑动距离，确定所述第一页面的历史浏览记录。

3.根据权利要求2所述的方法，其特征在于，所述展示内容还包括多个标签，一个标签与一列承载区承载的页面关联；以及

所述方法还包括：

响应于所述滑动指令，所述多个标签移动，移动至可视界面的设定位置时维持在所述设定位置不动；

将所述多个标签的滑动距离作为所述第二容器在所述可视界面上的第一滑动距离，记录在所述滑动信息中。

4.根据权利要求1至3中任一项所述的方法，其特征在于，显示所述第二容器的第二列承载区承载的第二页面，包括：

若所述第二页面对应有历史浏览记录，则根据所述第二页面的历史浏览记录，定位所述第二页面的浏览位置；

基于所述第二页面的浏览位置，显示所述第二容器的第二列承载区承载的第二页面。

5.根据权利要求4所述的方法，其特征在于，基于所述第二页面的浏览位置，显示所述第二容器的第二列承载区承载的第二页面，包括：

根据所述第二页面的浏览位置，设置所述第二页面相对所述第二容器的第二列承载区的顶部偏移padding-top值；

按照所述顶部偏移padding-top值，在所述第二列承载区内显示所述第二页面。

6.根据权利要求4所述的方法，其特征在于，显示所述第二容器的第二列承载区承载的第二页面之前，还包括：

显示由所述第一页面切换为第二页面的切换动画。

7.根据权利要求1至3中任一项所述的方法，其特征在于，还包括：

检测到上下滑动指令事件时，所述第一容器拦截并消费所述上下滑动指令事件以执行所述响应于滑动指令，所述第一容器移动的步骤；

检测到左右滑动指令事件时，所述第一容器将所述左右滑动指令事件传递至所述第二容器，所述第二容器消费所述左右滑动指令事件以执行所述响应于所述切换指令，隐藏所述第一列承载区，显示所述第二容器的第二列承载区承载的第二页面的步骤。

8.根据权利要求1至3中任一项所述的方法，其特征在于，还包括：

显示所述第二容器的第二列承载区承载的第二页面后，将所述第一容器的滚动顶部scrollTop值重置为初始值。

9.根据权利要求1至3中任一项所述的方法，其特征在于，还包括：

将所述第二容器的所述多列承载区中的至少一列承载区承载的页面对应的不可见区域的高度置为预设值。

10.一种容器组件，其特征在于，包括第一容器和第二容器；其中，

第一容器用于承载展示内容，所述展示内容包括第二容器的第一列承载区承载的第一页面；

所述第一容器响应于滑动指令移动，所述第二容器跟随所述第一容器移动，使得所述展示内容滑动显示；

所述第二容器包括多列承载区，一列承载区承载一个页面；所述多列承载区中除所述第一列承载区外的承载区隐藏；

所述第二容器还用于响应于切换指令切换承载区。

11.根据权利要求10所述的容器组件，其特征在于，所述展示内容还包括多个标签；

一个标签与一列承载区承载的页面关联；

通过切换标签切换承载区以实现页面切换。

12.根据权利要求10或11所述的容器组件，其特征在于，所述第一容器响应于滑动指令，沿第一方向移动，所述第二容器跟随所述第一容器沿第一方向移动；

所述多列承载区沿第二方向排列；

所述第二方向与所述第一方向为两个不同的方向。

13.一种计算机可读存储介质，其特征在于，所述计算机可读存储介质上存储有计算机程序，所述计算机程序被执行时能实现如权利要求1至9中任一项所述的界面交互方法中的步骤。

14.一种电子设备，其特征在于，包括存储器、处理器及显示器；其中，所述存储器，用于存储计算机程序；

所述处理器，用于与所述存储器和所述显示器耦合，用于执行所述存储器中存储的所述计算机程序，以用于实现如权利要求1至9中任一项所述的界面交互方法中的步骤。

Images