CN111625167B - 页面切换方法、装置、计算机设备 - Google Patents

页面切换方法、装置、计算机设备 Download PDF

Info

Publication number
CN111625167B
CN111625167B CN202010467212.6A CN202010467212A CN111625167B CN 111625167 B CN111625167 B CN 111625167B CN 202010467212 A CN202010467212 A CN 202010467212A CN 111625167 B CN111625167 B CN 111625167B
Authority
CN
China
Prior art keywords
page
tab
current
distance
rolling
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN202010467212.6A
Other languages
English (en)
Other versions
CN111625167A (zh
Inventor
吴宇翔
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Shanghai Bilibili Technology Co Ltd
Original Assignee
Shanghai Bilibili Technology Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Shanghai Bilibili Technology Co Ltd filed Critical Shanghai Bilibili Technology Co Ltd
Priority to CN202010467212.6A priority Critical patent/CN111625167B/zh
Publication of CN111625167A publication Critical patent/CN111625167A/zh
Application granted granted Critical
Publication of CN111625167B publication Critical patent/CN111625167B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
    • G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
    • G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
    • G06F3/0487—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser
    • G06F3/0488—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures
    • G06F3/04883—Interaction techniques based on graphical user interfaces [GUI] using specific features provided by the input device, e.g. functions controlled by the rotation of a mouse with dual sensing arrangements, or of the nature of the input device, e.g. tap gestures based on pressure sensed by a digitiser using a touch-screen or digitiser, e.g. input of commands through traced gestures for inputting data by handwriting, e.g. gesture or text

Abstract

本发明公开了一种页面切换方法、装置、计算机设备及可读存储介质，属于互联网技术领域。本发明的页面切换方法包括：在接收到用户基于当前标签页面的滑动操作时，根据所述滑动操作确定所述当前标签页面在滚动容器中的滚动距离与滚动方向；根据所述滚动距离与所述滚动方向控制所述当前标签页面在所述滚动容器中进行滚动，并控制所有标签页面中除所述当前标签页面之外的其他标签页面执行与所述当前标签页面滚动方向相同的平移操作，其中，平移的距离与所述当前标签页面的滚动距离相同。本发明可以在进行标签页面的来回切换时，可以回到用户上一次浏览的页面位置。

Description

页面切换方法、装置、计算机设备
技术领域
本发明涉及互联网技术领域，尤其涉及一种页面切换方法、装置、计算机设备。
背景技术
随着移动芯片的高速发展和网络基础设施的不断完善，手持移动设备的性能得到了很大的提升，这也使得更多的技术可以运用到移动应用的开发中来。Web技术是几年来最火热的技术之一，其具有开发成本低，易维护，上线部署方便等优势，与Native配合的hybrid开发模式当下也十分流行，可以做到一次开发，多端部署(Android，IOS，web浏览器)，对于互联网产品的快速迭代具有明显的促进作用。
Web技术在实现复杂页面交互过程时，可以采用标签页组件的方式来实现。然而，在采用标签页组件来显示页面时，当在进行标签页面的切换后，不能记忆切换标签之前的页面的滚动位置，导致在用户将页面切换回之前的标签页面时，无法回到用户上一次浏览的页面位置。
发明内容
有鉴于此，现提供一种页面切换方法、装置、计算机设备及计算机可读存储介质，以解决在进行标签页面的来回切换时，不能回到用户上一次浏览的页面位置的问题。
本发明提供了一种页面切换方法，包括：
在接收到用户基于当前标签页面的滑动操作时，根据所述滑动操作确定所述当前标签页面在滚动容器中的滚动距离与滚动方向；
根据所述滚动距离与所述滚动方向控制所述当前标签页面在所述滚动容器中进行滚动，并控制所有标签页面中除所述当前标签页面之外的其他标签页面执行与所述当前标签页面滚动方向相同的平移操作，其中，平移的距离与所述当前标签页面的滚动距离相同。
可选地，所述页面切换方法还包括：
在接收到将所述当前标签页面切换至目标标签页面的页面切换指令时，获取所述当前标签页面在所述滚动容器中滚动的第一距离，各个所述其他标签页面与所述当前标签页面的第二距离；
根据所述第一距离、所述当前标签页面与目标标签页面的第二距离计算出所述目标标签页面在所述滚动容器中滚动的第三距离；
根据所述第三距离在所述滚动容器中显示所述目标标签页面。
可选地，所述页面切换方法还包括：
分别计算所有标签页面中除所述目标标签页面之外的标签页面与所述目标标签页面的第四距离，并将所述第四距离作为各个标签页面的平移值。
可选地，所述页面切换方法还包括：
在将所述当前标签页面切换至目标标签页面时，将所述滚动容器的高度设置为所述目标标签页面的高度。
可选地，所述页面切换方法还包括：
在检测到所述当前标签页面的滚动达到预设阈值时，采用预设的部局方式将所述当前标签页面的标签栏吸附在预设位置，以实现所述标签栏的标签吸顶。
可选地，所述页面切换方法还包括：
在接收到取消所述标签栏的标签吸顶指令时，将所有标签页面恢复至初始状态。
可选地，所述控制所有标签页面中除所述当前标签页面之外的标签页面执行与所述当前标签页面滚动方向相同的平移操作包括：
将所述滚动距离作为所有标签页面中除所述当前标签页面之外的标签页面的平移值。
本发明还提供了一种页面切换装置，包括：
确定模块，用于在接收到用户基于当前标签页面的滑动操作时，根据所述滑动操作确定所述当前标签页面在滚动容器中的滚动距离与滚动方向；
控制模块，用于根据所述滚动距离与所述滚动方向控制所述当前标签页面在所述滚动容器中进行滚动，并控制所有标签页面中除所述当前标签页面之外的其他标签页面执行与所述当前标签页面滚动方向相同的平移操作，其中，平移的距离与所述当前标签页面的滚动距离相同。
本发明还提供了一种计算机设备，所述计算机设备，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现上述方法的步骤。
本发明还提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现上述方法的步骤。
上述技术方案的有益效果：
本发明实施例中的页面切换方法，在进行当前标签页面的滚动浏览时，对于所有标签页面中除当前标签页面的标签页面执行与该当前标签页面滚动方向相同的平移操作，从而保证当前标签页面与其他标签页面的相对位置保持不变，使得其他标签页从视觉上呈现出“未滚动”的状态，这样，在实现页面的切换之后，即可以回到用户上一次浏览的页面位置。
附图说明
图1为本发明所述页面切换方法的系统框架图的一种实施例的框架图；
图2为本发明所述的页面切换方法的一种实施例的流程图；
图3为本发明所述的页面切换方法的另一种实施例的流程图；
图4为本发明在进行页面切换前的各个标签页面的位置关系示意图；
图5为本发明在进行页面切换后的各个标签页面的位置关系示意图；
图6a、6b为本发明一实施方式中的页面显示示意图；
图7为本发明所述的页面切换装置的一种实施例的模块图；
图8为本发明实施例提供的执行页面切换方法的计算机设备的硬件结构示意图。
具体实施方式
以下结合附图与具体实施例进一步阐述本发明的优点。
这里将详细地对示例性实施例进行说明，其示例表示在附图中。下面的描述涉及附图时，除非另有表示，不同附图中的相同数字表示相同或相似的要素。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反，它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。
在本公开使用的术语是仅仅出于描述特定实施例的目的，而非旨在限制本公开。在本公开和所附权利要求书中所使用的单数形式的“一种”、“所述”和“该”也旨在包括多数形式，除非上下文清楚地表示其他含义。还应当理解，本文中使用的术语“和/或”是指并包含一个或多个相关联的列出项目的任何或所有可能组合。
应当理解，尽管在本公开可能采用术语第一、第二、第三等来描述各种信息，但这些信息不应限于这些术语。这些术语仅用来将同一类型的信息彼此区分开。例如，在不脱离本公开范围的情况下，第一信息也可以被称为第二信息，类似地，第二信息也可以被称为第一信息。取决于语境，如在此所使用的词语“如果”可以被解释成为“在……时”或“当……时”或“响应于确定”。
在本发明的描述中，需要理解的是，步骤前的数字标号并不标识执行步骤的前后顺序，仅用于方便描述本发明及区别每一步骤，因此不能理解为对本发明的限制。
图1示意性示出了根据本申请实施例的页面切换方法的应用环境示意图。在示例性的实施例中，用户可以藉由计算机设备2上安装的客户端APP或者网页客户端通过网络6向服务器4获取页面数据，计算机设备2根据获取到的页面数据进行页面显示。所述计算机设备2可以是手机、平板个人计算机(tablet personal computer)、膝上型计算机(laptopcomputer)等具有数据发送功能的电子设备。所述网络6可以是因特网，所述服务器4可以是机架式服务器、刀片式服务器、塔式服务器或机柜式服务器(包括独立的服务器，或者多个服务器所组成的服务器集群)等。
本发明为解决在进行标签页面的来回切换时，不能回到用户上一次浏览的页面位置的的问题，提出了一种页面切换方法。参阅图2，其为本发明一实施例的页面切换方法的流程示意图。可以理解，本方法实施例中的流程图不用于对执行步骤的顺序进行限定。下面以该方法应用于手机为例进行示例性描述，本实施例中所提供的页面切换方法包括：
步骤S20、在接收到用户基于当前标签页面的滑动操作时，根据所述滑动操作确定所述当前标签页面在滚动容器中的滚动距离与滚动方向。
具体地，本实施例中的当前标签页面是通过标签页组件进行展示的，其中标签页组件是一种利用标签切换容器页面的组件，其主要包含标签栏和展示页面两个部分，通过标签与展示页面产生关联，可以在有限的物理空间内展示更多的信息。在本实施例中，为了实现展示页面可以在标签页组件中进行滚动展示，该标签页组件优选采用滚动容器来容纳当前标签页面。
在一示例中，该标签页组件包括标签1、标签2、标签3，以及与标签1关联的标签页面A、与标签2关联的标签页面B、标签3关联的标签页面C。假设正在展示的当前标签页面为标签页面A，对于该标签页面A，用户可以进行滑动操作以实现对当前标签页面内容的滚动展示，其中，该滑动操作可以为用于将当前标签页面内容进行向下滚动的手势上滑操作，也可以为将当前标签页面内容进行向上滚动的手势下滑操作。在接收到用户触发的滑动操作之后，对该滑动操作进行分析，以确定当前标签页面在滚动容器中的滚动距离以及滚动方向，其中，该滚动距离用于确定当前标签页面有哪些内容需要显示，哪些内容需要进行隐藏。该滚动方向用于确定对当前标签页面是进行向下滚动，还是进行向上滚动。
在本实施例中，对滑动操作进行分析以得到滚动距离与滚动方向的方法为现有技术，在本实施例中不再赘述。
步骤S21、根据所述滚动距离与所述滚动方向控制所述当前标签页面在所述滚动容器中进行滚动，并控制所有标签页面中除所述当前标签页面之外的其他标签页面执行与所述当前标签页面滚动方向相同的平移操作，其中，平移的距离与所述当前标签页面的滚动距离相同。
具体地，在得到滚动距离与滚动方向时，即可以控制当前标签页面在所述滚动容器中进行滚动，以使得当前标签页面的相应内容在该滚动容器中进行显示。
在本实施例中，为了使得在对当前标签页面在进行页面切换之后，其他标签页面展示的内容依然保留在用户上一次浏览的页面位置，在完成对当前标签页面的滚动操作之后，需要控制所有标签页面中除该当前标签页面之外的其他标签页面执行与该当前标签页面滚动方向相同的平移操作，即若当前标签页面为向下滚动，则需要对其他标签页面进行向下的平移操作；若当前标签页面为向上滚动，则需要对其他标签页面进行向上的平移操作，其中，为了可以保持当前标签页面的当前可视区域与其他标签页面的相对位置保持不变，其他标签页面进行平移操作的距离与当前标签页面进行滚动的滚动距离相同。
本发明实施例中的页面切换方法，在进行当前标签页面的滚动浏览时，对于所有标签页面中除当前标签页面的标签页面执行与该当前标签页面滚动方向相同的平移操作，从而保证当前标签页面与其他标签页面的相对位置保持不变，使得其他标签页从视觉上呈现出“未滚动”的状态，这样，在实现页面的切换之后，即可以回到用户上一次浏览的页面位置。
在一实施方式中，为了控制其他标签页面执行与该当前标签页面滚动方向相同的平移操作，可以将所述滚动距离作为所有标签页面中除所述当前标签页面之外的标签页面的平移值，具体的，可以通过设置其他标签页面的CSS3中的transform属性中的translate值为所述滚动距离的方式来实现对其他标签页面的平移操作。
本实施例中，通过将所述滚动距离作为所有标签页面中除所述当前标签页面之外的标签页面的平移值的方式，可以使得本发明实施例可以兼容于各种平台。
进一步地，参照图3，基于上述实施例提出本发明页面切换方法的另一实施例，在本实施例中，所述页面切换方法包括：
步骤S30，在接收到用户基于当前标签页面的滑动操作时，根据所述滑动操作确定所述当前标签页面在滚动容器中的滚动距离与滚动方向。
步骤S31，根据所述滚动距离与所述滚动方向控制所述当前标签页面在所述滚动容器中进行滚动，并控制所有标签页面中除所述当前标签页面之外的其他标签页面执行与所述当前标签页面滚动方向相同的平移操作，其中，平移的距离与所述当前标签页面的滚动距离相同。
具体地，上述步骤S30-S31与上述实施例中的步骤S20-S21相同，在本实施例中不再赘述。
步骤S32，在接收到将所述当前标签页面切换至目标标签页面的页面切换指令时，获取所述当前标签页面在所述滚动容器中滚动的第一距离，各个所述其他标签页面与所述当前标签页面的第二距离。
步骤S33，根据所述第一距离、所述当前标签页面与目标标签页面的第二距离计算出所述目标标签页面在所述滚动容器中滚动的第三距离。
步骤S34，根据所述第三距离在所述滚动容器中显示所述目标标签页面。
具体地，当用户需要将当前标签页面切换至目标标签页面时，用户可以通过点击当前标签页面中的标签的方式来触发页面切换指令，以将当前标签页面切换至目标标签页面，或者可以通过手指左右滑动屏幕的方式来触发页面切换指令，以将当前标签页面切换至目标标签页面。在接收到用户触发的页面切换指令后，为了保证所有的标签页面共用一个滚动容器，需要获取在实现页面切换之前时的当前标签页面在所述滚动容器中滚动的第一距离d，即需要获取当前标签页面的当前可视区域与所述滚动容器顶部的距离d，以及获取各个其他标签页面与所述当前标签页面的第二距离。示例性的，参照图4，假设总共具有3个标签页面，分别为页面1(目标标签页面)、页面2(所述当前标签页面)以及页面3，则在获取到当前标签页面(页面2)在所述滚动容器中滚动的第一距离d时，还需要获取页面2与页面1的第二距离d12和页面3与页面2的第二距离d32。在一实施方式中，还可以获取页面2顶部与滚动容器顶部的距离dt。
在得到当前标签页面(页面2)在所述滚动容器中滚动的第一距离d，以及获取页面2(当前标签页面)与页面1(目标标签页面)的第二距离d12之后，由于所有的标签页面共用一个滚动容器，因此，在标签页面进行切换前后，需要保证页面1与滚动容器顶部的距离保持固定不变，即保持dt不变，此时，根据当前标签页面(页面2)在所述滚动容器中滚动的第一距离d与页面2(当前标签页面)与页面1(目标标签页面)的第二距离d12可以计算出切换后的目标标签页面(页面1)在所述滚动容器中的滚动的第三距离d3，即计算出目标标签页面的当前可视区域的顶部与滚动容器顶部的距离d3＝d-d12。
在得到第三距离d3后，即根据该第三距离来在滚动容器中展示目标标签页面，从而可以使得在标签页面切换前后都可以使用同一个滚动容器来实现标签页面滚动显示。
本发明实施例中，通过在标签页面进行切换时，仍然使用同一个滚动容器来显示切换后的目标标签页面，而不是通过多个滚动容器的方式来显示切换前后的标签页面，从而可以避免出现手势断层的问题，其中，手势断层指的是在支持手势操作的设备上执行一个连贯的物理手势，而设备在解析该连续手势过程中会出现行为不一致性现象的行为。
进一步地，在一实施方式中，为了保证在完全标签页面的切换之后，其他标签页面与切换后的目标标签页面的相对位置保持不变，需要分别计算所有标签页面中除所述目标标签页面之外的标签页面与所述目标标签页面的第四距离，并将所述第四距离作为各个标签页面的平移值。示例性的，参照图5，需要分别计算页面2相对于页面1(目标标签页面)的第三距离d3＝-d12(由于页面2在页面1的上方，故该第三距离为负值)，页面3相对于页面1的第三距离＝d32–d12。在得到所有标签页面中除所述目标标签页面之外的标签页面与所述目标标签页面的第四距离之后，将该第四距离作为各个标签页面的平移值，即可以将各个标签页面的CSS3中的transform属性中的translate值设置为所述第四距离。
进一步地，在一实施方式中，所述页面切换方法还包括以下步骤：
在将所述当前标签页面切换至目标标签页面时，将所述滚动容器的高度设置为所述目标标签页面的高度。
具体地，由于所有的标签页面共用一个滚动容器，因此，在使用滚动容器容纳各个标签页面时，滚动容器会被最高的标签页面撑开，此时若使用该撑开的滚动容器来容纳高度较矮的标签页面，在对该较矮的标签页面进行滚动显示时，将会出现大量的空白区域(如图6a、6b所示)，导致用户体验较差。因此，为了解决上述为题，本发明实施例在将当前标签页面切换至目标标签页面时，可以将所述滚动容器的高度设置为所述目标标签页面的高度。当然，也可以将滚动容器的高度设置为稍微大于所述目标标签页面的高度。这样，在标签页面的切换过程中，即可以让该滚动容器自适应撑开与缩小。
进一步地，在一实施方式中，所述页面切换方法，还包括以下步骤：
在检测到所述当前标签页面的滚动达到预设阈值时，采用预设的部局方式将所述当前标签页面的标签栏吸附在预设位置，以实现所述标签栏的标签吸顶。
具体地，所述预设阈值可以根据实际情况进行为设定，比如该预设阈值为10px(像素)，则在检测到所述当前标签页面的滚动距离大于或者等于10px时，则将采用预设的部局方式将所述当前标签页面的标签栏吸附在预设位置，以实现所述标签栏的标签吸顶。比如，将当前标签页面的标签栏吸附在页面的顶部或者底部等。
其中，在实现标签栏的标签吸顶之后，在对当前标签页面的内容进行滚动操作时，该标签栏将始终位于页面的预设位置，不会发生改变。
在本实施例中，可以通过对当前标签页面的标签栏使用fix布局脱离标准文档流的方式来实现标签栏的标签吸顶。
进一步地，在一实施方式中，所述页面切换方法，还包括以下步骤：
在接收到取消所述标签栏的标签吸顶指令时，将所有标签页面恢复至初始状态。
具体地，当用户不要使用标签吸顶功能时，用户可以触发一个取消标签吸顶功能的指令，以便在接收到指令后，可以取消标签吸顶，并将所有的标签页面恢复至初始状态，其中，所述初始状态指的是将所有标签页面的内容恢复至没有进行滚动时所显示的画面。
需要说明的是，该取消标签吸顶的指令可以通过用户下拉当前标签页面的方式来触发，也可以通过用户点击预设按键的方式来触发，在本实施例中不作限定。
本发明实施例中，通过提供标签吸顶功能，可以方便对标签页面进行切换。
参阅图7所示，是本发明页面切换装置700一实施例的程序模块图。
本实施例中，所述页面切换装置700包括一系列的存储于存储器上的计算机程序指令，当该计算机程序指令被处理器执行时，可以实现本发明各实施例的页面切换方法功能。在一些实施例中，基于该计算机程序指令各部分所实现的特定的操作，页面切换装置700可以被划分为一个或多个模块。例如，在图7中，所述页面切换装置700可以被分割成确定模块701、控制模块702。其中：
确定模块701，用于在接收到用户基于当前标签页面的滑动操作时，根据所述滑动操作确定所述当前标签页面在滚动容器中的滚动距离与滚动方向。
具体地，本实施例中的当前标签页面是通过标签页组件进行展示的，其中标签页组件是一种利用标签切换容器页面的组件，其主要包含标签栏和展示页面两个部分，通过标签与展示页面产生关联，可以在有限的物理空间内展示更多的信息。在本实施例中，为了实现展示页面可以在标签页组件中进行滚动展示，该标签页组件优选采用滚动容器来容纳当前标签页面。
在一示例中，该标签页组件包括标签1、标签2、标签3，以及与标签1关联的标签页面A、与标签2关联的标签页面B、标签3关联的标签页面C。假设正在展示的当前标签页面为标签页面A，对于该标签页面A，用户可以进行滑动操作以实现对当前标签页面内容的滚动展示，其中，该滑动操作可以为用于将当前标签页面内容进行向下滚动的手势上滑操作，也可以为将当前标签页面内容进行向上滚动的手势下滑操作。在接收到用户触发的滑动操作之后，对该滑动操作进行分析，以确定当前标签页面在滚动容器中的滚动距离以及滚动方向，其中，该滚动距离用于确定当前标签页面有哪些内容需要显示，哪些内容需要进行隐藏。该滚动方向用于确定对当前标签页面是进行向下滚动，还是进行向上滚动。
在本实施例中，对滑动操作进行分析以得到滚动距离与滚动方向的方法为现有技术，在本实施例中不再赘述。
控制模块702，用于根据所述滚动距离与所述滚动方向控制所述当前标签页面在所述滚动容器中进行滚动，并控制所有标签页面中除所述当前标签页面之外的其他标签页面执行与所述当前标签页面滚动方向相同的平移操作，其中，平移的距离与所述当前标签页面的滚动距离相同。
具体地，在得到滚动距离与滚动方向时，即可以控制当前标签页面在所述滚动容器中进行滚动，以使得当前标签页面的相应内容在该滚动容器中进行显示。
在本实施例中，为了使得在对当前标签页面在进行页面切换之后，其他标签页面展示的内容依然保留在用户上一次浏览的页面位置，在完成对当前标签页面的滚动操作之后，需要控制所有标签页面中除该当前标签页面之外的其他标签页面执行与该当前标签页面滚动方向相同的平移操作，即若当前标签页面为向下滚动，则需要对其他标签页面进行向下的平移操作；若当前标签页面为向上滚动，则需要对其他标签页面进行向上的平移操作，其中，为了可以保持当前标签页面的当前可视区域与其他标签页面的相对位置保持不变，其他标签页面进行平移操作的距离与当前标签页面进行滚动的滚动距离相同。
本发明实施例中的页面切换方法，在进行当前标签页面的滚动浏览时，对于所有标签页面中除当前标签页面的标签页面执行与该当前标签页面滚动方向相同的平移操作，从而保证当前标签页面与其他标签页面的相对位置保持不变，使得其他标签页从视觉上呈现出“未滚动”的状态，这样，在实现页面的切换之后，即可以回到用户上一次浏览的页面位置。
在一实施方式中，为了控制其他标签页面执行与该当前标签页面滚动方向相同的平移操作，可以将所述滚动距离作为所有标签页面中除所述当前标签页面之外的标签页面的平移值，具体的，可以通过设置其他标签页面的CSS3中的transform属性中的translate值为所述滚动距离的方式来实现对其他标签页面的平移操作。
本实施例中，通过将所述滚动距离作为所有标签页面中除所述当前标签页面之外的标签页面的平移值的方式，可以使得本发明实施例可以兼容于各种平台。
进一步地，在一实施方式中，该页面切换装置700还包括：获取模块、计算模块、显示模块。
所述获取模块，用于在接收到将所述当前标签页面切换至目标标签页面的页面切换指令时，获取所述当前标签页面在所述滚动容器中滚动的第一距离，各个所述其他标签页面与所述当前标签页面的第二距离。
所述计算模块，用于根据所述第一距离、所述当前标签页面与目标标签页面的第二距离计算出所述目标标签页面在所述滚动容器中滚动的第三距离。
所述显示模块，用于根据所述第三距离在所述滚动容器中显示所述目标标签页面。
具体地，当用户需要将当前标签页面切换至目标标签页面时，用户可以通过点击当前标签页面中的标签的方式来触发页面切换指令，以将当前标签页面切换至目标标签页面，或者可以通过手指左右滑动屏幕的方式来触发页面切换指令，以将当前标签页面切换至目标标签页面。在接收到用户触发的页面切换指令后，为了保证所有的标签页面共用一个滚动容器，需要获取在实现页面切换之前时的当前标签页面在所述滚动容器中滚动的第一距离d，即需要获取当前标签页面的当前可视区域与所述滚动容器顶部的距离d，以及获取各个其他标签页面与所述当前标签页面的第二距离。示例性的，参照图4，假设总共具有3个标签页面，分别为页面1(目标标签页面)、页面2(所述当前标签页面)以及页面3，则在获取到当前标签页面(页面2)在所述滚动容器中滚动的第一距离d时，还需要获取页面2与页面1的第二距离d12和页面3与页面2的第二距离d32。在一实施方式中，还可以获取页面2顶部与滚动容器顶部的距离dt。
在得到当前标签页面(页面2)在所述滚动容器中滚动的第一距离d，以及获取页面2(当前标签页面)与页面1(目标标签页面)的第二距离d12之后，由于所有的标签页面共用一个滚动容器，因此，在标签页面进行切换前后，需要保证页面1与滚动容器顶部的距离保持固定不变，即保持dt不变，此时，根据当前标签页面(页面2)在所述滚动容器中滚动的第一距离d与页面2(当前标签页面)与页面1(目标标签页面)的第二距离d12可以计算出切换后的目标标签页面(页面1)在所述滚动容器中的滚动的第三距离d3，即计算出目标标签页面的当前可视区域的顶部与滚动容器顶部的距离d3＝d-d12。
在得到第三距离d3后，即根据该第三距离来在滚动容器中展示目标标签页面，从而可以使得在标签页面切换前后都可以使用同一个滚动容器来实现标签页面滚动显示。
本发明实施例中，通过在标签页面进行切换时，仍然使用同一个滚动容器来显示切换后的目标标签页面，而不是通过多个滚动容器的方式来显示切换前后的标签页面，从而可以避免出现手势断层的问题，其中，手势断层指的是在支持手势操作的设备上执行一个连贯的物理手势，而设备在解析该连续手势过程中会出现行为不一致性现象的行为。
进一步地，在一实施方式中，为了保证在完全标签页面的切换之后，其他标签页面与切换后的目标标签页面的相对位置保持不变，需要分别计算所有标签页面中除所述目标标签页面之外的标签页面与所述目标标签页面的第四距离，并将所述第四距离作为各个标签页面的平移值。示例性的，参照图5，需要分别计算页面2相对于页面1(目标标签页面)的第三距离d3＝-d12(由于页面2在页面1的上方，故该第三距离为负值)，页面3相对于页面1的第三距离＝d32–d12。在得到所有标签页面中除所述目标标签页面之外的标签页面与所述目标标签页面的第四距离之后，将该第四距离作为各个标签页面的平移值，即可以将各个标签页面的CSS3中的transform属性中的translate值设置为所述第四距离。
进一步地，在一实施方式中，所述页面切换装置700还包括：设置模块。
所述设置模块，用于在将所述当前标签页面切换至目标标签页面时，将所述滚动容器的高度设置为所述目标标签页面的高度。
具体地，由于所有的标签页面共用一个滚动容器，因此，在使用滚动容器容纳各个标签页面时，滚动容器会被最高的标签页面撑开，此时若使用该撑开的滚动容器来容纳高度较矮的标签页面，在对该较矮的标签页面进行滚动显示时，将会出现大量的空白区域(如图6a、6b所示)，导致用户体验较差。因此，为了解决上述为题，本发明实施例在将当前标签页面切换至目标标签页面时，可以将所述滚动容器的高度设置为所述目标标签页面的高度。当然，也可以将滚动容器的高度设置为稍微大于所述目标标签页面的高度。这样，在标签页面的切换过程中，即可以让该滚动容器自适应撑开与缩小。
进一步地，在一实施方式中，所述页面切换装置700还包括吸附模块。
所述吸附模块，用于在检测到所述当前标签页面的滚动达到预设阈值时，采用预设的部局方式将所述当前标签页面的标签栏吸附在预设位置，以实现所述标签栏的标签吸顶。
具体地，所述预设阈值可以根据实际情况进行为设定，比如该预设阈值为10px，则在检测到所述当前标签页面的滚动距离大于或者等于10px时，则将采用预设的部局方式将所述当前标签页面的标签栏吸附在预设位置，以实现所述标签栏的标签吸顶。比如，将当前标签页面的标签栏吸附在页面的顶部或者底部等。
其中，在实现标签栏的标签吸顶之后，在对当前标签页面的内容进行滚动操作时，该标签栏将始终位于页面的预设位置，不会发生改变。
在本实施例中，可以通过对当前标签页面的标签栏使用fix布局脱离标准文档流的方式来实现标签栏的标签吸顶。
进一步地，在一实施方式中，所述页面切换装置还包括恢复模块。
所述恢复模块，用于在接收到取消所述标签栏的标签吸顶指令时，将所有标签页面恢复至初始状态。
具体地，当用户不要使用标签吸顶功能时，用户可以触发一个取消标签吸顶功能的指令，以便在接收到指令后，可以取消标签吸顶，并将所有的标签页面恢复至初始状态，其中，所述初始状态指的是将所有标签页面的内容恢复至没有进行滚动时所显示的画面。
需要说明的是，该取消标签吸顶的指令可以通过用户下拉当前标签页面的方式来触发，也可以通过用户点击预设按键的方式来触发，在本实施例中不作限定。
本发明实施例中，通过提供标签吸顶功能，可以方便对标签页面进行切换。
图8示意性示出了根据本申请实施例的适于实现页面切换方法的计算机设备2的硬件架构示意图。本实施例中，计算机设备2是一种能够按照事先设定或者存储的指令，自动进行数值计算和/或信息处理的设备。例如，可以是平板电脑、笔记本电脑、台式计算机、手机等。如图8所示，计算机设备2至少包括但不限于：可通过系统总线相互通信链接存储器801、处理器802、网络接口803。其中：
存储器801至少包括一种类型的计算机可读存储介质，可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，存储器801可以是计算机设备2的内部存储模块，例如该计算机设备2的硬盘或内存。在另一些实施例中，存储器801也可以是计算机设备2的外部存储设备，例如该计算机设备2上配备的插接式硬盘，智能存储卡(SmartMedia Card，简称为SMC)，安全数字(Secure Digital，简称为SD)卡，闪存卡(Flash Card)等。当然，存储器801还可以既包括计算机设备2的内部存储模块也包括其外部存储设备。本实施例中，存储器801通常用于存储安装于计算机设备2的操作系统和各类应用软件，例如上述实施例中的页面切换方法的程序代码等。此外，存储器801还可以用于暂时地存储已经输出或者将要输出的各类数据。
处理器802在一些实施例中可以是中央处理器(Central Processing Unit，简称为CPU)、控制器、微控制器、微处理器、或其他数据处理芯片。该处理器802通常用于控制计算机设备2的总体操作，例如执行与计算机设备2进行数据交互或者通信相关的控制和处理等。本实施例中，处理器802用于运行存储器801中存储的程序代码或者处理数据。
网络接口803可包括无线网络接口或有线网络接口，该网络接口803通常用于在计算机设备2与其他计算机设备之间建立通信链接。例如，网络接口803用于通过网络将计算机设备2与外部终端相连，在计算机设备2与外部终端之间的建立数据传输通道和通信链接等。网络可以是企业内部网(Intranet)、互联网(Internet)、全球移动通讯系统(GlobalSystem of Mobile communication，简称为GSM)、宽带码分多址(Wideband Code DivisionMultiple Access，简称为WCDMA)、4G网络、5G网络、蓝牙(Bluetooth)、Wi-Fi等无线或有线网络。
需要指出的是，图8仅示出了具有部件801～803的计算机设备，但是应理解的是，并不要求实施所有示出的部件，可以替代的实施更多或者更少的部件。
在本实施例中，存储于存储器801中的页面切换方法还可以被分割为一个或者多个程序模块，并由一个或多个处理器(本实施例为处理器802)所执行，以完成本发明。
本申请实施例提供了一种非易失性计算机可读存储介质，计算机可读存储介质其上存储有计算机程序，计算机程序被处理器执行时实现上述实施例中的页面切换方法的步骤。
本实施例中，计算机可读存储介质包括闪存、硬盘、多媒体卡、卡型存储器(例如，SD或DX存储器等)、随机访问存储器(RAM)、静态随机访问存储器(SRAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、可编程只读存储器(PROM)、磁性存储器、磁盘、光盘等。在一些实施例中，计算机可读存储介质可以是计算机设备的内部存储单元，例如该计算机设备的硬盘或内存。在另一些实施例中，计算机可读存储介质也可以是计算机设备的外部存储设备，例如该计算机设备上配备的插接式硬盘，智能存储卡(Smart Media Card，简称为SMC)，安全数字(Secure Digital，简称为SD)卡，闪存卡(Flash Card)等。当然，计算机可读存储介质还可以既包括计算机设备的内部存储单元也包括其外部存储设备。本实施例中，计算机可读存储介质通常用于存储安装于计算机设备的操作系统和各类应用软件，例如上述实施例中的页面切换方法的程序代码等。此外，计算机可读存储介质还可以用于暂时地存储已经输出或者将要输出的各类数据。
以上所描述的装置实施例仅仅是示意性的，其中作为分离部件说明的单元可以是或者也可以不是物理上分开的，作为单元显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到至少两个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本申请实施例方案的目的。本领域普通技术人员在不付出创造性的劳动的情况下，即可以理解并实施。
通过以上的实施方式的描述，本领域普通技术人员可以清楚地了解到各实施方式可借助软件加通用硬件平台的方式来实现，当然也可以通过硬件。本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程是可以通过计算机程序来指令相关的硬件来完成，所述的程序可存储于一计算机可获取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，所述的存储介质可为磁碟、光盘、只读存储记忆体(Read-OnlyMemory，ROM)或随机存储记忆体(RandomAccessMemory，RAM)等。
最后应说明的是：以上各实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述各实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的范围。

Claims (8)

1.一种页面切换方法，其特征在于，包括：
在接收到用户基于当前标签页面的滑动操作时，根据所述滑动操作确定所述当前标签页面在滚动容器中的滚动距离与滚动方向；
根据所述滚动距离与所述滚动方向控制所述当前标签页面在所述滚动容器中进行滚动，并控制所有标签页面中除所述当前标签页面之外的其他标签页面执行与所述当前标签页面滚动方向相同的平移操作，其中，平移的距离与所述当前标签页面的滚动距离相同，所有的标签页面共用所述滚动容器；
其中，所述页面切换方法还包括：
在接收到将所述当前标签页面切换至目标标签页面的页面切换指令时，获取所述当前标签页面在所述滚动容器中滚动的第一距离，各个所述其他标签页面与所述当前标签页面的第二距离，其中，所述第一距离为所述当前标签页面的当前可视区域与所述滚动容器顶部的距离；
根据所述第一距离、所述当前标签页面与目标标签页面的第二距离计算出所述目标标签页面在所述滚动容器中滚动的第三距离，其中，所述第三距离为所述目标标签页面的当前可视区域的顶部与滚动容器顶部的距离；
根据所述第三距离在所述滚动容器中显示所述目标标签页面。
2.根据权利要求1所述的页面切换方法，其特征在于，所述页面切换方法还包括：
分别计算所有标签页面中除所述目标标签页面之外的标签页面与所述目标标签页面的第四距离，并将所述第四距离作为各个标签页面的平移值。
3.根据权利要求1所述的页面切换方法，其特征在于，所述页面切换方法还包括：
在将所述当前标签页面切换至目标标签页面时，将所述滚动容器的高度设置为所述目标标签页面的高度。
4.根据权利要求1所述的页面切换方法，其特征在于，所述页面切换方法还包括：
在检测到所述当前标签页面的滚动距离达到预设阈值时，采用预设的布局方式将所述当前标签页面的标签栏吸附在预设位置，以实现所述标签栏的标签吸顶。
5.根据权利要求4所述的页面切换方法，其特征在于，所述页面切换方法还包括：
在接收到取消所述标签栏的标签吸顶指令时，将所有标签页面恢复至初始状态。
6.一种页面切换装置，其特征在于，包括：
确定模块，用于在接收到用户基于当前标签页面的滑动操作时，根据所述滑动操作确定所述当前标签页面在滚动容器中的滚动距离与滚动方向；
控制模块，用于根据所述滚动距离与所述滚动方向控制所述当前标签页面在所述滚动容器中进行滚动，并控制所有标签页面中除所述当前标签页面之外的其他标签页面执行与所述当前标签页面滚动方向相同的平移操作，其中，平移的距离与所述当前标签页面的滚动距离相同，所有的标签页面共用所述滚动容器；
获取模块，用于在接收到将所述当前标签页面切换至目标标签页面的页面切换指令时，获取所述当前标签页面在所述滚动容器中滚动的第一距离，各个所述其他标签页面与所述当前标签页面的第二距离，其中，所述第一距离为所述当前标签页面的当前可视区域与所述滚动容器顶部的距离；
计算模块，用于根据所述第一距离、所述当前标签页面与目标标签页面的第二距离计算出所述目标标签页面在所述滚动容器中滚动的第三距离，其中，所述第三距离为所述目标标签页面的当前可视区域的顶部与滚动容器顶部的距离；
显示模块，用于根据所述第三距离在所述滚动容器中显示所述目标标签页面。
7.一种计算机设备，所述计算机设备，包括存储器、处理器以及存储在所述存储器上并可在所述处理器上运行的计算机程序，所述处理器执行所述计算机程序时实现权利要求1至5任一项所述的页面切换方法的步骤。
8.一种计算机可读存储介质，其上存储有计算机程序，其特征在于：所述计算机程序被处理器执行时实现权利要求1至5任一项所述的页面切换方法的步骤。
CN202010467212.6A 2020-05-28 2020-05-28 页面切换方法、装置、计算机设备 Active CN111625167B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202010467212.6A CN111625167B (zh) 2020-05-28 2020-05-28 页面切换方法、装置、计算机设备

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202010467212.6A CN111625167B (zh) 2020-05-28 2020-05-28 页面切换方法、装置、计算机设备

Publications (2)

Publication Number Publication Date
CN111625167A CN111625167A (zh) 2020-09-04
CN111625167B true CN111625167B (zh) 2021-08-24

Family

ID=72272145

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202010467212.6A Active CN111625167B (zh) 2020-05-28 2020-05-28 页面切换方法、装置、计算机设备

Country Status (1)

Country Link
CN (1) CN111625167B (zh)

Families Citing this family (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN112861042B (zh) * 2021-01-14 2024-02-06 支付宝(杭州)信息技术有限公司 一种信息显示方法、装置、设备和可读介质
CN113325984B (zh) * 2021-06-30 2022-11-25 中国平安人寿保险股份有限公司 移动端页面布局的适配方法、装置和计算机设备
CN114297536B (zh) * 2021-11-17 2022-12-20 北京城市网邻信息技术有限公司 信息的显示方法、装置、电子设备及可读介质
CN114201100A (zh) * 2021-12-09 2022-03-18 北京字节跳动网络技术有限公司 一种界面交互的方法、装置、计算机设备及存储介质
CN114510189B (zh) * 2022-01-26 2024-05-07 北京百度网讯科技有限公司 一种切换标签的方法、装置、电子设备及存储介质
CN114756778A (zh) * 2022-04-06 2022-07-15 北京字跳网络技术有限公司 用于页面交互的方法、装置、设备和存储介质

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104978385A (zh) * 2015-03-19 2015-10-14 腾讯科技（深圳）有限公司 信息处理方法、浏览器客户端及终端
CN109446459A (zh) * 2018-10-11 2019-03-08 北京三快在线科技有限公司 页面切换方法以及装置、电子设备及存储介质
CN109885781A (zh) * 2019-02-27 2019-06-14 百度在线网络技术（北京）有限公司 混合页面统一浏览方法、装置、设备和存储介质

Family Cites Families (5)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
JP6099927B2 (ja) * 2012-10-10 2017-03-22 キヤノン株式会社 情報制御装置とその制御方法及びプログラム
CN105718265B (zh) * 2016-01-21 2019-10-11 浙江慧脑信息科技有限公司 一种带标签的并列式嵌套型软件设计和编程方法
CN109032457B (zh) * 2017-08-18 2021-01-29 金蝶软件（中国）有限公司 页面显示方法、装置、终端和存储介质
CN109725795A (zh) * 2018-12-27 2019-05-07 北京字节跳动网络技术有限公司 一种用于多视图显示的方法、装置和计算机记录介质
CN109918002A (zh) * 2019-01-15 2019-06-21 平安科技（深圳）有限公司 页面切换控制方法、装置、设备及计算机可读存储介质

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN104978385A (zh) * 2015-03-19 2015-10-14 腾讯科技（深圳）有限公司 信息处理方法、浏览器客户端及终端
CN109446459A (zh) * 2018-10-11 2019-03-08 北京三快在线科技有限公司 页面切换方法以及装置、电子设备及存储介质
CN109885781A (zh) * 2019-02-27 2019-06-14 百度在线网络技术（北京）有限公司 混合页面统一浏览方法、装置、设备和存储介质

Also Published As

Publication number Publication date
CN111625167A (zh) 2020-09-04

Similar Documents

Publication Publication Date Title
CN111625167B (zh) 页面切换方法、装置、计算机设备
US9804898B2 (en) Method and apparatus for processing applications of mobile terminal
CN106649543B (zh) 记录阅读进度的方法、装置及终端
US20110022957A1 (en) Web browsing method and web browsing device
US20120266103A1 (en) Method and apparatus of scrolling a document displayed in a browser window
CN109917991B (zh) 电子书翻页方法、电子设备及计算机存储介质
US10402470B2 (en) Effecting multi-step operations in an application in response to direct manipulation of a selected object
CN107562338B (zh) 图片查看方法、装置、电子设备及存储介质
CN105808110B (zh) 表格显示方法及显示设备
CN111259284A (zh) 页面懒加载的方法和装置、存储介质和处理器
CN112241498B (zh) 页面内容显示方法、装置、可读存储介质和计算机设备
CN108491140B (zh) 互动内容的展示方法及装置
CN113741763A (zh) 电子书的显示方法、装置及电子设备
CN114518820A (zh) 图标整理方法、装置和电子设备
US20140223291A1 (en) System and method for restructuring content on reorientation of a mobile device
US8265396B2 (en) Data entry retrieval
US20140181735A1 (en) Electronic device and method for controlling location of tooltip displayed on display screen
CN112836154B (zh) 页面展示方法、装置以及计算机设备
CN108628528B (zh) 优化阅读应用跨页文本标记的方法、系统和装置
CN114063958A (zh) 页面分屏显示方法及装置
CN112835502A (zh) 一种页面显示方法、电子设备及存储介质
CN110968241B (zh) 电子表格的处理方法、装置、计算机可以读存储介质和计算机设备
CN112947811A (zh) 页面导航的显示方法和装置、电子设备和存储介质
CN110955473B (zh) 显示加载提示信息的方法及装置
CN111679778A (zh) 电子书评论信息的交互展示方法、电子设备及存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant