一种wap页面标题栏显示方法及系统的制作方法
【专利摘要】本发明适用于计算机【技术领域】，提供了一种wap页面标题栏显示方法及系统，所述wap页面包括至少一个区域，每一区域包括一标题栏，所述方法包括：在页面滑动过程中，若设备屏幕当前显示的某个区域的标题栏不在设备屏幕内，则在所述某个区域的显示过程中，通过预设浮动标题栏，在所述设备屏幕持续显示所述某个区域的标题栏的内容。本发明实现同一页面内不同区域标题栏的模拟物理递推的交互方式，从而将标题栏不在设备屏幕内的区域的标题栏的内容可以一直保留在设备屏幕顶端，使得终端设备用户可以随时进入网页的子页面，且不影响用户阅读。
【专利说明】一种wap页面标题栏显示方法及系统
【技术领域】
[0001]本发明属于计算机【技术领域】，尤其涉及一种wap页面标题栏显示方法及系统。
【背景技术】
[0002]随着无线应用协议(Wireless Application Protocol, WAP)技术的发展,移动终端等无线设备接入互联网成为可能，例如，手机WAP网站，WAP技术把互联网上的信息转换成能在手机屏幕等移动设备上显示的信息，极大方便了移动终端用户上网浏览信息。
[0003]目前，为了满足用户对信息的需求量，一个wap页面能够承载的各种信息内容页越来越多，为了能够及时帮助用户获取相应的信息，通常将wap页面划分成多个区域，多个区域的内容依次排开，且每个区域通常包括一个位于区域顶端的标题栏，每个标题栏包括多个相应的子栏目选项卡，用户可以在标题栏点击相应的子栏目选项卡选择想要查看的内容，以进入相应的主题页面。在用户阅读wap页面过程中，整个wap页面随着用户的操作手势逐渐滑动，然而，为了显示更多的内容，每个区域长度通常超过当前屏幕的大小，因此，用户在阅读某个区域的内容时，区域的标题栏经常处于终端屏幕之外，以致无法提供及时方便的页面导航，此时，用户想进入该区域标题栏中的某个子栏目，只能反向拖拽页面直到露出该区域的标题栏，进而选择子栏目名称以进入相应的主题页面。
【发明内容】
[0004]本发明实施例的目的在于提供一种wap页面标题栏显示方法，旨在解决现有技术用户在阅读wap页面某个区域的内容时，区域的标题栏经常处于终端屏幕之外，无法提供及时方便的页面导航的问题。
[0005]为了实现上述目的，本发明实施例提供如下技术方案:
[0006]本发明实施例是这样实现的，本发明实施例提供了一种wap页面标题栏显示方法，所述wap页面包括至少一个区域，每一区域包括一标题栏，所述方法包括:
[0007]在页面滑动过程中，若设备屏幕当前显示的某个区域的标题栏不在设备屏幕内，则在所述某个区域的显示过程中，通过预设浮动标题栏，在所述设备屏幕持续显示所述某个区域的标题栏的内容。
[0008]本发明实施例提供了一种wap页面标题栏显示系统,所述wap页面包括至少一个区域，每一区域包括一标题栏，所述系统包括:
[0009]显示单元，用于在页面滑动过程中，若设备屏幕当前显示的某个区域的标题栏不在设备屏幕内，则在所述某个区域的显示过程中，通过预设浮动标题栏，在所述设备屏幕持续显示所述某个区域的标题栏的内容。
[0010]本发明实施例与现有技术相比，有益效果在于:在页面滑动过程中，若设备屏幕当前显示的某个区域的标题栏不在设备屏幕内，则在所述某个区域的显示过程中，通过预设浮动标题栏，在所述设备屏幕持续显示所述某个区域的标题栏的内容。本发明实现同一页面内不同区域标题栏的模拟物理递推的交互方式，从而将标题栏不在设备屏幕内的区域的标题栏的内容可以一直保留在设备屏幕顶端，使得终端设备用户可以随时进入网页的子页面，且不影响用户阅读。
【专利附图】
【附图说明】
[0011]为了更清楚地说明本发明实施例的技术方案，下面将对实施例描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本发明的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
[0012]图1是本发明实施例一提供的wap页面标题栏显示方法的实现的流程图；
[0013]图2是本发明实施例二提供的wap页面标题栏显示方法的实现的流程图；
[0014]图3是本发明实施例三提供的wap页面标题栏显示方法的实现的流程图；
[0015]图4a-图4d是本发明实施例三提供的wap页面上滑过程标题栏显示过程的示意图；
[0016]图5是本发明实施例三提供的wap页面标题栏显示方法的技术实现流程图；
[0017]图6是本发明实施例四提供的wap页面标题栏显示方法的实现的流程图；
[0018]图7a_7d是本发明实施例四提供的wap页面下滑过程标题栏显示过程的示意图；
[0019]图8是本发明实施例五提供的wap页面标题栏显示系统的结构示意图；
[0020]图9是本发明实施例六提供的wap页面标题栏显示系统的结构示意图；
[0021]图10是本发明实施例七提供的wap页面标题栏显示系统的结构示意图。
【具体实施方式】
[0022]为了使本发明的目的、技术方案及优点更加清楚明白，以下结合附图及实施例，对本发明进行进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。
[0023]本发明实施例提供了一种wap页面标题栏显示方法，所述wap页面包括至少一个区域，每一区域包括一标题栏，所述方法包括:
[0024]在页面滑动过程中，若设备屏幕当前显示的某个区域的标题栏不在设备屏幕内，则在所述某个区域的显示过程中，通过预设浮动标题栏，在所述设备屏幕持续显示所述某个区域的标题栏的内容。
[0025]本发明实施例提供了一种wap页面标题栏显示系统,所述wap页面包括至少一个区域，每一区域包括一标题栏，所述系统包括:
[0026]显示单元，用于在页面滑动过程中，若设备屏幕当前显示的某个区域的标题栏不在设备屏幕内，则在所述某个区域的显示过程中，通过预设浮动标题栏，在所述设备屏幕持续显示所述某个区域的标题栏的内容。
[0027]以下结合具体实施例对本发明的实现进行详细描述:
[0028]实施例一
[0029]本实施例的应用场景如下:iPhone终端及android终端显示wap页面的过程中，由于wap页面通常包括多个区域及其相应的标题栏，且通常一个区域的显示内容通常超过设备屏幕的大小，所以区域的标题栏经常不在设备设备屏幕内，为了让用户能够及时查看到区域的标题栏的内容，可以在当前区域的标题栏不再设备屏幕的期间内，保持将其标题栏的内容仍然显示在设备设备屏幕范围内，从而让用户随时可以查看区域标题栏的内容，以下通过实施例进行具体说明，图1示出了本发明实施例一提供的Wap页面标题栏显示方法的实现的流程图，所述wap页面包括至少一个区域，每一区域包括一标题栏，所述方法详述如下:
[0030]在SlOl中，在页面滑动过程中，若设备屏幕当前显示的某个区域的标题栏不在设备屏幕内，则在所述某个区域的显示过程中，通过预设浮动标题栏，在所述设备屏幕持续显示所述某个区域的标题栏的内容。
[0031]本实施例中，设备屏幕当前显示的区域可以有I个或者多个。
[0032]本实施例中，所述设备屏幕可以为iphone、ipad等移动终端的设备屏幕。
[0033]本实施例中，可以使用iScroll进行区域页面滑动。
[0034]本发明实施例中，在页面滑动过程中，若设备屏幕当前显示的某个区域的标题栏不在设备屏幕内，则在所述某个区域的显示过程中，通过预设浮动标题栏，在所述设备屏幕持续显示所述某个区域的标题栏的内容。本发明实现同一页面内不同区域标题栏的模拟物理递推的交互方式，从而将标题栏不在设备屏幕内的区域的标题栏的内容可以一直保留在设备屏幕顶端，使得终端设备用户可以随时进入网页的子页面，且不影响用户阅读。
[0035]实施例二
[0036]本实施例中，可以将持续显示的所述区域的标题栏显示在设备屏幕的任一预设位置，例如，设备屏幕左端内侧、设备屏幕右段内侧、设备屏幕下端外侧等，为了方便用户查看，优选的，可以将位于设备屏幕的顶端内侧，请参阅图2，图2示出了本发明实施例二提供的wap页面标题栏显示方法的实现的流程图，所述wap页面包括至少一个区域，每一区域包括一标题栏，所述方法详述如下:
[0037]在S201中，在页面滑动过程中，若设备屏幕当前显示的某个区域的标题栏不在设备屏幕内，则在所述某个区域的显示过程中，通过预设浮动标题栏，在所述设备屏幕顶端内侧持续显示所述某个区域的标题栏的内容，其中，所述预设浮动标题栏为位于设备屏幕顶端的可滑动标题栏。
[0038]本发明实施例中，若当前显示区域的标题栏不在设备屏幕内，则在所述区域显示的过程中，通过位于设备屏幕顶端的预设浮动标题栏，在设备屏幕顶端内侧持续显示所述区域的标题栏的内容，实现同一页面内不同区域标题栏的模拟物理递推的交互方式，从而将标题栏不在设备屏幕内的区域的标题栏的内容可以一直保留在设备屏幕顶端，使得终端设备用户可以随时进入网页的子页面，且不影响用户阅读。
[0039]实施例三
[0040]图3示出了本发明实施例三提供的wap页面标题栏显示方法的实现的流程图，所述wap页面包括至少一个区域，每一区域包括一标题栏，所述方法详述如下:
[0041]在S301中，在页面向上滑动过程中，当所述预设浮动标题栏所在区域相邻的下一区域与所述预设浮动标题栏下边缘碰撞后，向上滑动所述预设浮动标题栏；
[0042]本实施例中，所述下一区域为位于当前所述预设浮动标题栏所在区域下方的区域。
[0043]在S302中，当所述预设浮动标题栏滑动至所述设备屏幕的顶端外侧后，重置所述预设浮动标题栏位置至所述设备屏幕的顶端内侧，并将所述预设浮动标题栏的内容更新为所述下一区域标题栏的内容。
[0044]本实施例中，当所述预设浮动标题栏滑动至所述设备屏幕的顶端外侧后，则所述下一区域的标题栏已经滑出设备屏幕，即设备屏幕当前显示的所述下一区域的标题栏不在设备屏幕内，则重置所述预设浮动标题栏位置至所述设备屏幕的顶端内侧，并将所述预设浮动标题栏的内容更新为所述下一区域标题栏的内容，即实现通过预设浮动标题栏，在所述设备屏幕顶端内侧持续显示所述某个区域的标题栏的内容。
[0045]为了便于理解，以下通过具体的实现示例对本实施中页面上滑过程wap页面标题栏显示过程进行说明，但不以本实现示例的实现过程为限，请参阅图4a_图4d，若设备屏幕当前显示的一区域的标题栏B不在设备屏幕内，则通过预设浮动标题栏显示所述标题栏B，显示过程如下:标题栏为B的区域相邻的下一区域正在随着页面向上滑动，其标题栏为C，请参阅图4a，当预设浮动标题栏与标题栏C发生碰撞后，预设浮动标题栏与下一区域一起向上滑动，请参阅图4b，当所述预设浮动标题栏滑动至所述设备屏幕的顶端外侧后，重置所述预设浮动标题栏位置至所述设备屏幕的顶端内侧，并将所述预设浮动标题栏的内容更新为所述下一区域标题栏C的内容,请参阅图4c, wap页面继续向上滑动，wap页面中的当前显示区域的标题栏C已经移出屏幕显示范围，但是已经通过浮动标题将该区域的标题栏C的内容保留在了当前显示区域范围内，进而等待下一次与交互碰撞过程，请参阅图4d。
[0046]以下进一步通过一个例子对本实施例的技术实现过程进行说明，但不以此实现方式进行说明，此处仅是可以实现的一种方式，请参阅图5，本实施例中，以设备屏幕的右上角为坐标原点，建立坐标系，向右，向下分别为X轴正方向，Y周正方向，并预先获取所有区域标的位置及区域标题栏所在位置，以便使用，具体流程如下:
[0047]在S501中，向下滑动页面；
[0048]在S502中，根据预先获取所有区域标的位置信息及区域标题栏所在位置信息，判断当页面卷去高度是否大于下一区域顶边位置，若是，执行S503，若否，执行S504。
[0049]在S503中，重置所述预设浮动标题栏位置至所述设备屏幕的顶端内侧，并将所述预设浮动标题栏的内容更新为所述下一区域标题栏的内容，并继续滑动页面，并执行S501。
[0050]在S504中，根据预先获取所有区域标的位置信息及区域标题栏所在位置信息，判断当前页面卷去高度是否大于下一区域顶边位置减去标题高度的差值，若是，则执行S503，若否，则执行S505。
[0051]在S505中，向上滑动所述预设浮动标题栏，并计算预设浮动标题栏位置所在位置，并执行S501。
[0052]本实施例中，根据页面中区域位置、标题栏位置及页面卷去高度之间的关系，确定预设浮动标题栏状态，实现wap页面在向上滑动过程中可以将当前显示区域的标题栏保留在设备屏幕顶端，不依赖滑动方向因此整个过程可逆，同时，由于预先获取页面所有标题位置并缓存可以减少每次查询的计算量
[0053]本实施例中，在页面向上滑动过程中，当所述预设浮动标题栏所在区域相邻的下一区域与所述预设浮动标题栏下边缘碰撞后，向上滑动所述预设浮动标题栏，当所述预设浮动标题栏滑动至所述设备屏幕的顶端外侧后，重置所述预设浮动标题栏位置至所述设备屏幕的顶端内侧，并将所述预设浮动标题栏的内容更新为所述下一区域标题栏的内容。实现wap页面在向上滑动过程中可以将当前显示区域的标题栏保留在设备屏幕顶端，使得终端设备用户可以随时进入当前区域的子页面。
[0054]实施例四
[0055]图6示出了本发明实施例四提供的wap页面标题栏显示方法的实现的流程图，所述wap页面包括至少一个区域，每一区域包括一标题栏，所述方法详述如下:
[0056]在S601中，在页面向下滑动过程中，当预设浮动标题栏所在区域相邻的上一区域与所述预设浮动标题栏上边缘碰撞后，重置所述预设浮动标题栏位置至所述设备屏幕的顶端外侧，并将所述预设浮动标题栏的内容更新为所述上一区域标题栏的内容；
[0057]本实施例中，所述上一区域为位于当前所述预设浮动标题栏所在区域上方的区域。
[0058]在S602中，向下滑动所述预设浮动标题栏，当滑动至设备屏幕的顶端内侧时，停止滑动所述预设浮动标题栏。
[0059]为了便于理解，以下通过具体的实现示例对本实施中页面下滑过程wap页面标题栏显示过程进行说明，但不以本实现示例的实现过程为限，仍然以实施例三中实现示例进行说明，请参阅图7a_图7d，假设用户此时需要查看已经滑到设备屏幕上端的所述下一区域的内容，即标题栏为B的区域的内容，此时，已经滑到设备屏幕上端的所述下一区域即为与所述浮动标题栏所在区域相邻的上一区域，此时，屏幕显示的是标题栏为C的区域的内容，即预设浮动标题栏显示的标题栏C的内容，请参阅图7a，在用户向下拉动页面过程中，预设浮动标题栏所在区域相邻的上一区域与所述预设浮动标题栏上边缘碰撞后，重置所述预设浮动标题栏位置至所述设备屏幕的顶端外侧，并将所述预设浮动标题栏的内容更新为所述上一区域标题栏B的内容，请参阅图7b，此后，预设浮动标题栏随着页面一起向下滑动，请参阅图7c，当滑动至设备屏幕的顶端内侧时，停止滑动所述预设浮动标题栏，页面继续滑动，此时，标题栏与请参阅图7d。
[0060]本实施例中，在页面向下滑动过程中，当预设浮动标题栏所在区域相邻的上一区域与所述预设浮动标题栏上边缘碰撞后，重置所述预设浮动标题栏位置至所述设备屏幕的顶端外侧，并将所述预设浮动标题栏的内容更新为所述上一区域标题栏的内容，向下滑动所述预设浮动标题栏，当滑动至设备屏幕的顶端内侧时，停止滑动所述预设浮动标题栏。实现wap页面在向下滑动过程中可以将当前显示区域的标题栏保留在设备屏幕顶端，使得终端设备用户随时随刻进入当前区域的子页面。
[0061]实施例五
[0062]图8示出了本发明实施例五提供的wap页面标题栏显示系统的结构图，所述wap页面包括至少一个区域，每一区域包括一标题栏，为了便于说明，仅示出了与本发明实施例相关的部分，该装置可以是内置于终端设备中的软件单元、硬件单元或者软硬结合单元，所述系统包括:
[0063]显示单元81，用于在页面滑动过程中，若设备屏幕当前显示的某个区域的标题栏不在设备屏幕内，则在所述某个区域的显示过程中，通过预设浮动标题栏，在所述设备屏幕持续显示所述某个区域的标题栏的内容。
[0064]可选的，所述显示单元81，具体用于在页面滑动过程中，若设备屏幕当前显示的某个区域的标题栏不在设备屏幕内，则在所述某个区域的显示过程中，通过预设浮动标题栏，在所述设备屏幕顶端内侧持续显示所述某个区域的标题栏的内容，其中，所述预设浮动标题栏为位于设备屏幕顶端的可滑动标题栏。
[0065]本发明实施例提供的wap页面标题栏显示系统可以使用在前述对应的方法实施例一、二中，详情参见上述实施例一、二的描述，在此不再赘述。
[0066]实施例六
[0067]图9示出了本发明实施例六提供的wap页面标题栏显示系统的结构图，所述wap页面包括至少一个区域，每一区域包括一标题栏，为了便于说明，仅示出了与本发明实施例相关的部分，该装置可以是内置于终端设备中的软件单元、硬件单元或者软硬结合单元，所述系统显示单元91，所述显示单元91包括上滑模块911和上滑更新模块912。
[0068]上滑模块911，用于在页面向上滑动过程中，当所述预设浮动标题栏所在区域相邻的下一区域与所述预设浮动标题栏下边缘碰撞后，向上滑动所述预设浮动标题栏；
[0069]上滑更新模块912，用于当所述预设浮动标题栏滑动至所述设备屏幕的顶端外侧后，重置所述预设浮动标题栏位置至所述设备屏幕的顶端内侧，并将所述预设浮动标题栏的内容更新为所述下一区域标题栏的内容。
[0070]本发明实施例提供的wap页面标题栏显示系统可以使用在前述对应的方法实施例三中，详情参见上述实施例三的描述，在此不再赘述。
[0071]实施例七
[0072]图10示出了本发明实施例六提供的wap页面标题栏显示系统的结构图，所述wap页面包括至少一个区域，每一区域包括一标题栏，为了便于说明，仅示出了与本发明实施例相关的部分，该装置可以是内置于终端设备中的软件单元、硬件单元或者软硬结合单元，所述系统显示单元101包括下滑更新模块1011和下滑模块1012。
[0073]下滑更新模块1011，用于在页面向下滑动过程中，当预设浮动标题栏所在区域相邻的上一区域与所述预设浮动标题栏上边缘碰撞后，重置所述预设浮动标题栏位置至所述设备屏幕的顶端外侧，并将所述预设浮动标题栏的内容更新为所述上一区域标题栏的内容；
[0074]下滑模块1012，用于向下滑动所述预设浮动标题栏，当滑动至设备屏幕的顶端内侧时，停止滑动所述预设浮动标题栏。
[0075]本发明实施例提供的wap页面标题栏显示系统可以使用在前述对应的方法实施例四中，详情参见上述实施例四的描述，在此不再赘述。
[0076]值得注意的是，上述实施例中，所包括的各个单元只是按照功能逻辑进行划分的，但并不局限于上述的划分，只要能够实现相应的功能即可；另外，各功能单元的具体名称也只是为了便于相互区分，并不用于限制本发明的保护范围。
[0077]另外，本领域普通技术人员可以理解实现上述各实施例方法中的全部或部分步骤是可以通过程序来指令相关的硬件来完成，相应的程序可以存储于一计算机可读取存储介质中，所述的存储介质，如R0M/RAM、磁盘或光盘等。
[0078]以上所述仅为本发明的较佳实施例而已，并不用以限制本发明，凡在本发明的精神和原则之内所作的任何修改、等同替换和改进等，均应包含在本发明的保护范围之内。
【权利要求】
1.一种wap页面标题栏显示方法，其特征在于，所述wap页面包括至少一个区域，每一区域包括一标题栏，所述方法包括: 在页面滑动过程中，若设备屏幕当前显示的某个区域的标题栏不在设备屏幕内，则在所述某个区域的显示过程中，通过预设浮动标题栏，在所述设备屏幕持续显示所述某个区域的标题栏的内容。
2.如权利要求1所述的方法，其特征在于，所述在所述设备屏幕持续显示所述某个区域的标题栏的内容具体为: 在所述设备屏幕顶端内侧持续显示所述某个区域的标题栏的内容，其中，所述预设浮动标题栏为位于设备屏幕顶端的可滑动标题栏。
3.如权利要求2所述的方法，其特征在于，所述在页面滑动过程中，若设备屏幕当前显示的某个区域的标题栏不在设备屏幕内，则在所述某个区域的显示过程中，通过预设浮动标题栏，在所述设备屏幕持续显示所述某个区域的标题栏的内容具体为: 在页面向上滑动过程中，当所述预设浮动标题栏所在区域相邻的下一区域与所述预设浮动标题栏下边缘碰撞后，向上滑动所述预设浮动标题栏； 当所述预设浮动标题栏滑动至所述设备屏幕的顶端外侧后，重置所述预设浮动标题栏位置至所述设备屏幕的顶端内侧，并将所述预设浮动标题栏的内容更新为所述下一区域标题栏的内容。
4.如权利要求2所述的方法，其特征在于，所述在页面滑动过程中，若设备屏幕当前显示的某个区域的标 题栏不在设备屏幕内，则在所述某个区域的显示过程中，通过预设浮动标题栏，在所述设备屏幕持续显示所述某个区域的标题栏的内容具体为: 在页面向下滑动过程中，当预设浮动标题栏所在区域相邻的上一区域与所述预设浮动标题栏上边缘碰撞后，重置所述预设浮动标题栏位置至所述设备屏幕的顶端外侧，并将所述预设浮动标题栏的内容更新为所述上一区域标题栏的内容； 向下滑动所述预设浮动标题栏，当滑动至设备屏幕的顶端内侧时，停止滑动所述预设浮动标题栏。
5.一种wap页面标题栏显示系统，其特征在于，所述wap页面包括至少一个区域，每一区域包括一标题栏，所述系统包括: 显示单元，用于在页面滑动过程中，若设备屏幕当前显示的某个区域的标题栏不在设备屏幕内，则在所述某个区域的显示过程中，通过预设浮动标题栏，在所述设备屏幕持续显示所述某个区域的标题栏的内容。
6.如权利要求6所述的系统，其特征在于，所述显示单元，具体用于在所述设备屏幕顶端内侧持续显示所述某个区域的标题栏的内容，其中，所述预设浮动标题栏为位于设备屏幕顶端的可滑动标题栏。
7.如权利要求6所述的系统，其特征在于，所述显示单元包括: 上滑模块，用于在页面向上滑动过程中，当所述预设浮动标题栏所在区域相邻的下一区域与所述预设浮动标题栏下边缘碰撞后，向上滑动所述预设浮动标题栏； 上滑更新模块，用于当所述预设浮动标题栏滑动至所述设备屏幕的顶端外侧后，重置所述预设浮动标题栏位置至所述设备屏幕的顶端内侧，并将所述预设浮动标题栏的内容更新为所述下一区域标题栏的内容。
8.如权利要求6所述的系统，其特征在于，所述显示单元包括: 下滑更新模块，用于在页面向下滑动过程中，当预设浮动标题栏所在区域相邻的上一区域与所述预设浮动标题栏上边缘碰撞后，重置所述预设浮动标题栏位置至所述设备屏幕的顶端外侧，并将所述预设浮动标题栏的内容更新为所述上一区域标题栏的内容； 下滑模块，用于向下滑动所述预设浮动标题栏，当滑动至设备屏幕的顶端内侧时，停止滑动所述预设浮 动标题栏。
【文档编号】G06F17/30GK104008115SQ201310061879
【公开日】2014年8月27日 申请日期:2013年2月27日 优先权日:2013年2月27日
【发明者】尚世朝, 张晶, 成媛, 赵娜 申请人:腾讯科技（深圳）有限公司