CN111880712B - 页面显示方法、装置、电子设备及存储介质 - Google Patents
页面显示方法、装置、电子设备及存储介质 Download PDFInfo
- Publication number
- CN111880712B CN111880712B CN202010789369.0A CN202010789369A CN111880712B CN 111880712 B CN111880712 B CN 111880712B CN 202010789369 A CN202010789369 A CN 202010789369A CN 111880712 B CN111880712 B CN 111880712B
- Authority
- CN
- China
- Prior art keywords
- page
- display
- target
- storage location
- display area
- 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
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
- G06F3/0485—Scrolling or panning
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
Abstract
本公开提供了一种页面显示方法、装置、电子设备及存储介质,涉及终端技术领域,方法包括:响应于接收到页面滚动指令,根据页面滚动指令,滚动当前显示的第一显示页面;确定当前进入第一显示页面的第一显示区域的目标页面元素;将目标页面元素的页面数据存储至目标视图容器中;基于目标视图容器在第一显示页面中显示的第二显示区域,将目标页面元素的页面数据渲染至第二显示区域中;将第一显示页面中的其他页面元素的页面数据渲染至第一显示页面的其他区域,得到第二显示页面,能够实现目标页面元素的吸顶显示,无需实时更新页面元素的top值,从而无需实时刷新页面,因此,在不提高电子设备性能的情况下,能够保证吸顶显示的画面流畅。
Description
技术领域
本公开涉及终端技术领域,特别涉及一种页面显示方法、装置、电子设备及存储介质。
背景技术
随着电子设备技术的发展,用户可以通过浏览器浏览各种信息。由于信息种类较多,为了方便用户浏览,电子设备将不同类型的信息显示在不同的类别标签下,通过滚动页面显示不同的类别标签下的信息。为了能让用户更清晰的了解当前浏览的信息所属的类别,常将类别标签固定在显示页面的顶部显示,即采用吸顶显示的方式显示页面。
相关技术中,电子设备通过设置需要吸顶显示的页面元素与显示窗口顶部之间的距离(top值),实现将该页面元素显示在显示窗口的顶端。该过程中需要电子设备实时监测页面的滚动距离,并且监测到滚动距离发生变化时,根据该滚动距离更新页面元素的top值,这样会导致电子设备不断刷新页面,导致在不提高电子设备性能的情况下,容易出现页面卡顿的现象,进而导致页面显示不流畅。
发明内容
本公开实施例提供了一种页面显示方法、装置、电子设备及存储介质,能够在吸顶显示时,保证页面流畅。所述技术方案如下:
根据本公开实施例的一方面,提供了一种页面显示方法,所述方法包括:
响应于接收到页面滚动指令,根据所述页面滚动指令,滚动当前显示的第一显示页面;
确定当前进入所述第一显示页面的第一显示区域的目标页面元素,所述第一显示区域用于确定显示在第二显示区域中的页面元素,所述第二显示区域为所述第一显示页面中固定显示所述目标页面元素的显示区域;
将所述目标页面元素的页面数据存储至目标视图容器中;
基于所述目标视图容器在所述第一显示页面中显示的所述第二显示区域,将所述目标页面元素的页面数据渲染至所述第二显示区域中;
将所述第一显示页面中的其他页面元素的页面数据渲染至所述第一显示页面的其他区域,得到第二显示页面。
在一种可能的实现方式中,所述将所述目标页面元素的页面数据存储至目标视图容器中,包括:
在所述目标视图容器中创建第一存储位置,所述第一存储位置为所述目标视图容器中的最顶部存储位置;
将所述目标页面元素的页面数据从第二存储位置转移到所述第一存储位置,所述第二存储位置为所述目标页面元素的页面数据的原始存储位置。
在另一种可能的实现方式中,所述基于所述目标视图容器在所述第一显示页面中显示的第二显示区域,将所述目标页面元素的页面数据渲染至所述第二显示区域中,包括:
从所述第一显示页面对应的节点树中,获取所述第一存储位置的页面数据;
将所述第一存储位置的页面数据渲染至所述第一显示页面的第二显示区域中。
在另一种可能的实现方式中,所述方法还包括:
响应于所述目标页面元素离开所述第一显示页面的第一显示区域,将所述目标视图容器中所述目标页面元素的页面数据和所述页面数据所在的第一存储位置删除;
将所述目标页面元素的页面数据从所述第一存储位置转移到所述第二存储位置;
将与所述第一存储位置相邻的第三存储位置中的页面数据渲染至所述第一显示页面的第二显示区域;
将所述第一显示页面中的其他页面元素的页面数据渲染至所述第一显示页面的其他区域,得到第三显示界面。
在另一种可能的实现方式中,所述确定当前进入所述第一显示页面的第一显示区域的目标页面元素,包括:
检测所述目标页面元素与所述第一显示区域的边缘的目标距离;
响应于所述目标距离小于预设距离,确定所述目标页面元素进入所述第一显示区域。
在另一种可能的实现方式中,所述将所述第一显示页面中的其他页面元素的页面数据渲染至所述第一显示页面的其他区域,得到第二显示页面之后,所述方法还包括:
响应于接收到界面清空指令,将所述目标视图容器中的至少一个目标页面元素的页面数据删除;或者,
响应于接收到元素排序指令,将所述目标视图容器中的至少一个目标页面的页面数据存储至所述页面数据的原始存储位置。
根据本公开实施例的另一方面,提供了一种页面显示装置,所述装置包括:
页面滚动单元,被配置为响应于接收到页面滚动指令,执行根据所述页面滚动指令,滚动当前显示的第一显示页面;
确定单元,被配置为执行确定当前进入所述第一显示页面的第一显示区域的目标页面元素,所述第一显示区域用于确定显示在第二显示区域中的页面元素,所述第二显示区域为所述第一显示页面中固定显示所述目标页面元素的显示区域;
第一存储单元,被配置为执行将所述目标页面元素的页面数据存储至目标视图容器中;
第一渲染单元,被配置为执行基于所述目标视图容器在所述第一显示页面中显示的所述第二显示区域,将所述目标页面元素的页面数据渲染至所述第二显示区域中;
第二渲染单元,被配置为执行将所述第一显示页面中的其他页面元素的页面数据渲染至所述第一显示页面的其他区域,得到第二显示页面。
在一种可能的实现方式中,所述第一存储单元包括:
创建子单元,被配置为执行在所述目标视图容器中创建第一存储位置,所述第一存储位置为所述目标视图容器中的最顶部存储位置;
转移子单元,被配置为执行将所述目标页面元素的页面数据从第二存储位置转移到所述第一存储位置,所述第二存储位置为所述目标页面元素的页面数据的原始存储位置。
在另一种可能的实现方式中,所述第一渲染单元包括:
获取子单元,被配置为执行从所述第一显示页面对应的节点树中,获取所述第一存储位置的页面数据;
渲染子单元,被配置为执行将所述第一存储位置的页面数据渲染至所述第一显示页面的第二显示区域中。
在另一种可能的实现方式中,所述装置还包括:
第一删除单元,被配置为响应于所述目标页面元素离开所述第一显示页面的第一显示区域,执行将所述目标视图容器中所述目标页面元素的页面数据和所述页面数据所在的第一存储位置删除;
转移单元,被匹配值为执行将所述目标页面元素的页面数据从所述第一存储位置转移到所述第二存储位置;
所述第一渲染单元,还被配置为执行将与所述第一存储位置相邻的第三存储位置中的页面数据渲染至所述第一显示页面的第二显示区域;
所述第二渲染单元,还被配置为执行将所述第一显示页面中的其他页面元素的页面数据渲染至所述第一显示页面的其他区域,得到第三显示界面。
在另一种可能的实现方式中,所述确定单元包括:
检测子单元,被配置为执行检测所述目标页面元素与所述第一显示区域的边缘的目标距离;
确定子单元,被配置为响应于所述目标距离小于预设距离,执行确定所述目标页面元素进入所述第一显示区域。
在另一种可能的实现方式中,所述装置还包括:
第二删除单元,被配置为响应于接收到界面清空指令,执行将所述目标视图容器中的至少一个目标页面元素的页面数据删除;或者,
第二存储单元,被配置为响应于接收到元素排序指令,执行将所述目标视图容器中的至少一个目标页面的页面数据存储至所述页面数据的原始存储位置。
根据本公开实施例的另一方面,提供了一种电子设备,所述电子设备包括:一个或多个处理器,
用于存储所述一个或多个处理器可执行指令的易失性或非易失性存储器;
其中,所述一个或多个处理器被配置为执行上述任一可能实现方式所述的页面显示方法。
根据本公开实施例的另一方面,提供了一种计算机可读存储介质,所述计算机可读存储介质上存储有指令,所述指令被电子设备的处理器执行时实现上述任一可能实现方式所述的页面显示方法。
根据本公开实施例的另一方面,提供了一种计算机程序产品,当所述计算机程序产品中的指令由电子设备的处理器执行时,使得电子设备或服务器能够执行上述任一可能实现方式中所述的页面显示方法。
在本公开实施例中,通过设置一个目标视图容器,该目标视图容器中的目标页面元素的页面数据能够显示在第一显示页面的第二显示区域(吸顶显示区域)中,当滚动显示第一显示页面时,直接将需要吸顶显示的目标页面元素的页面数据存储到目标视图容器中,就可以实现目标页面元素的吸顶显示,无需实时更新页面元素的top值,从而无需实时刷新页面,因此,在不提高电子设备性能的情况下,能够保证吸顶显示的画面流畅。
应当理解的是,以上的一般描述和后文的细节描述仅是示例性和解释性的,并不能限制本公开。
附图说明
为了更清楚地说明本公开实施例中的技术方案,下面将对实施例描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本公开的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1是根据一示例性实施例示出的一种吸顶显示的页面的示意图;
图2是根据一示例性实施例示出的一种页面显示方法的流程图;
图3是根据一示例性实施例示出的一种页面显示方法的流程图;
图4是根据一示例性实施例示出的一种吸顶显示的页面的示意图;
图5是根据一示例性实施例示出的一种吸顶显示的页面的示意图;
图6是根据一示例性实施例示出的一种页面显示装置的框图;
图7是根据一示例性实施例示出的一种页面显示装置的框图;
图8是根据一示例性实施例示出的一种电子设备的框图。
具体实施方式
为了使本领域普通人员更好地理解本公开的技术方案,下面将结合附图,对本公开实施例中的技术方案进行清楚、完整地描述。
需要说明的是,本公开的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象,而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换,以便这里描述的本公开的实施例能够以除了在这里图示或描述的那些以外的顺序实施。以下示例性实施例中所描述的实施方式并不代表与本公开相一致的所有实施方式。相反,它们仅是与如所附权利要求书中所详述的、本公开的一些方面相一致的装置和方法的例子。
响应于用户与电子设备进行人机交互。可选的,该人机交互过程为电子设备接收用户输入的操作指令,电子设备根据该操作指令执行相应的操作的过程。可选的,该操作指令为通过电子设备的屏幕输入的操作指令;或者,该操作指令为通过电子设备的按键输入的操作指令;或者,该操作指令为通过语音信号输入的操作指令等,在本公开实施例中,对该操作指令的类型不作具体限定。
在本公开实施例中,该操作指令为页面滚动指令,电子设备在接收到页面滚动指令时,在电子设备的显示界面中,滚动显示当前页面中的内容。其中,该页面内容中包括多个页面元素。可选地,该多个页面元素被分类为多组页面元素,每一组页面元素显示在每一类页面元素对应的标签下。在页面滚动的过程中,将每组页面元素对应的标签显示在显示界面的顶端,将每组页面元素滚动显示在该显示页面中。响应于当前显示的标签下的页面元素全部显示完毕,则将下一个标签显示在界面的顶端,以此类推。
例如,参见图1,可选地,该多个页面元素为多个账单对应的账单内容,将该多个账单内容根据生成时间进行分类,可选地,每一类页面元素对应的标签为月份或年份等。相应的,响应于该标签为月份,则该标签下显示该月份内生成的账单;响应于该标签为年份,则该标签下显示该年份内生成的账单。响应于当前以月份为标签进行分类,可选地,当前显示的月份为5月,则将5月对应的标签显示在显示界面的顶端,在向上滚动页面的过程中,检测5月对应的账单是否一显示完毕,响应于显示完毕,则将页面顶端显示的5月对应的标签修改为6月对应的标签,相应的,在显示界面中滚动显示6月的账单内容。
另外,可选地,电子设备为为手机、平板电脑、可穿戴设备、电脑或其他电子设备中的任一电子设备。在本公开实施例中,对电子设备不作具体限定。
图2是根据一示例性实施例示出的一种页面显示方法的流程图,参见图2,该页面显示方法包括以下步骤:
步骤S201:响应于接收到页面滚动指令,根据该页面滚动指令,滚动当前显示的第一显示页面。
步骤S202:确定当前进入该第一显示页面的第一显示区域的目标页面元素,该第一显示区域用于确定显示在第二显示区域中的页面元素,该第二显示区域为该第一显示页面中固定显示该目标页面元素的显示区域。
步骤S203:将该目标页面元素的页面数据存储至目标视图容器中。
步骤S204:基于该目标视图容器在该第一显示页面中显示的该第二显示区域,将该目标页面元素的页面数据渲染至该第二显示区域中。
步骤S205:将该第一显示页面中的其他页面元素的页面数据渲染至该第一显示页面的其他区域,得到第二显示页面。
在一种可能的实现方式中,该将该目标页面元素的页面数据存储至目标视图容器中,包括:
在该目标视图容器中创建第一存储位置,该第一存储位置为该目标视图容器中的最顶部存储位置;
将该目标页面元素的页面数据从第二存储位置转移到该第一存储位置,该第二存储位置为该目标页面元素的页面数据的原始存储位置。
在另一种可能的实现方式中,该基于该目标视图容器在该第一显示页面中显示的第二显示区域,将该目标页面元素的页面数据渲染至该第二显示区域中,包括:
从该第一显示页面对应的节点树中,获取该第一存储位置的页面数据;
将该第一存储位置的页面数据渲染至该第一显示页面的第二显示区域中。
在另一种可能的实现方式中,该方法还包括:
响应于该目标页面元素离开该第一显示页面的第一显示区域,将该目标视图容器中该目标页面元素的页面数据和该页面数据所在的第一存储位置删除;
将该目标页面元素的页面数据从该第一存储位置转移到该第二存储位置;
将与该第一存储位置相邻的第三存储位置中的页面数据渲染至该第一显示页面的第二显示区域;
将该第一显示页面中的其他页面元素的页面数据渲染至该第一显示页面的其他区域,得到第三显示界面。
在另一种可能的实现方式中,该确定当前进入该第一显示页面的第一显示区域的目标页面元素,包括:
检测该目标页面元素与该第一显示区域的边缘的目标距离;
响应于该目标距离小于预设距离,确定该目标页面元素进入该第一显示区域。
在另一种可能的实现方式中,该将该第一显示页面中的其他页面元素的页面数据渲染至该第一显示页面的其他区域,得到第二显示页面之后,该方法还包括:
响应于接收到界面清空指令,将该目标视图容器中的至少一个目标页面元素的页面数据删除;或者,
响应于接收到元素排序指令,将该目标视图容器中的至少一个目标页面的页面数据存储至该页面数据的原始存储位置。
在本公开实施例中,通过设置一个目标视图容器,该目标视图容器中的目标页面元素的页面数据能够显示在第一显示页面的第二显示区域(吸顶显示区域)中,当滚动显示第一显示页面时,直接将需要吸顶显示的目标页面元素的页面数据存储到目标视图容器中,就可以实现目标页面元素的吸顶显示,无需实时更新页面元素的top值,从而无需实时刷新页面,因此,在不提高电子设备性能的情况下,能够保证吸顶显示的画面流畅。
图3是根据一示例性实施例示出的一种页面显示方法的流程图,参见图3,该页面显示方法包括以下步骤:
步骤301:响应于接收到页面滚动指令,电子设备根据该页面滚动指令,滚动当前显示的第一显示页面。
其中,电子设备具有显示屏幕,该显示屏幕中显示当前显示的第一显示页面。可选地,该第一显示页面可以为任一应用程序的显示页面,该第一显示页面根据接收到的页面滚动指令,在电子设备的显示屏幕中滚动显示。该页面滚动指令用于指示第一显示页面滚动的方向和滚动的距离等。可选地,该页面滚动指令为手势操作触发的指令、语音信号触发的指令或按键操作触发的指令中的任一种。
响应于该页面滚动指令为手势操作触发的指令,在电子设备可以通过显示屏幕接收用户在显示屏幕上输入的手势操作,该手势操作包括用户在显示屏幕上滑动的方向、距离和速度等指标。则电子设备接收该页面滚动指令对应的手势操作,根据该手势操作的操作方向、操作距离和操作速度,确定第一显示页面的滚动方向、滚动距离和滚动速度,根据该滚动方向和滚动距离滚动第一显示页面。
响应于该页面滚动指令为语音信号触发的指令,可选地,该第一显示页面上显示语音输入标识,响应于该语音输入标识被触发,电子设备开始接收用户输入的语音信号;或者,第一电子设备可以唤醒电子设备中的语音助手,通过向语音助手接收用户输入的语音信号。电子设备对接收到的语音信号进行语义分析,得到语音信号对应的语义结果,该语义结果中至少包括页面的滚动方向;电子设备根据语义结果中的滚动方向滚动第一显示页面。其中,第一显示页面的滚动速度根据需要进行设置,在本公开实施例中,对该第一显示页面的滚动速度不做具体限定。并且,可选地,该语义结果中不存在滚动距离,则电子设备根据滚动方向滚动显示第一显示页面,直到接收到停止指令,或者,达到第一显示页面中的底部。可选地,语义结果中存在滚动距离,则电子设备根据该语义结果中的滚动距离和滚动方向滚动显示第一显示页面。
响应于该页面滚动指令为按键操作触发的指令,则电子设备还包括至少一个按键。可选地,电子设备包括一个按键,则根据接收到的不同的连续触发次数,确定第一显示页面的滚动方向。可选地,电子设备包括至少两个按键,则不同的按键对应不同的滚动方向,电子设备可以根据被触发的按键,确定页面的滚动方向。另外,可选地,电子设备中存储按键触发时,页面滚动的预设距离。响应于页面滚动嘎斯预设距离时,自动停止页面滚动。可选地,电子设备还可以设置停止滚动按键,响应于该停止滚动按键被触发,停止页面滚动。
步骤302:电子设备确定当前进入该第一显示页面的第一显示区域的目标页面元素。
其中,该目标页面元素为需要置顶显示的页面元素。该第一显示区域用于确定显示在第二显示区域中的页面元素,该第二显示区域为该第一显示页面中固定显示该目标页面元素的显示区域。可选地,该目标页面元素可以为页面中的DOM(Document ObjectModel,文档对象模型)节点,例如,该目标页面元素为页面元素分组对应的标签或浏览器页面中的导航条等。
可选地,该第一显示区域为第一显示页面中的任一区域,该第一显示区域的位置根据需要进行设置并更改,在本公开实施例中,对该第一显示区域的位置不作具体限定。例如,该第一显示区域为第一显示页面的顶端、底端、左侧、右侧或电子设备等区域中的至少一个。该第一显示区域的大小不小于目标页面元素的显示区域,且,该第一显示区域的大小根据需要进行设置,在本公开实施例中,对该第一显示区域的大小不作具体限定。
响应于电子设备的第一显示页面中存在目标页面元素向第一显示区域移动,电子设备检测该目标页面元素与第一显示区域之间的目标距离。相应的,电子设备确定第一显示区域的边缘,确定第一显示页面中存在的目标页面元素,检测目标页面元素是否进入了第一显示区域。可选地,该过程通过以下步骤(1)-(2)实现,包括:
(1)电子设备检测该目标页面元素与该第一显示区域的边缘的目标距离。
在本步骤中,电子设备确定目标页面元素与第一显示区域的相对位置,从而确定该第一显示区域的边缘为靠近目标页面元素一侧的边缘。电子设备检测目标页面元素与该边缘之间的目标距离。需要说明的一点是,可选地,电子设备检测目标页面元素靠近第一显示区域的边缘与第一显示区域的边缘之间的目标距离;或者,电子设备检测目标页面元素远离第一显示区域的边缘与第一显示区域的边缘之间的目标距离。
参见图4,图4为根据一示例性实施例示出的一种第一显示页面的示意图。该第一显示页面中包括目标页面元素1、目标页面元素2、目标页面元素3和目标页面元素4,以及每个目标页面元素下对应的其他页面元素,例如,页面元素1、页面元素2页面元素3等。响应于该第一显示区域为第一显示页面的顶部的显示区域,目标页面元素2在该第一显示区域的下方,则该目标距离为第一显示区域的下边缘与目标页面元素2的上边缘之间的距离。
需要说明的一点是,可选地,电子设备检测第一显示页面中,第一显示区域以外的显示区域中所有的目标页面元素与第一显示区域的边缘之间的目标距离。可选地,电子设备确定与第一显示区域以外的,距离最近的目标页面元素与第一显示区域的边缘之间的目标距离。在本公开实施例中,对此不作具体限定。
(2)响应于该目标距离小于预设距离,电子设备确定该目标页面元素进入该第一显示区域。
可选地,该预设距离根据需要进行设置并更改,在本公开实施例中,对该预设距离不作具体限定。例如,该预设距离为0px(像素)、10px或50px等中的一个。
电子设备将检测到的目标距离与该预设距离进行对比,响应于该目标距离小于预设距离确定该目标页面元素进入第一显示区域。
在本实现方式中,电子设备检测目标元素与第一显示区域的边缘之间的目标距离,根据该目标距离确定目标页面元素是否进入了第一显示区域,从而提高了页面中目标元素的位置的精准度,防止了遗漏目标页面元素。
步骤303:电子设备在目标视图容器中创建第一存储位置,该第一存储位置为该目标视图容器中的最顶部存储位置。
该目标视图容器为第一显示页面中第二显示区域对应的视图容器。可选的,该目标视图容器中存储第二显示区域中显示的目标页面元素的页面数据。电子设备可以调用该目标视图容器中的第一存储位置中的页面数据,将该页面数据渲染在第二显示区域中。其中,该第一存储位置为目标视图容器中的最顶部存储位置,用于存储电子设备调用的数据。可选地,该最顶部存储位置为目标视图容器中的最外层存储位置。可选地,电子设备关联存储位置和存储位置的生成时间戳,根据存储位置的生成时间戳,从目标视图容器中选择最近生成的存储位置。
相应的,在本步骤之前,电子设备可以创建目标视图容器。可选地,电子设备创建第二显示区域对应的显示窗口,将该显示窗口的窗口容器确定为该目标视图容器。其中,该第二显示区域为用于固定显示目标页面元素的显示区域。该第二显示区域为第一显示页面中最顶层的显示区域,该第二显示区域中显示的内容不会被页面中的其他内容遮挡。
可选地,该目标视图容器中存储进入了第一显示区域的目标页面元素的页面数据。其中,目标视图容器中的最顶部存储位置存储最新进入了第一显示区域的目标页面的页面数据。在该目标页面元素之前进入该第一显示区域的目标页面元素存储在目标视图容器的其他存储位置。
可选地,该第二显示区域与第一显示区域相同或不同,在本公开实施例中,对该第二显示区域不作具体限定。该第二显示区域为第一显示页面的顶端、底端、左侧、右侧或电子设备等区域中的至少一个。该第二显示区域的大小不小于目标页面元素的显示区域,且,该第二显示区域的大小根据需要进行设置,在本公开实施例中,对该第二显示区域的大小不作具体限定。
步骤304:电子设备将该目标页面元素的页面数据从第二存储位置转移到该第一存储位置,该第二存储位置为该目标页面元素的页面数据的原始存储位置。
可选地,该页面数据为渲染目标页面元素所需的渲染数据,或者,该页面元素为调用渲染数据使用的数据接口和数据标识等数据。其中,该第二存储位置为第一显示页面对应的视图容器中的存储位置。
相应的,电子设备中第一显示页面的视图窗口中存储有目标页面元素的元素标识和存储位置的对应关系。响应于电子设备确定第一显示区域中的目标页面元素,确定该目标页面元素的元素标识,根据该元素标识查询目标页面元素在第一显示页面的视图窗口中的第二存储位置。电子设备对该第二存储位置中存储的页面数据进行剪切,将剪切得到的页面数据存储到第一存储位置中。
步骤305:电子设备基于该目标视图容器在该第一显示页面中显示的第二显示区域,将该目标页面元素的页面数据渲染至该第二显示区域中。
在本步骤中,电子设备调用第一存储位置中的页面数据渲染在第一显示页面的第二显示区域中。可选地,第一显示页面的页面元素以节点树的形式存储,节点树中存储有页面元素的页面标识和页面数据的存储位置。相应的,本步骤通过以下步骤(1)-(2)实现,包括:
(1)电子设备从该第一显示页面对应的节点树中,获取该第一存储位置的页面数据。
电子设备根据目标页面元素的页面标识遍历第一显示页面对应的节点树,从该节点树中确定与目标页面元素对应的节点,从该节点中获取目标页面元素的第一存储位置,从该第一存储位置中获取页面数据。
(2)电子设备将该第一存储位置的页面数据渲染至该第一显示页面的第二显示区域中。
在本步骤中,电子设备将该第一页面中的页面数据渲染至第二显示区域中。可选地,电子设备可以通过渲染服务器渲染该第二显示区域中的页面。在本公开实施例中,对电子设备熏染页面的方式不作具体限定。
在本实现方式中,通过节点树的形式存储页面数据,节省了页面数据的存储空间,提高了获取页面数据的效率。
步骤306:电子设备将该第一显示页面中的其他页面元素的页面数据渲染至该第一显示页面的其他区域,得到第二显示页面。
继续参见图4,第一显示页面中的其他页面元素可以为未进入第一显示区域的目标页面元素和其他页面元素。相应的,电子设备从第一显示页面的视图窗口中,获取第一显示页面中其他页面元素的页面数据,将该其他页面元素的页面数据渲染正在第一显示页面的除第二显示区域以外的其他区域中,得到第二显示页面。其中,电子设备选人其他页面元素的页面数据的过程与电子设备渲染目标页面元素的页面数据的过程相似,在此不再赘述。
需要说明的一点是,可选地,该页面操作指令还用于指示向远离第一显示区域的方向滚动第一显示页面。相应的,参见图5,目标页面元素可能离开第一显示区域。相应的,电子设备需要重新渲染第二显示区域中的显示的目标页面元素。该过程可以通过以下步骤(1)-(4)实现,包括:
(1)响应于该目标页面元素离开该第一显示页面的第一显示区域,电子设备将该目标视图容器中该目标页面元素的页面数据和该页面数据所在的第一存储位置删除。
其中,目标页面元素离开该第一显示页面的第一显示区域指,当前的页面滚动指令指示第一显示页面向远离第一显示区域的方向滚动,且,该目标页面元素对应的其他页面元素已全部在第一显示页面中显示过,且,该页面滚动指令仍指示继续保持页面滚动,则确定该目标页面元素离开该第一显示页面的第一显示区域。
该目标页面元素离开第一显示区域后,电子设备将目标视图容器中的该目标页面元素的第一存储位置删除,将第一显示区域中显示的该目标页面元素的内容也删除。
(2)电子设备将该目标页面元素的页面数据从该第一存储位置转移到该第二存储位置。
在本步骤中,电子设备将目标页面元素的页面数据恢复到该目标页面元素对应的第二存储位置中。
(3)电子设备将与该第一存储位置相邻的第三存储位置中的页面数据渲染至该第一显示页面的第二显示区域。
其中,第三存储位置为与第一存储位置相邻的存储位置。响应于第一存储位置被删除,第三存储为目标视图容器中最顶层的存储位置。则电子设备调用该待第三存储位置中的页面数据,将该第三存储位置中的页面数据渲染值该第一显示页面的第二显示区域。该过程与步骤305相似,在此不再赘述。
继续参见图5,其中,目标页面元素2为离开第一显示区域的目标元素,则电子设备将当前目标视图容器中最顶层的第三存储位置中的目标页面元素1对应的页面数据渲染在该第二显示区域中。
(4)将该第一显示页面中的其他页面元素的页面数据渲染至该第一显示页面的其他区域,得到第三显示界面。
本步骤与步骤306相似,在此不再赘述。
在本实现方式中,通过响应于目标页面元素离开第一显示区域,电子设备将该目标页面元素之前的目标页面元素对应的页面数据渲染在第二显示区域中,从而该第一显示页面可以根据滚动操作滚动显示,并将不同的目标页面元素固定在第二显示区域,实现了将第一显示页面中的目标元素分别固定显示。
另外,可选地,响应于电子设备接收到刷新指令,电子设备保持当前目标视图窗口中存储的目标页面的页面数据。相应的,电子设备在第一显示页面中刷新当前目标页面元素下的其他页面元素。可选地,响应于电子设备接收到刷新指令,电子设备可以将目标视图窗口中存储的目标页面元素的页面数据清空,相应的,第一显示页面中显示刷新后的最新显示页面。其中,该刷新指令可以为页面刷新指令等。
可选地,响应于接收到界面清空指令,电子设备将该目标视图容器中的至少一个目标页面元素的页面数据删除。其中,该界面清空指令为返回上层页面指令或退出当前页面等指令。可选地,响应于接收到元素排序指令,电子设备将该目标视图容器中的至少一个目标页面的页面数据存储至该页面数据的原始存储位置。
在本实现方式中,电子设备接收到对界面的其他操作指令时,根据该其他操作指令对目标视图容器中的页面数据机型处理,使得目标视图存储容器中可以根据当前的页面显示,及时更新目标视图窗口中的内容,保证了第二显示区域中显示正确的目标页面元素。
在本公开实施例中,通过设置一个目标视图容器,该目标视图容器中的目标页面元素的页面数据能够显示在第一显示页面的第二显示区域(吸顶显示区域)中,当滚动显示第一显示页面时,直接将需要吸顶显示的目标页面元素的页面数据存储到目标视图容器中,就可以实现目标页面元素的吸顶显示,无需实时更新页面元素的top值,从而无需实时刷新页面,因此,在不提高电子设备性能的情况下,能够保证吸顶显示的画面流畅。
图6是根据一示例性实施例示出的一种页面显示装置的框图。参见图6,该页面显示装置包括:
页面滚动单元601,被配置为响应于接收到页面滚动指令,执行根据该页面滚动指令,滚动当前显示的第一显示页面;
确定单元602,被配置为执行确定当前进入该第一显示页面的第一显示区域的目标页面元素,该第一显示区域用于确定显示在第二显示区域中的页面元素,该第二显示区域为该第一显示页面中固定显示该目标页面元素的显示区域;
第一存储单元603,被配置为执行将该目标页面元素的页面数据存储至目标视图容器中;
第一渲染单元604,被配置为执行基于该目标视图容器在该第一显示页面中显示的该第二显示区域,将该目标页面元素的页面数据渲染至该第二显示区域中;
第二渲染单元605,被配置为执行将该第一显示页面中的其他页面元素的页面数据渲染至该第一显示页面的其他区域,得到第二显示页面。
在一种可能的实现方式中,参见图7,该第一存储单元603包括:
创建子单元6031,被配置为执行在该目标视图容器中创建第一存储位置,该第一存储位置为该目标视图容器中的最顶部存储位置;
转移子单元6032,被配置为执行将该目标页面元素的页面数据从第二存储位置转移到该第一存储位置,该第二存储位置为该目标页面元素的页面数据的原始存储位置。
在另一种可能的实现方式中,参见图7,该第一渲染单元604包括:
获取子单元6041,被配置为执行从该第一显示页面对应的节点树中,获取该第一存储位置的页面数据;
渲染子单元6042,被配置为执行将该第一存储位置的页面数据渲染至该第一显示页面的第二显示区域中。
在另一种可能的实现方式中,参见图7,该装置还包括:
第一删除单元606,被配置为响应于该目标页面元素离开该第一显示页面的第一显示区域,执行将该目标视图容器中该目标页面元素的页面数据和该页面数据所在的第一存储位置删除;
转移单元607,被匹配值为执行将该目标页面元素的页面数据从该第一存储位置转移到该第二存储位置;
该第一渲染单元604,还被配置为执行将与该第一存储位置相邻的第三存储位置中的页面数据渲染至该第一显示页面的第二显示区域;
该第二渲染单元605,还被配置为执行将该第一显示页面中的其他页面元素的页面数据渲染至该第一显示页面的其他区域,得到第三显示界面。
在另一种可能的实现方式中,参见图7,该确定单元602包括:
检测子单元6021,被配置为执行检测该目标页面元素与该第一显示区域的边缘的目标距离;
确定子单元6022,被配置为响应于该目标距离小于预设距离,执行确定该目标页面元素进入该第一显示区域。
在另一种可能的实现方式中,参见图7,该装置还包括:
第二删除单元608,被配置为响应于接收到界面清空指令,执行将该目标视图容器中的至少一个目标页面元素的页面数据删除;或者,
第二存储单元609,被配置为响应于接收到元素排序指令,执行将该目标视图容器中的至少一个目标页面的页面数据存储至该页面数据的原始存储位置。
在本公开实施例中,通过设置一个目标视图容器,该目标视图容器中的目标页面元素的页面数据能够显示在第一显示页面的第二显示区域(吸顶显示区域)中,当滚动显示第一显示页面时,直接将需要吸顶显示的目标页面元素的页面数据存储到目标视图容器中,就可以实现目标页面元素的吸顶显示,无需实时更新页面元素的top值,从而无需实时刷新页面,因此,在不提高电子设备性能的情况下,能够保证吸顶显示的画面流畅。
需要说明的是:上述实施例提供的页面显示装置在进行页面显示时,仅以上述各功能模块的划分进行举例说明,实际应用中,可以根据需要而将上述功能分配由不同的功能模块完成,即将电子设备的内部结构划分成不同的功能模块,以完成以上描述的全部或者部分功能。另外,上述实施例提供的页面显示装置与页面显示方法实施例属于同一构思,其具体实现过程详见方法实施例,这里不再赘述。
图8是根据一示例性实施例示出的一种电子设备的框图。该电子设备800可以是:智能手机、平板电脑、MP3播放器(Moving Picture Experts Group Audio Layer III,动态影像专家压缩标准音频层面3)、MP4(Moving Picture Experts Group Audio Layer IV,动态影像专家压缩标准音频层面4)播放器、笔记本电脑或台式电脑。电子设备800还可能被称为用户设备、便携式终端、膝上型终端、台式终端等其他名称。
通常,电子设备800包括有:一个或多个处理器801和易失性或非易失性存储器802。
处理器801可以包括一个或多个处理核心,比如4核心处理器、8核心处理器等。处理器801可以采用DSP(Digital Signal Processing,数字信号处理)、FPGA(Field-Programmable Gate Array,现场可编程门阵列)、PLA(Programmable Logic Array,可编程逻辑阵列)中的至少一种硬件形式来实现。处理器801也可以包括主处理器和协处理器,主处理器是用于对在唤醒状态下的数据进行处理的处理器,也称CPU(Central ProcessingUnit,中央处理器);协处理器是用于对在待机状态下的数据进行处理的低功耗处理器。在一些实施例中,处理器801可以在集成有GPU(Graphics Processing Unit,图像处理器),GPU用于负责显示屏所需要显示的内容的渲染和绘制。一些实施例中,处理器801还可以包括AI(Artificial Intelligence,人工智能)处理器,该AI处理器用于处理有关机器学习的计算操作。
存储器802可以包括一个或多个计算机可读存储介质,该计算机可读存储介质可以是非暂态的。存储器802还可包括高速随机存取存储器,以及非易失性存储器,比如一个或多个磁盘存储设备、闪存存储设备。在一些实施例中,存储器802中的非暂态的计算机可读存储介质用于存储至少一个指令,该至少一个指令用于被处理器801所执行以实现本公开中方法实施例提供的页面显示方法。
在一些实施例中,电子设备800还可选包括有:外围设备接口803和至少一个外围设备。处理器801、存储器802和外围设备接口803之间可以通过总线或信号线相连。各个外围设备可以通过总线、信号线或电路板与外围设备接口803相连。具体地,外围设备包括:射频电路804、触摸显示屏805、摄像头组件806、音频电路807、定位组件808和电源809中的至少一种。
外围设备接口803可被用于将I/O(Input/Output,输入/输出)相关的至少一个外围设备连接到处理器801和存储器802。在一些实施例中,处理器801、存储器802和外围设备接口803被集成在同一芯片或电路板上;在一些其他实施例中,处理器801、存储器802和外围设备接口803中的任意一个或两个可以在单独的芯片或电路板上实现,本实施例对此不加以限定。
射频电路804用于接收和发射RF(Radio Frequency,射频)信号,也称电磁信号。射频电路804通过电磁信号与通信网络以及其他通信设备进行通信。射频电路804将电信号转换为电磁信号进行发送,或者,将接收到的电磁信号转换为电信号。可选地,射频电路804包括:天线系统、RF收发器、一个或多个放大器、调谐器、振荡器、数字信号处理器、编解码芯片组、用户身份模块卡等等。射频电路804可以通过至少一种无线通信协议来与其它电子设备进行通信。该无线通信协议包括但不限于:城域网、各代移动通信网络(2G、3G、4G及5G)、无线局域网和/或WiFi(Wireless Fidelity,无线保真)网络。在一些实施例中,射频电路804还可以包括NFC(Near Field Communication,近距离无线通信)有关的电路,本公开对此不加以限定。
显示屏805用于显示UI(User Interface,用户界面)。该UI可以包括图形、文本、图标、视频及其它们的任意组合。当显示屏805是触摸显示屏时,显示屏805还具有采集在显示屏805的表面或表面上方的触摸信号的能力。该触摸信号可以作为控制信号输入至处理器801进行处理。此时,显示屏805还可以用于提供虚拟按钮和/或虚拟键盘,也称软按钮和/或软键盘。在一些实施例中,显示屏805可以为一个,设置电子设备800的前面板;在另一些实施例中,显示屏805可以为至少两个,分别设置在电子设备800的不同表面或呈折叠设计;在再一些实施例中,显示屏805可以是柔性显示屏,设置在电子设备800的弯曲表面上或折叠面上。甚至,显示屏805还可以设置成非矩形的不规则图形,也即异形屏。显示屏805可以采用LCD(Liquid Crystal Display,液晶显示屏)、OLED(Organic Light-Emitting Diode,有机发光二极管)等材质制备。
摄像头组件806用于采集图像或视频。可选地,摄像头组件806包括前置摄像头和后置摄像头。通常,前置摄像头设置在电子设备800的前面板,后置摄像头设置在电子设备800的背面。在一些实施例中,后置摄像头为至少两个,分别为主摄像头、景深摄像头、广角摄像头、长焦摄像头中的任意一种,以实现主摄像头和景深摄像头融合实现背景虚化功能、主摄像头和广角摄像头融合实现全景拍摄以及VR(Virtual Reality,虚拟现实)拍摄功能或者其它融合拍摄功能。在一些实施例中,摄像头组件806还可以包括闪光灯。闪光灯可以是单色温闪光灯,也可以是双色温闪光灯。双色温闪光灯是指暖光闪光灯和冷光闪光灯的组合,可以用于不同色温下的光线补偿。
音频电路807可以包括麦克风和扬声器。麦克风用于采集用户及环境的声波,并将声波转换为电信号输入至处理器801进行处理,或者输入至射频电路804以实现语音通信。出于立体声采集或降噪的目的,麦克风可以为多个,分别设置在电子设备800的不同部位。麦克风还可以是阵列麦克风或全向采集型麦克风。扬声器则用于将来自处理器801或射频电路804的电信号转换为声波。扬声器可以是传统的薄膜扬声器,也可以是压电陶瓷扬声器。当扬声器是压电陶瓷扬声器时,不仅可以将电信号转换为人类可听见的声波,也可以将电信号转换为人类听不见的声波以进行测距等用途。在一些实施例中,音频电路807还可以包括耳机插孔。
定位组件808用于定位电子设备800的当前地理位置,以实现导航或LBS(LocationBased Service,基于位置的服务)。定位组件808可以是基于美国的GPS(GlobalPositioning System,全球定位系统)、中国的北斗系统、俄罗斯的格雷纳斯系统或欧盟的伽利略系统的定位组件。
电源809用于为电子设备800中的各个组件进行供电。电源809可以是交流电、直流电、一次性电池或可充电电池。当电源809包括可充电电池时,该可充电电池可以支持有线充电或无线充电。该可充电电池还可以用于支持快充技术。
在一些实施例中,电子设备800还包括有一个或多个传感器810。该一个或多个传感器810包括但不限于:加速度传感器811、陀螺仪传感器812、压力传感器813、指纹传感器814、光学传感器815以及接近传感器816。
加速度传感器811可以检测以电子设备800建立的坐标系的三个坐标轴上的加速度大小。比如,加速度传感器811可以用于检测重力加速度在三个坐标轴上的分量。处理器801可以根据加速度传感器811采集的重力加速度信号,控制触摸显示屏805以横向视图或纵向视图进行用户界面的显示。加速度传感器811还可以用于游戏或者用户的运动数据的采集。
陀螺仪传感器812可以检测电子设备800的机体方向及转动角度,陀螺仪传感器812可以与加速度传感器811协同采集用户对电子设备800的3D动作。处理器801根据陀螺仪传感器812采集的数据,可以实现如下功能:动作感应(比如根据用户的倾斜操作来改变UI)、拍摄时的图像稳定、游戏控制以及惯性导航。
压力传感器813可以设置在电子设备800的侧边框和/或触摸显示屏805的下层。当压力传感器813设置在电子设备800的侧边框时,可以检测用户对电子设备800的握持信号,由处理器801根据压力传感器813采集的握持信号进行左右手识别或快捷操作。当压力传感器813设置在触摸显示屏805的下层时,由处理器801根据用户对触摸显示屏805的压力操作,实现对UI界面上的可操作性控件进行控制。可操作性控件包括按钮控件、滚动条控件、图标控件、菜单控件中的至少一种。
指纹传感器814用于采集用户的指纹,由处理器801根据指纹传感器814采集到的指纹识别用户的身份,或者,由指纹传感器814根据采集到的指纹识别用户的身份。在识别出用户的身份为可信身份时,由处理器801授权该用户执行相关的敏感操作,该敏感操作包括解锁屏幕、查看加密信息、下载软件、支付及更改设置等。指纹传感器814可以被设置电子设备800的正面、背面或侧面。当电子设备800上设置有物理按键或厂商Logo时,指纹传感器814可以与物理按键或厂商Logo集成在一起。
光学传感器815用于采集环境光强度。在一个实施例中,处理器801可以根据光学传感器815采集的环境光强度,控制触摸显示屏805的显示亮度。具体地,当环境光强度较高时,调高触摸显示屏805的显示亮度;当环境光强度较低时,调低触摸显示屏805的显示亮度。在另一个实施例中,处理器801还可以根据光学传感器815采集的环境光强度,动态调整摄像头组件806的拍摄参数。
接近传感器816,也称距离传感器,通常设置在电子设备800的前面板。接近传感器816用于采集用户与电子设备800的正面之间的距离。在一个实施例中,当接近传感器816检测到用户与电子设备800的正面之间的距离逐渐变小时,由处理器801控制触摸显示屏805从亮屏状态切换为息屏状态;当接近传感器816检测到用户与电子设备800的正面之间的距离逐渐变大时,由处理器801控制触摸显示屏805从息屏状态切换为亮屏状态。
本领域技术人员可以理解,图8中示出的结构并不构成对电子设备800的限定,可以包括比图示更多或更少的组件,或者组合某些组件,或者采用不同的组件布置。
在示例性实施例中,还提供了一种计算机可读存储介质,该计算机可读存储介质中存储有指令,上述指令可被电子设备的处理器执行以完成上述实施例中的页面显示方法。例如,该计算机可读存储介质可以是ROM(Read-Only Memory,只读存储器)、RAM(RandomAccess Memory,随机存取存储器)、CD-ROM(Compact Disc Read-Only Memory,只读光盘)、磁带、软盘和光数据存储设备等。
本公开还提供了一种计算机程序产品,当计算机程序产品中的指令由电子设备的处理器执行时,使得电子设备能够执行上述各个方法实施例提供的页面显示方法。
本领域技术人员在考虑说明书及实践这里公开的发明后,将容易想到本公开的其它实施方案。本公开旨在涵盖本公开的任何变型、用途或者适应性变化,这些变型、用途或者适应性变化遵循本公开的一般性原理并包括本公开未公开的本技术领域中的公知常识或惯用技术手段。说明书和实施例仅被视为示例性的,本公开的真正范围和精神由下面的权利要求指出。
应当理解的是,本公开并不局限于上面已经描述并在附图中示出的精确结构,并且可以在不脱离其范围进行各种修改和改变。本公开的范围仅由所附的权利要求来限制。
Claims (12)
1.一种页面显示方法,其特征在于,所述方法包括:
响应于接收到页面滚动指令,根据所述页面滚动指令,滚动当前显示的第一显示页面,所述第一显示页面包括至少一组页面元素,每组页面元素包括一个目标页面元素和至少一个其他页面元素;
确定当前进入所述第一显示页面的第一显示区域的目标页面元素,所述第一显示区域用于确定显示在第二显示区域中的页面元素,所述第二显示区域为所述第一显示页面中固定显示所述目标页面元素的显示区域,且所述第二显示区域位于所述第一显示页面的最顶层;
将所述目标页面元素的页面数据存储至目标视图容器中,所述目标视图容器是所述第二显示区域对应的显示窗口的窗口容器;
基于所述目标视图容器在所述第一显示页面中显示的所述第二显示区域,将所述目标页面元素的页面数据渲染至所述第二显示区域中;
将所述第一显示页面中的其他页面元素的页面数据渲染至所述第一显示页面的其他区域,得到第二显示页面;
响应于任一组页面元素全部显示完毕,将下一组页面元素中的目标显示元素显示在所述第二显示区域;
所述方法还包括:
响应于当前的所述页面滚动指令指示所述第一显示页面向远离所述第一显示区域的方向滚动、所述目标页面元素对应的其他页面元素已全部在所述第一显示页面中显示过且所述页面滚动指令仍指示继续保持页面滚动,则确定所述目标页面元素离开所述第一显示页面的第一显示区域,将所述目标视图容器中所述目标页面元素的页面数据和所述页面数据所在的第一存储位置删除,所述第一存储位置为所述目标视图容器中的最顶部存储位置;
将所述目标页面元素的页面数据从所述第一存储位置转移到第二存储位置,所述第二存储位置为所述目标页面元素的页面数据的原始存储位置;
响应于所述第一存储位置被删除,与所述第一存储位置相邻的第三存储位置成为所述目标视图容器中最顶层的存储位置,调用所述第三存储位置中的页面数据;
将所述第三存储位置中的页面数据渲染至所述第一显示页面的所述第二显示区域;
将所述第一显示页面中的其他页面元素的页面数据渲染至所述第一显示页面的其他区域,得到第三显示界面。
2.根据权利要求1所述的方法,其特征在于,所述将所述目标页面元素的页面数据存储至目标视图容器中,包括:
在所述目标视图容器中创建第一存储位置;
将所述目标页面元素的页面数据从第二存储位置转移到所述第一存储位置。
3.根据权利要求2所述的方法,其特征在于,所述基于所述目标视图容器在所述第一显示页面中显示的所述第二显示区域,将所述目标页面元素的页面数据渲染至所述第二显示区域中,包括:
从所述第一显示页面对应的节点树中,获取所述第一存储位置的页面数据;
将所述第一存储位置的页面数据渲染至所述第一显示页面的所述第二显示区域中。
4.根据权利要求1所述的方法,其特征在于,所述确定当前进入所述第一显示页面的第一显示区域的目标页面元素,包括:
检测所述目标页面元素与所述第一显示区域的边缘的目标距离;
响应于所述目标距离小于预设距离,确定所述目标页面元素进入所述第一显示区域。
5.根据权利要求1所述的方法,其特征在于,所述将所述第一显示页面中的其他页面元素的页面数据渲染至所述第一显示页面的其他区域,得到第二显示页面之后,所述方法还包括:
响应于接收到界面清空指令,将所述目标视图容器中的至少一个目标页面元素的页面数据删除;或者,
响应于接收到元素排序指令,将所述目标视图容器中的至少一个目标页面的页面数据存储至所述页面数据的原始存储位置。
6.一种页面显示装置,其特征在于,所述装置包括:
页面滚动单元,被配置为响应于接收到页面滚动指令,执行根据所述页面滚动指令,滚动当前显示的第一显示页面,所述第一显示页面包括至少一组页面元素,每组页面元素包括一个目标页面元素和至少一个其他页面元素;
确定单元,被配置为执行确定当前进入所述第一显示页面的第一显示区域的目标页面元素,所述第一显示区域用于确定显示在第二显示区域中的页面元素,所述第二显示区域为所述第一显示页面中固定显示所述目标页面元素的显示区域,且所述第二显示区域位于所述第一显示页面的最顶层;
第一存储单元,被配置为执行将所述目标页面元素的页面数据存储至目标视图容器中,所述目标视图容器是所述第二显示区域对应的显示窗口的窗口容器;
第一渲染单元,被配置为执行基于所述目标视图容器在所述第一显示页面中显示的所述第二显示区域,将所述目标页面元素的页面数据渲染至所述第二显示区域中;
第二渲染单元,被配置为执行将所述第一显示页面中的其他页面元素的页面数据渲染至所述第一显示页面的其他区域,得到第二显示页面;
用于执行以下步骤的模块:响应于任一组页面元素全部显示完毕,将下一组页面元素中的目标显示元素显示在所述第二显示区域;
所述装置还包括:
第一删除单元,被配置为响应于当前的所述页面滚动指令指示所述第一显示页面向远离所述第一显示区域的方向滚动、所述目标页面元素对应的其他页面元素已全部在所述第一显示页面中显示过且所述页面滚动指令仍指示继续保持页面滚动,则确定所述目标页面元素离开所述第一显示页面的第一显示区域,执行将所述目标视图容器中所述目标页面元素的页面数据和所述页面数据所在的第一存储位置删除,所述第一存储位置为所述目标视图容器中的最顶部存储位置;
转移单元,被配置为执行将所述目标页面元素的页面数据从所述第一存储位置转移到第二存储位置,所述第二存储位置为所述目标页面元素的页面数据的原始存储位置;
所述第一渲染单元,还被配置为执行响应于所述第一存储位置被删除,与所述第一存储位置相邻的第三存储位置成为所述目标视图容器中最顶层的存储位置,调用所述第三存储位置中的页面数据;将所述第三存储位置中的页面数据渲染至所述第一显示页面的所述第二显示区域;
所述第二渲染单元,还被配置为执行将所述第一显示页面中的其他页面元素的页面数据渲染至所述第一显示页面的其他区域,得到第三显示界面。
7.根据权利要求6所述的装置,其特征在于,所述第一存储单元包括:
创建子单元,被配置为执行在所述目标视图容器中创建第一存储位置;
转移子单元,被配置为执行将所述目标页面元素的页面数据从第二存储位置转移到所述第一存储位置。
8.根据权利要求7所述的装置,其特征在于,所述第一渲染单元包括:
获取子单元,被配置为执行从所述第一显示页面对应的节点树中,获取所述第一存储位置的页面数据;
渲染子单元,被配置为执行将所述第一存储位置的页面数据渲染至所述第一显示页面的所述第二显示区域中。
9.根据权利要求6所述的装置,其特征在于,所述确定单元包括:
检测子单元,被配置为执行检测所述目标页面元素与所述第一显示区域的边缘的目标距离;
确定子单元,被配置为响应于所述目标距离小于预设距离,执行确定所述目标页面元素进入所述第一显示区域。
10.根据权利要求6所述的装置,其特征在于,所述装置还包括:
第二删除单元,被配置为响应于接收到界面清空指令,执行将所述目标视图容器中的至少一个目标页面元素的页面数据删除;或者,
第二存储单元,被配置为响应于接收到元素排序指令,执行将所述目标视图容器中的至少一个目标页面的页面数据存储至所述页面数据的原始存储位置。
11.一种电子设备,其特征在于,所述电子设备包括:一个或多个处理器,
用于存储所述一个或多个处理器可执行指令的易失性或非易失性存储器;
其中,所述一个或多个处理器被配置为执行权利要求1-5任一项所述的页面显示方法。
12.一种计算机可读存储介质,其特征在于,所述计算机可读存储介质上存储有指令,所述指令被电子设备的处理器执行时实现权利要求1-5任一项所述的页面显示方法。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010789369.0A CN111880712B (zh) | 2020-08-07 | 2020-08-07 | 页面显示方法、装置、电子设备及存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202010789369.0A CN111880712B (zh) | 2020-08-07 | 2020-08-07 | 页面显示方法、装置、电子设备及存储介质 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN111880712A CN111880712A (zh) | 2020-11-03 |
CN111880712B true CN111880712B (zh) | 2022-11-11 |
Family
ID=73211271
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202010789369.0A Active CN111880712B (zh) | 2020-08-07 | 2020-08-07 | 页面显示方法、装置、电子设备及存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN111880712B (zh) |
Families Citing this family (5)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN112612539B (zh) * | 2020-12-18 | 2024-02-13 | 北京达佳互联信息技术有限公司 | 数据模型卸载方法、装置、电子设备及存储介质 |
CN112799768A (zh) * | 2021-02-03 | 2021-05-14 | 北京文香信息技术有限公司 | 跑马灯的实现方法、装置及电子设备 |
CN113703657A (zh) * | 2021-08-26 | 2021-11-26 | 北京房江湖科技有限公司 | 元素固定显示的控制方法、装置、存储介质及电子设备 |
CN113918258B (zh) * | 2021-09-30 | 2023-12-19 | 北京达佳互联信息技术有限公司 | 页面滚动处理方法、装置、终端以及存储介质 |
CN115237325A (zh) * | 2022-07-12 | 2022-10-25 | 抖音视界(北京)有限公司 | 一种页面内容更新方法、装置、计算机设备及存储介质 |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102707872A (zh) * | 2011-02-28 | 2012-10-03 | 微软公司 | 使用持久导标的可滚动列表导航 |
EP2787426A1 (en) * | 2013-04-03 | 2014-10-08 | BlackBerry Limited | Electronic device and method of displaying information in response to a gesture |
CN107273383A (zh) * | 2016-04-08 | 2017-10-20 | 赤子城网络技术(北京)有限公司 | 一种索引抽屉装置及索引方法 |
WO2020156111A1 (zh) * | 2019-01-28 | 2020-08-06 | 维沃移动通信有限公司 | 界面显示方法及终端 |
Family Cites Families (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US9922016B2 (en) * | 2016-05-06 | 2018-03-20 | Ricoh Company, Ltd. | Virtual sticky generation |
CN109408162A (zh) * | 2018-09-03 | 2019-03-01 | 平安普惠企业管理有限公司 | 一种显示页面的方法及终端 |
CN110597583B (zh) * | 2019-08-14 | 2021-03-23 | 北京金堤科技有限公司 | 模态框的吸顶方法和装置、存储介质、电子设备 |
CN111199005B (zh) * | 2019-12-27 | 2022-10-14 | 山石网科通信技术股份有限公司 | 网页组件处理方法及装置 |
-
2020
- 2020-08-07 CN CN202010789369.0A patent/CN111880712B/zh active Active
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN102707872A (zh) * | 2011-02-28 | 2012-10-03 | 微软公司 | 使用持久导标的可滚动列表导航 |
EP2787426A1 (en) * | 2013-04-03 | 2014-10-08 | BlackBerry Limited | Electronic device and method of displaying information in response to a gesture |
CN107273383A (zh) * | 2016-04-08 | 2017-10-20 | 赤子城网络技术(北京)有限公司 | 一种索引抽屉装置及索引方法 |
WO2020156111A1 (zh) * | 2019-01-28 | 2020-08-06 | 维沃移动通信有限公司 | 界面显示方法及终端 |
Also Published As
Publication number | Publication date |
---|---|
CN111880712A (zh) | 2020-11-03 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN111880712B (zh) | 页面显示方法、装置、电子设备及存储介质 | |
CN110602321B (zh) | 应用程序切换方法、装置、电子装置及存储介质 | |
CN111597008A (zh) | 弹窗管理方法、装置、终端及存储介质 | |
CN108449641B (zh) | 播放媒体流的方法、装置、计算机设备和存储介质 | |
CN110308956B (zh) | 一种应用界面显示方法、装置及移动终端 | |
CN110362366B (zh) | 一种应用界面显示方法及装置 | |
CN112527287A (zh) | 物品详情信息展示方法、装置、终端及存储介质 | |
CN111694478A (zh) | 内容展示方法、装置、终端及存储介质 | |
CN112667835A (zh) | 作品处理方法、装置、电子设备及存储介质 | |
CN108734662B (zh) | 显示图标的方法和装置 | |
CN112257006A (zh) | 页面信息的配置方法、装置、设备及计算机可读存储介质 | |
CN112749362A (zh) | 控件创建方法、装置、设备及存储介质 | |
CN114546545B (zh) | 图文显示方法、装置、终端及存储介质 | |
CN109614563B (zh) | 显示网页的方法、装置、设备及存储介质 | |
CN108664300B (zh) | 一种画中画模式下的应用界面显示方法及装置 | |
CN111370096A (zh) | 交互界面的显示方法、装置、设备及存储介质 | |
CN111949341A (zh) | 展示信息的方法、装置、设备及存储介质 | |
CN112612405B (zh) | 窗口显示方法、装置、设备及计算机可读存储介质 | |
CN114282494A (zh) | 信息显示方法、装置、电子设备及存储介质 | |
CN111464829B (zh) | 切换媒体数据的方法、装置、设备及存储介质 | |
CN112732133B (zh) | 消息处理的方法、装置、电子设备及存储介质 | |
CN113836426A (zh) | 一种信息推送的方法、装置及电子设备 | |
CN110941458A (zh) | 启动应用程序的方法、装置、设备及存储介质 | |
CN110647262B (zh) | 页面显示的方法及装置 | |
CN115379274B (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 |