一种实现滑动翻页无滚屏错觉的方法和系统

技术领域

本公开涉及信息技术领域，特别涉及一种实现滑动翻页无滚屏错觉的方法、系统、电子设备及计算机可读介质。

背景技术

目前，智能移动终端的翻页形式交互没有办法直接支持下一个页面预览。

在某些业务场景中，回答列表场景之前通过前端将下一个页面渲染到当前页面，实现了下一个页面预览的效果，整体比没有预览的用户使用时长大很多。

智能移动终端，例如手机，存在屏幕小的天然限制，在一个内容结束后，接上下一个内容的预览，会大大提升用户下滑看下一个内容的机会。

因此，急需一种统一的内容容器，可以将各种页面连接在一起，提供便捷的预览功能。

发明内容

有鉴于此，本公开实施例的目的在于提供一种实现滑动翻页无滚屏错觉的方法,通过统一的内容容器，实现下一页的页面预览和翻页效果。

根据本公开的第一方面，提供了一种实现滑动翻页无滚屏错觉的方法，应用于智能移动终端，包括：

在内容页面容器中，产生多个符合终端屏幕尺寸的内容的页面，并对各个页面设置预设的分发顺序；

若检测到向上滑动的手势，并且下一个页面在当前页面露出的距离大于预设值时，发出上下翻页操作的提示；接收到下一页的操作后，内容页面容器对当前页面进行滚动，分发下一页的页面；接收到上一页的操作后，内容页面容器对当前页面进行滚动，分发上一页的页面；

若检测到向下滑动的手势，并且当前内容是第一页，则内容页面容器分发已浏览的其他页面；

若检测到向下滑动的手势，并且当前内容不是第一页，则内容页面容器分发上一页的页面；

翻页后，检查未消费的页面，并且记录更新值。

在一个可能的实施例中，其中内容页面容器对当前页面进行滚动之后，还包括：

在当前页面被向上滑动到底后，出现一个惯性回弹交互区，形成翻页式体验。

在一个可能的实施例中，其中，所述惯性回弹交互区是预览区域，不产生交互功能，对应页面的交互功能在真正被翻页后激活。

在一个可能的实施例中，其中，所述内容容器包括：回答内容容器、文章内容容器、视频内容容器、通用页面内容容器。

根据本公开的第二方面，提供了一种实现滑动翻页无滚屏错觉的系统，包括：

内容页面容器单元，用于产生多个符合终端屏幕尺寸的内容的页面，并对各个页面设置预设的分发顺序；

页面分发单元，用于页面分发，若检测到向上滑动的手势，并且下一个页面在当前页面露出的距离大于预设值时，发出上下翻页操作的提示；接收到下一页的操作后，内容页面容器对当前页面进行滚动，分发下一页的页面；接收到上一页的操作后，内容页面容器对当前页面进行滚动，分发上一页的页面；

若检测到向下滑动的手势，并且当前内容是第一页，则内容页面容器分发已浏览的其他页面；

若检测到向下滑动的手势，并且当前内容不是第一页，则内容页面容器分发上一页的页面；

未消费页面更新单元，用于翻页后，检查未消费的页面，并且记录更新值。

在一个可能的实施例中，其中内容页面容器对当前页面进行

滚动之后，还包括：

在当前页面被向上滑动到底后，出现一个惯性回弹交互区，形成翻页式体验。

在一个可能的实施例中，其中，所述惯性回弹交互区是预览区域，不产生交互功能，对应页面的交互功能在真正被翻页后激活。

在一个可能的实施例中，其中，所述内容页面容器包括：回答内容容器、文章内容容器、视频内容容器、通用页面内容容器。

根据本公开的第三方面，提供一种电子设备，包括：存储器、处理器以及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现如第一方面所述的方法。

根据本公开的第四方面，提供一种计算机可读存储介质，所述计算机可读存储介质上存储有可执行指令，该指令被处理器执行时使处理器执行如第一方面所述的方法。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。通过附图所示，本申请的上述及其它目的、特征和优势将更加清晰。在全部附图中相同的附图标记指示相同的部分。并未刻意按实际尺寸等比例缩放绘制附图，重点在于示出本申请的主旨。

