CN107402962A

CN107402962A - 页面显示方法和装置

Info

Publication number: CN107402962A
Application number: CN201710459197.9A
Authority: CN
Inventors: 朱艳艳
Original assignee: Alibaba Group Holding Ltd
Current assignee: Zhejiang Koubei Network Technology Co Ltd
Priority date: 2017-06-16
Filing date: 2017-06-16
Publication date: 2017-11-28
Anticipated expiration: 2037-06-16
Also published as: CN111881396B; CN107402962B; CN111881396A

Abstract

本申请提供一种页面显示方法和装置，应用于包括标签页区域和非标签页区域的页面，所述标签页区域包括选项卡区域和内容展现区域，所述方法包括：对页面的滚动状态进行监测；若监测到页面向第一方向滚动，使得选项卡区域从显示界面的非边沿位置滚动至边沿位置、且使得内容展现区域位于显示界面内，则控制选项卡区域固定显示在所述边沿位置。本申请当用户想要切换标签页时，无需再次滚动页面，操作方便、快捷，提高了用户的浏览体验和浏览效率。

Description

页面显示方法和装置

技术领域

本申请涉及终端技术领域，尤其涉及一种页面显示方法和装置。

背景技术

随着互联网和移动设备的发展，越来越多的用户使用移动设备实现新闻、资讯等信息的浏览。

发明内容

有鉴于此，本申请提供一种页面显示方法和装置。

具体地，本申请是通过如下技术方案实现的：

一种页面显示方法，应用于包括标签页区域和非标签页区域的页面，所述标签页区域包括选项卡区域和内容展现区域，所述方法包括：

对页面的滚动状态进行监测；

若监测到页面向第一方向滚动，使得选项卡区域从显示界面的非边沿位置滚动至边沿位置、且使得内容展现区域位于显示界面内，则控制选项卡区域固定显示在所述边沿位置。

可选的，在选项卡区域固定显示的情况下，对第二操作进行监测；所述第二操作用于控制页面向第二方向滚动或刷新内容展现区域，所述第二方向与所述第一方向相反；

若监测到第二操作的频率或速度小于阈值，则控制页面向第二方向滚动；

若监测到第二操作的频率或速度大于等于阈值，则刷新内容展现区域。

可选的，还包括：

若监测到第二操作的频率或速度小于阈值，且在内容展现区域的第一边界位于显示界面内，则取消选项卡区域的固定显示状态；

所述第一边界为：内容展现区域中靠近选项卡区域的边界。

可选的，还包括：

在内容展现区域的第一边界位于显示界面内的情况下，显示刷新按钮。

可选的，所述在内容展现区域的第一边界位于显示界面内的情况下，显示刷新按钮，包括：

若监测到页面向所述第二方向滚动、且内容展现区域的第一边界出现在显示界面后滚动停止，则显示刷新按钮。

可选的，所述刷新按钮位于所述第一边界与所述选项卡区域之间。

对页面的滚动状态进行监测；

若监测到页面的选项卡区域从显示界面的底部滚动至顶部，且使得内容展现区域位于显示界面内，则控制选项卡区域固定显示在所述顶部。

可选的，在选项卡区域固定显示的情况下，对向下的滑动操作进行监测；

若监测到所述向下的滑动操作的频率或速度小于阈值，则控制页面向下滚动；

若监测到所述向下的滑动操作的频率或速度大于等于阈值，则刷新内容展现区域。

可选的，还包括：

若监测到页面向下滚动、且内容展现区域的第一边界出现在显示界面后滚动停止，则显示刷新按钮。

一种页面显示装置，应用于包括标签页区域和非标签页区域的页面，所述标签页区域包括选项卡区域和内容展现区域，所述装置包括：

第一监测单元，对页面的滚动状态进行监测；

第一固定单元，若监测到页面向第一方向滚动，使得选项卡区域从显示界面的非边沿位置滚动至边沿位置、且使得内容展现区域位于显示界面内，则控制选项卡区域固定显示在所述边沿位置。

可选的，第二监测单元，在选项卡区域固定显示的情况下，对第二操作进行监测；所述第二操作用于控制页面向第二方向滚动或刷新内容展现区域，所述第二方向与所述第一方向相反；

第一刷新单元，若监测到第二操作的频率或速度小于阈值，则控制页面向第二方向滚动；若监测到第二操作的频率或速度大于等于阈值，则刷新内容展现区域。

可选的，还包括：

所述第一固定单元，若监测到第二操作的频率或速度小于阈值，且在内容展现区域的第一边界位于显示界面内，则取消选项卡区域的固定显示状态；所述第一边界为：内容展现区域中靠近选项卡区域的边界。

可选的，还包括：

第一显示单元，在内容展现区域的第一边界位于显示界面内的情况下，显示刷新按钮。

可选的，所述第一显示单元，若监测到页面向所述第二方向滚动、且内容展现区域的第一边界出现在显示界面后滚动停止，则显示刷新按钮。

第三监测单元，对页面的滚动状态进行监测；

第二固定单元，若监测到页面的选项卡区域从显示界面的底部滚动至顶部，且使得内容展现区域位于显示界面内，则控制选项卡区域固定显示在所述顶部，在固定显示状态下。

可选的，第四监测单元，在选项卡区域固定显示的情况下，对向下的滑动操作进行监测；若监测到所述向下的滑动操作的频率或速度小于阈值，则控制页面向下滚动；若监测到所述向下的滑动操作的频率或速度大于等于阈值，则刷新内容展现区域。

可选的，还包括：

第二显示单元，若监测到页面向下滚动、且内容展现区域的第一边界出现在显示界面后滚动停止，则显示刷新按钮。

由以上描述可以看出，本申请可以在监测到选项卡区域从显示界面的非边沿位置滚动至边沿位置、且使得内容展现区域位于显示界面时，控制选项卡区域固定显示在所述边沿位置。当用户想要切换标签页时，无需再次滚动页面，操作方便、快捷，提高了用户的浏览体验和浏览效率。

附图说明

图1是相关技术中用户浏览用户页面的一示意图。

图2是相关技术中用户浏览用户页面的另一示意图。

图3是本申请一示例性实施例示出的一种页面显示方法的流程示意图。

图4是本申请一示例性实施例示出的一种选项卡区域置顶的示意图。

图5是本申请一示例性实施例示出的一种显示刷新按钮的示意图。

图6是本申请一示例性实施例示出的另一种页面显示方法的流程示意图。

图7是本申请一示例性实施例示出的一种用于页面显示装置的一结构示意图。

图8是本申请一示例性实施例示出的一种页面显示装置的框图。

图9是本申请一示例性实施例示出的另一种用于页面显示装置的一结构示意图。

图10是本申请一示例性实施例示出的另一种页面显示装置的框图。

具体实施方式

这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本申请相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本申请的一些方面相一致的装置和方法的例子。

在本申请使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本申请。在本申请和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。

应当理解，尽管在本申请可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本申请范围的情况下，第一信息也可以被称为第二信息，类似地，第二信息也可以被称为第一信息。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。

用户可以通过移动设备的浏览器来浏览页面，用户也可以通过移动设备中装载的APP(Application，应用程序)来浏览页面。目前，很多页面包括有标签页区域和非标签页区域。其中，非标签页区域通常会包括一些下级页面入口、页面展示元素等。标签页区域包括选项卡区域和内容展现区域。所述选项卡区域中包括用于切换标签页的选项卡；内容展现区域表示该页面中用于展示标签页的区域，值得注意的是，所述内容展现区域与该标签页显示与否无关，移动设备显示出的标签页通常是所述内容展现区域的一部分。

请参考图1，以某电商APP的一个页面为例，在该页面中，包括有美食、快餐小吃、电影以及“大牌快抢”等下一级页面的入口，这些页面元素组成的区域是非标签页区域。除此之外，该页面的标签页区域中包括“推荐”、“探好店”、“爱玩乐”以及“订阅”这四个选项卡所组成的选项卡区域。

用户可以通过操作控制页面滚动，比如滑动操作：在触摸屏上滑动手指。请参考图2，当用户的滑动操作方向是向上时，页面向上滚动，用户可以浏览标签页区域中的内容展现区域。相关技术中，当用户继续向上滑动时，选项卡区域随着页面滚动而无法展示，用户想要切换标签页时，需要反向向下滑动，直到选项卡区域展示出来后才能进行切换，这就会导致标签页切换效率低下，用户操作繁琐，严重影响用户的浏览体验以及浏览效率。

针对上述问题，本申请提供一种页面显示方案，可以通过对标签页区域中选项卡区域位置的控制，解决上述问题。

图3本申请一示例性实施例示出的一种页面显示方法的流程示意图。

在本实施例中，所述页面显示方法可以应用在移动设备中，比如：移动设备的浏览器、移动设备装载的APP等。在一个例子中，所述页面显示方法可以应用在所有包含标签页区域的页面中。在另一个例子中，所述页面显示方法也可以仅应用在部分包含标签页区域的用户页面中，比如：某APP的特定页面等，本申请对此不作特殊限制。

请参考图3，所述页面显示方法可以包括以下步骤：

步骤301，对页面的滚动状态进行监测。

在本实施例中，页面可随用户的滑动操作而滚动，所述用户的滑动操作可以指用户手指在移动设备触摸屏上的滑动操作，也可以指用户通过移动设备物理按钮输入的滑动操作，比如：用户点击向下的物理按钮可视为向下方向的滑动操作。

仍以图1和图2为例，若用户输入向上的滑动操作，则可以控制页面向上滚动，以便用户查看之前未显示出的内容展现区域。

步骤302，若监测到页面向第一方向滚动，使得选项卡区域从显示界面的非边沿位置滚动至边沿位置、且使得内容展现区域位于显示界面内(例如标签页区域相对于非标签页区域更多的展示于显示界面)，则控制选项卡区域固定显示在所述边沿位置。

在本实施例中，所述显示界面通常是指用于显示滚动页面的界面，基于不同的页面布局，所述显示界面可以为移动设备的整个显示屏，也可以为移动设备显示屏中的一部分，比如：图4所示的显示界面。选项卡区域的初始位置不在所述显示界面的边沿处，即选项卡区域的初始位置不在显示界面的上侧边沿、左侧边沿、右侧边沿等边沿处。

基于图1所示的显示界面以及滑动操作，可将页面的滚动方向称为第一方向。当监测到选项卡区域从显示界面的非边沿位置滚动至边沿位置、且使得内容展现区域位于显示界面内时(例如，标签页区域相对于非标签页区域更多的展示于显示界面)，请继续参考图4，可以控制选项卡区域固定显示在上侧边沿处，即选项卡区域置顶。在固定显示的状态下，选项卡区域不随页面的其他部分同步滚动。换言之，根据用户的向上滑动操作，可以继续控制当前标签页的内容展现区域滚动，即控制“推荐”页面中的消息滚动。

类似的，若页面滚动的第一方向是向左或者向右，用户可以通过向左的滑动操作控制页面向左滚动，以浏览右侧标签页区域的内容展现区域。基于图3所示的实施例，当监测到选项卡区域从显示界面的非边沿位置滚动至左侧边沿处、且使得内容展现区域位于显示界面内时，可以将选项卡区域固定显示在左边沿位置，即将选项卡区域置左(未图示)，然后继续根据向左的滑动操作控制内容展现区域继续向左滚动。当然，在实际应用中，根据页面布局和用户浏览习惯，还可以将所述选项卡区域置右，本申请对此不作特殊限制。

值得注意的是，若监测到页面向第一方向滚动，使得到选项卡区域从显示界面的非边沿位置滚动至边沿位置，但内容展现区域不位于显示界面内，则可以说明用户想要浏览的是非标签页区域中的内容，此时无需控制选项卡区域固定显示。

由以上描述可以看出，本申请可以在监测到选项卡区域从显示界面的非边沿位置滚动至边沿位置、且使得内容展现区域位于显示界面时，控制选项卡区域固定显示在所述边沿位置，固定显示状态下，选项卡区域不随页面的其他部分同步滚动。当用户想要切换标签页时，无需再次滚动页面，操作方便、快捷，提高了用户的浏览体验和浏览效率。

基于图3所示的实施例，本申请还支持当前内容展现区域的刷新功能，下面结合具体的实施例进行详细的介绍。

一、根据第二操作的频率进行内容展现区域的刷新，所述第二操作可以控制页面向与前述第一方向相反的第二方向滚动。

目前，针对选项卡区域始终固定于显示界面边沿的页面布局而言，用户习惯返回到页面顶部，即当前内容展现区域的第一边界完全显示，然后通过下拉的方式进行刷新。其中，所述第一边界为内容展现区域中靠近选项卡区域的边界，请参考图2，“每日健体”这条消息与选项卡区域的边界为第一边界。

由于本申请页面包括标签页区域和非标签页区域，而选项卡区域的初始位置不在显示界面的边沿，请继续参考图1，若用户向下滑动，页面将滚动显示标签页区域上面的非标签页区域，而无法实现刷新。针对这个问题，本实施例可兼容用户已有的使用习惯，也可以根据用户的第二操作来实现当前标签页的刷新。

具体地，基于图3所示的实施例，在选项卡区域固定显示的情况下，若用户输入第二操作控制页面向与第一方向相反方向的第二方向滚动，那么有两种可能，一种是用户想要浏览非标签页区域的内容，另一种是用户想要刷新当前内容展现区域，在本例中，可以根据用户第二操作的频率或速度来确定。