图1示出了根据本公开实施例的典型的移动终端屏幕显示区域的示意图。

图2示出了根据本公开实施例的典型的移动终端屏幕显示区域中上滑距离达到预设值的示意图。

图3示出了根据本公开实施例的典型的移动终端屏幕显示区域中真正翻页的示意图。

图4示出了根据本公开实施例的典型的实现滑动翻页无滚屏错觉的方法的示意图。

图5示出了根据本公开实施例的典型的内容页面容器的示意图。

图6示出了根据本公开实施例的典型的实现滑动翻页无滚屏错觉的系统的示意图。

图7示出了用于实现本公开实施例的电子设备的结构示意图。

具体实施方式

以下，将参照附图来描述本公开的实施例。但是应该理解，这些描述只是示例性的，而并非要限制本公开的范围。此外，在以下说明中，省略了对公知结构和技术的描述，以避免不必要地混淆本公开的概念。

在此使用的术语仅仅是为了描述具体实施例，而并非意在限制本公开。这里使用的词语“一”、“一个（种）”和“该”等也应包括“多个”、“多种”的意思，除非上下文另外明确指出。此外，在此使用的术语“包括”、“包含”等表明了所述特征、步骤、操作和/或部件的存在，但是并不排除存在或添加一个或多个其他特征、步骤、操作或部件。

在此使用的所有术语（包括技术和科学术语）具有本领域技术人员通常所理解的含义，除非另外定义。应注意，这里使用的术语应解释为具有与本说明书的上下文相一致的含义，而不应以理想化或过于刻板的方式来解释。

随着移动互联网的发展，越来越多的人直接使用手机上网、浏览新闻，社交沟通，分享、回答或浏览网友的问题。但是目前，智能移动终端的翻页形式交互没有办法直接支持下一个页面预览。在某些业务场景中，回答列表场景之前通过前端将下一个页面渲染到当前页面，实现了下一个页面预览的效果，整体比没有预览的用户使用时长大很多。智能移动终端，例如手机，存在屏幕小的天然限制，在一个内容结束后，接上下一个内容的预览，会大大提升用户下滑看下一个内容的机会。

现有技术中，页面的布局方式通常有两种，滑动方式布局和翻页方式布局。在滑动布局中，用户可以通过上下滑动来浏览完整内容，用户不会有翻页的感觉。因此，当前页面需要知道全部的、完整的页面是什么，导致业务耦合严重。

在翻页方式的布局中，通常将下一个页面的部分内容，伪装在第一个页面内，看上去是个预览。在翻页时会给用户连贯滚屏的错觉，滚动内容不是很顺畅，体验比较差。并且，加载预览时，当前页面需要知道下一个页面是什么，导致业务耦合严重。本公开的技术方案实现了当用户在滑动过程中即将切换到下一页时，会有一个弹性动画来提示切换到下一页。因此，当前页面与下一页的业务实现了解耦，当前页面无须知道下一个页面的内容，并且可以将各种页面接在整个内容页面容器后面，根据需要调用，既实现了预览效果，又实现了业务解耦。

本公开的技术方案提供了统一的内容页面容器，可以将各种页面连接在一起，提供便捷的预览功能。具体的，统一处理各页面之间的联动效果，当最内层的页面不再消费时，将事件传递给上层可以处理的页面来处理。内部的页面对应各自的接口，以便在子页面无法处理时，将事件抛给上级页面处理。

以下结合附图详细描述本公开。

图1示出了根据本公开实施例的典型的移动终端屏幕显示区域的示意图。

图2示出了根据本公开实施例的典型的移动终端屏幕显示区域中上滑距离达到预设值的示意图。

图3示出了根据本公开实施例的典型的移动终端屏幕显示区域中真正翻页的示意图。

如图1所示，在屏幕中加载的当前页面会随着向上滑动逐渐向上移动，这时下一页的页面内容会出现预览。预览的内容是内容页面容器分发的，此时没有实现真正的翻页，所以交互功能并未激活。

如图2所示，用户继续进行向上的滑动操作，当上滑距离达到预设值时，内容页面容器将提示用户翻页操作，并根据接收到的上一页或下一页的操作，分发相应的页面。

如图3所示，当实现翻页后，下一页的页面完整显示在屏幕区域，同时交互功能被激活，用户可以根据需要在交互区域进行点击、滑动、长按等操作，实现交互。

图4示出了根据本公开实施例的典型的实现滑动翻页无滚屏错觉的方法的示意图。包括步骤401：在内容页面容器中，产生多个符合终端屏幕尺寸的内容的页面，并对各个页面设置预设的分发顺序；步骤402：检测到向上滑动的手势，且下一个页面在当前页面露出的距离大于预设值；403：接收到下一页的操作后，内容页面容器对当前页面进行滚动，分发下一页的页面;接收到上一页的操作后，内容页面容器对当前页面进行滚动，分发上一页的页面；步骤404：检测向下滑动的手势；405：若当前内容是第一页，则内容页面容器分发已浏览的其他页面；若当前内容不是第一页，则内容页面容器分发上一页的页面；步骤406：翻页后，检查未消费的页面，并且记录更新值。

如步骤401所示的方法，在内容页面容器中，预先解析和渲染了多个符合终端屏幕尺寸的内容的页面，并对各个页面设置预设的分发顺序。以问答页面为例，先由内容页面容器解析生成App端可理解的壳样式数据，包括云端基础样式和本地基础样式，这样，在当用户刷新页面并请求到新的数据后，app端取出同时下发的壳样式数据，与之前存储在本地的基础样式合并，生成落地页视图。并且内容页面容器提前预渲染落地页视图，在之后的加载过程中不需要再次等待页面生成，实现秒开显示，提升落地页到达率。

如步骤402所示的方法，在步骤401之后，会检测向上滑动的手势，若检测到向上滑动的手势，且下一个页面在当前页面露出的距离大于预设值时，则执行步骤403。

在步骤403中，如果接收到来自用户的下一页的操作后，内容页面容器对当前页面进行滚动，分发下一页的页面;如果接收到来自用户的上一页的操作后，内容页面容器对当前页面进行滚动，分发上一页的页面。上一页、下一页的页面内容和分发顺序，是由步骤401生成的，根据页面内容的需要，可以是文字、图片、视频、广告等，也可以是其各种的组合。

如步骤402所示的方法，在步骤401之后，如果没有检测到向上滑动的手势，则执行步骤404。

在步骤404中，检测向下滑动的手势，如果检测到了向下滑动的手势，则执行步骤405。

在步骤405中，若当前内容不是第一页，则内容页面容器分发上一页的页面。若当前内容不是第一页，则内容页面容器分发上一页的页面。同样的，上一页、下一页的页面内容和分发顺序，是由步骤401生成的，根据页面内容的需要，可以是文字、图片、视频、广告等，也可以是其各种的组合。

图5示出了根据本公开实施例的典型的内容页面容器的示意图。

内容页面容器可以包含多个容器，包括但不限于回答内容容器501，文章内容容器502，视频内容容器503，通用页面内容容器504。

每一个容器负责不同的页面内容的产生，例如，视频内容容器负责提前组织好具有视频内容的页面的相关参数，以及配置好对应的数据接口，当收到内容分发指令后，对应的容器从对应的数据接口取得最新的配置数据，生成完整的页面，显示在用户终端的屏幕上。预览区和翻页效果区5011，用于每一个页面知道自己的哪一部分内容可能会被预览，以及配置应用何种翻页效果。

因为内容页面容器之间的子容器是并列的、独立的关系，所以每一个容器可以独立的组织好页面内容，随时准备被呈现至用户终端的屏幕上。这样就较好的处理了页面之间的联动效果，当顺序在先（内层）的页面不再消费时（即该页面已被用户浏览且该页面知道自己已被浏览），将该事件传递给预设的对应的预设的容器，以便其处理和更新自身的内容页面以及更新页面顺序。通过对内层页面配置对应的数据接口，可以在当前页面容器无法处理时，将该事件抛给预先设置的容器实现处理。这样，每一个页面之间是业务解耦的，对于当前呈现在用户屏幕上的页面来说，无须知道下一页的内容，下一页的内容由内容页面容器分发控制，达到了灵活的预览效果。

在步骤406中，翻页前，内容页面容器分发了下一页的页面，用户可以预览部分页面的内容，但是此时该页面并不知道自己可以被用户看见，呈现在了屏幕上，所以此时交互区域并未被激活。翻页后，内容页面容器通知下一页页面已经呈现至用户屏幕，交互功能区被激活，该页面状态更新为已浏览，内容页面容器也记录此更新值，此时该页面也知道自己已经呈现并被浏览，因此该页面被激活。用户可以根据需要在交互区域进行点击、滑动、长按等操作，实现交互。

现有技术在实现翻页预览时，通常将下一个页面的部分内容，伪装在第一个页面内，看上去是个预览，但是这导致了当前页有下一个页面的部分内容，在翻页时会给用户连贯滚屏的错觉，滚动内容不是很顺畅，体验比较差。本公开的技术方案，通过在翻页时配置一个惯性回弹交互区，使得翻页效果更真实，可以配置成缓慢的向右或向左翻书的效果，不会给用户滚动的错觉，也可以配置成其他翻页效果，本公开对此不做限制。

图6示出了根据本公开实施例的典型的实现滑动翻页无滚屏错觉的方法的示意图。包括内容页面容器单元601，用于产生多个符合终端屏幕尺寸的内容的页面，并对各个页面设置预设的分发顺序；页面分发单元602，用于页面分发，若检测到向上滑动的手势，并且下一个页面在当前页面露出的距离大于预设值时，发出上下翻页操作的提示；接收到下一页的操作后，内容页面容器对当前页面进行滚动，分发下一页的页面；接收到上一页的操作后，内容页面容器对当前页面进行滚动，分发上一页的页面；若检测到向下滑动的手势，并且当前内容是第一页，则内容页面容器分发已浏览的其他页面；若检测到向下滑动的手势，并且当前内容不是第一页，则内容页面容器分发上一页的页面；未消费页面更新单元603，用于翻页后，检查未消费的页面，并且记录更新值。

在一个可能的实施例中，其中内容页面容器对当前页面进行滚动之后，还包括：

在当前页面被向上滑动到底后，出现一个惯性回弹交互区，形成翻页式体验。

在一个可能的实施例中，其中，所述惯性回弹交互区是预览区域，不产生交互功能，对应页面的交互功能在真正被翻页后激活。

在一个可能的实施例中，其中，所述内容页面容器包括：回答内容容器、文章内容容器、视频内容容器、通用页面内容容器。

图7示出了用于实现本公开的实施例的电子设备的结构示意图。如图7所示，电子设备包括中央处理单元（CPU）701，其可以根据存储在只读存储器（ROM）702中的程序或者从存储部分708加载到随机访问存储器（RAM）703中的程序而执行各种适当的动作和处理。在RAM703中，还存储有电子设备操作所需的各种程序和数据。CPU 701、ROM 702以及RAM 703通过总线704彼此相连。输入/输出（I/O）接口705也连接至总线704。

以下部件连接至I/O接口705：包括键盘、鼠标等的输入部分706；包括诸如阴极射线管（CRT）、液晶显示器（LCD）等以及扬声器等的输出部分707；包括硬盘等的存储部分708；以及包括诸如LAN卡、调制解调器等的网络接口卡的通信部分709。通信部分709经由诸如因特网的网络执行通信处理。驱动器710也根据需要连接至I/O接口705。可拆卸介质711，诸如磁盘、光盘、磁光盘、半导体存储器等等，根据需要安装在驱动器710上，以便于从其上读出的计算机程序根据需要被安装入存储部分708。

特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，包括承载指令的在计算机可读介质，在这样的实施例中，该指令可以通过通信部分709从网络上被下载和安装，和/或从可拆卸介质711被安装。在该指令被中央处理单元（CPU）701执行时，执行本公开中描述的各个方法步骤。

尽管已经描述了示例实施例，但是对于本领域技术人员来说显而易见的是，在不脱离本公开构思的精神和范围的情况下，可以进行各种改变和修改。因此，应当理解，上述示例实施例不是限制性的，而是说明性的。