在一个例子中，若用户第二操作的频率或速度大于等于阈值，则可以认为用户是想刷新当前内容展现区域，进而可以保持选项卡区域的固定，并刷新当前内容展现区域。其中，所述阈值可以由开发人员根据用户习惯进行设置。举例来说，假设已将选项卡区域置顶，若用户向下的滑动操作频率大于等于所述阈值，则可以刷新当前内容展现区域。

在另一个例子中，若用户第二滑动操作的频率或速度小于所述阈值，则可以认为用户是想浏览非标签页区域的内容，进而可以控制页面向第二方向滚动。基于用户的第二操作，若监测到内容展现区域的第一边界位于显示界面内时，可以取消选项卡区域的固定显示状态。举例来说，仍假设已将选项卡区域置顶，若用户向下的滑动操作频率或速度小于所述阈值，则可以控制页面向下滚动，当内容展现区域的第一边界位于显示界面内时，可以取消选项卡区域的固定显示状态，继续控制页面回滚，以便用户浏览非标签页的内容。

当然，在实际应用中，与频率和速度类似，也可以根据用户连续输入第二操作的时长来确定是否刷新当前内容展现区域，比如：若用户在5秒内连续进行第二操作，则可以刷新当前内容展现区域等。

二、显示刷新按钮

在本实施例中，在选项卡区域固定显示的情况下，若监测到内容展现区域的第一边界位于显示界面内，则可以显示刷新按钮。在该刷新按钮被触发时，比如：用户点击该刷新按钮，则可以刷新当前内容展现区域。

在一个例子中，可以在监测到页面向所述第二方向滚动、且内容展现区域的第一边界出现在显示界面后滚动停止时，显示刷新按钮。

请参考图5的示例，仍以将选项卡区域置顶为例，假设用户缓慢向下滑动屏幕，那么可以在内容展现区域的第一边界出现在显示界面后页面滚动停止时，在所述第一边界和所述选项卡区域之间为用户提供刷新按钮，若用户点击该刷新按钮，则可以维持选项卡区域的固定显示状态，并刷新当前内容展现区域。若用户未点击该刷新按钮，并继续向下滑动屏幕，则可以取消对选项卡区域的置顶，进而根据该向下滑动操作，控制页面继续向下滚动。可选的，还可以在该刷新按钮中显示新消息的数量等信息。

当然，在实际应用中，本申请并不限制刷新按钮的显示位置与显示时机，开发人员还可以在用户向下滑动屏幕时，就显示刷新按钮给用户，而无需等到第一边界出现在显示界面中。比如：若检测到用户向下滑动屏幕，则可以通过悬浮框的形式显示刷新按钮等，本申请对此不作特殊限制。

请参考图6，所述页面显示方法可以包括以下步骤：

步骤601，对页面的滚动状态进行监测。

步骤602，若监测到页面的选项卡区域从显示界面的底部滚动至顶部，且使得内容展现区域位于显示界面内，则控制选项卡区域固定显示在所述顶部。

可选的，若监测到页面向下滚动、且内容展现区域的第一边界出现在显示界面后滚动停止，则显示刷新按钮。

与前述图3所示的页面显示方法的实施例相对应，本申请还提供了页面显示装置的实施例。

本申请页面显示装置的实施例可以应用在移动设备上。装置实施例可以通过软件实现，也可以通过硬件或者软硬件结合的方式实现。以软件实现为例，作为一个逻辑意义上的装置，是通过其所在页面显示的处理器将非易失性存储器中对应的计算机程序指令读取到内存中运行形成的。从硬件层面而言，如图7所示，为本申请页面显示装置所在移动设备的一种硬件结构图，除了图7所示的处理器、内存、网络接口、以及非易失性存储器之外，实施例中装置所在的移动设备通常根据该移动设备的实际功能，还可以包括其他硬件，对此不再赘述。

图8本申请一示例性实施例示出的一种页面显示装置的框图。

请参考图8，所述页面显示装置700可以应用于包括标签页区域和非标签页区域的页面，所述标签页区域包括选项卡区域和内容展现区域，所述页面显示装置700包括有：第一监测单元701、第一固定单元702、第二监测单元703、第一刷新单元704以及第一显示单元705。

第一监测单元701，对页面的滚动状态进行监测；

第一固定单元702，若监测到页面向第一方向滚动，使得选项卡区域从显示界面的非边沿位置滚动至边沿位置、且使得内容展现区域位于显示界面内，则控制选项卡区域固定显示在所述边沿位置。

第二监测单元703，在选项卡区域固定显示的情况下，对第二操作进行监测；所述第二操作用于控制页面向第二方向滚动或刷新内容展现区域，所述第二方向与所述第一方向相反；

第一刷新单元704，若监测到第二操作的频率或速度小于阈值，则控制页面向第二方向滚动；若监测到第二操作的频率或速度大于等于阈值，则刷新内容展现区域。

所述第一固定单元702，若监测到第二操作的频率或速度小于阈值，且在内容展现区域的第一边界位于显示界面内，则取消选项卡区域的固定显示状态；所述第一边界为：内容展现区域中靠近选项卡区域的边界。

第一显示单元705，在内容展现区域的第一边界位于显示界面内的情况下，显示刷新按钮。

可选的，所述第一显示单元705，若监测到页面向所述第二方向滚动、且内容展现区域的第一边界出现在显示界面后滚动停止，则显示刷新按钮。

与前述图6所示的页面显示方法的实施例相对应，本申请还提供了页面显示装置的实施例。

本申请页面显示装置的实施例可以应用在移动设备上。装置实施例可以通过软件实现，也可以通过硬件或者软硬件结合的方式实现。以软件实现为例，作为一个逻辑意义上的装置，是通过其所在页面显示的处理器将非易失性存储器中对应的计算机程序指令读取到内存中运行形成的。从硬件层面而言，如图9所示，为本申请页面显示装置所在移动设备的一种硬件结构图，除了图9所示的处理器、内存、网络接口、以及非易失性存储器之外，实施例中装置所在的移动设备通常根据该移动设备的实际功能，还可以包括其他硬件，对此不再赘述。

图10本申请一示例性实施例示出的一种页面显示装置的框图。

请参考图10，所述页面显示装置900可以应用于包括标签页区域和非标签页区域的页面，所述标签页区域包括选项卡区域和内容展现区域，所述显示装置900包括有：第三监测单元901、第二固定单元902、第二刷新单元903以及第二显示单元904。

第三监测单元901，对页面的滚动状态进行监测；

第二固定单元902，若监测到页面的选项卡区域从显示界面的底部滚动至顶部，且使得内容展现区域位于显示界面内，则控制选项卡区域固定显示在所述顶部。

第二刷新单元903，在选项卡区域固定显示的情况下，对向下的滑动操作进行监测；若监测到所述向下的滑动操作的频率或速度小于阈值，则控制页面向下滚动；若监测到所述向下的滑动操作的频率或速度大于等于阈值，则刷新内容展现区域。

第二显示单元904，若监测到页面向下滚动、且内容展现区域的第一边界出现在显示界面后滚动停止，则显示刷新按钮。

上述装置中各个单元的功能和作用的实现过程具体详见上述方法中对应步骤的实现过程，在此不再赘述。

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

上述实施例阐明的系统、装置、模块或单元，具体可以由计算机芯片或实体实现，或者由具有某种功能的产品来实现。一种典型的实现设备为计算机，计算机的具体形式可以是个人计算机、膝上型计算机、蜂窝电话、相机电话、智能电话、个人数字助理、媒体播放器、导航设备、电子邮件收发设备、游戏控制台、平板计算机、可穿戴设备或者这些设备中的任意几种设备的组合。

以上所述仅为本申请的较佳实施例而已，并不用以限制本申请，凡在本申请的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本申请保护的范围之内。

Claims

1.一种页面显示方法，应用于包括标签页区域和非标签页区域的页面，所述标签页区域包括选项卡区域和内容展现区域，所述方法包括：

对页面的滚动状态进行监测；

2.根据权利要求1所述的方法，还包括：

在选项卡区域固定显示的情况下，对第二操作进行监测；所述第二操作用于控制页面向第二方向滚动或刷新内容展现区域，所述第二方向与所述第一方向相反；

3.根据权利要求2所述的方法，还包括：

所述第一边界为：内容展现区域中靠近选项卡区域的边界。

4.根据权利要求2所述的方法，还包括：

5.根据权利要求4所述的方法，所述在内容展现区域的第一边界位于显示界面内的情况下，显示刷新按钮，包括：

6.一种页面显示装置，应用于包括标签页区域和非标签页区域的页面，所述标签页区域包括选项卡区域和内容展现区域，所述装置包括：

第一监测单元，对页面的滚动状态进行监测；

7.根据权利要求6所述的装置，还包括：

第二监测单元，在选项卡区域固定显示的情况下，对第二操作进行监测；所述第二操作用于控制页面向第二方向滚动或刷新内容展现区域，所述第二方向与所述第一方向相反；

8.根据权利要求7所述的装置，还包括：

9.根据权利要求7所述的装置，还包括：

10.根据权利要求9所述的装置，

所述第一显示单元，若监测到页面向所述第二方向滚动、且内容展现区域的第一边界出现在显示界面后滚动停止，则显示刷新按钮。