[go: up one dir, main page]
More Web Proxy on the site http://driver.im/

CN111209499A - 一种页面展示的方法、装置、设备和可读介质 - Google Patents

一种页面展示的方法、装置、设备和可读介质 Download PDF

Info

Publication number
CN111209499A
CN111209499A CN201811401680.2A CN201811401680A CN111209499A CN 111209499 A CN111209499 A CN 111209499A CN 201811401680 A CN201811401680 A CN 201811401680A CN 111209499 A CN111209499 A CN 111209499A
Authority
CN
China
Prior art keywords
sub
viewport
page
displayed
current page
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.)
Granted
Application number
CN201811401680.2A
Other languages
English (en)
Other versions
CN111209499B (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.)
Beijing ByteDance Network Technology Co Ltd
Original Assignee
Beijing ByteDance Network 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 Beijing ByteDance Network Technology Co Ltd filed Critical Beijing ByteDance Network Technology Co Ltd
Priority to CN201811401680.2A priority Critical patent/CN111209499B/zh
Publication of CN111209499A publication Critical patent/CN111209499A/zh
Application granted granted Critical
Publication of CN111209499B publication Critical patent/CN111209499B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Landscapes

  • User Interface Of Digital Computer (AREA)

Abstract

本公开实施例公开了一种页面展示的方法、装置、设备和可读介质。其中,该方法包括:根据当前页面中预设的分类对象获取至少一个指定元素,所述指定元素包括第一子元素和第二子元素;若第一子元素在视口展示,则在当前页面中弹出所述第二子元素。通过本公开实施例的技术方案,实现页面滑动中各第二子元素在视口的相应展示,无需采用JavaScript语言来同时监听各个指定元素,解决了现有技术中内存占用大、页面滑动卡顿的问题,简化了为各指定元素添加滑动效果的软件操作,提高了页面中滑动效果展示的流畅性。

Description

一种页面展示的方法、装置、设备和可读介质
技术领域
本公开实施例涉及计算机处理技术,尤其涉及一种页面展示的方法、装置、设备和可读介质。
背景技术
在现有的页面展示中,为了满足用户对于页面中各元素展示效果的多样化需求,会为该页面中的指定元添加对应的页面展示效果;在页面滑动过程中,首先确定当前出现在页面视口中的指定元素,并弹出该指定元素对应的页面效果,展示给用户。
在页面滑动过程中需要弹出为各指定元素添加的页面效果时,通常采用JavaScript语言监听页面滑动过程中的滚动事件,通过滚动事件的回调函数来反馈各指定元素的页面位置、元素尺寸以及滚动条位置,从而为各指定元素匹配对应的页面效果,展示给用户。
而由于页面中需添加页面展示效果的指定元素较多,此时使用JavaScript语言来同时监听各个指定元素,并匹配对应的页面效果,会由于过多使用JavaScript会占用较大的内存空间,易造成页面滑动卡顿的情况。
发明内容
有鉴于此,本公开实施例提供了一种页面展示的方法、装置、设备和可读介质,解决了现有技术中内存占用大、页面滑动卡顿的问题,简化了为多个指定元素添加滑动效果的软件操作,提高了页面中滑动效果展示的流畅性。
第一方面,本公开实施例提供了一种页面展示的方法,该方法包括:
根据当前页面中预设的分类对象获取至少一个指定元素,所述指定元素包括第一子元素和第二子元素;
若第一子元素在视口展示,则在当前页面中弹出所述第二子元素。
进一步的,所述页面展示的方法,还包括:
若第一子元素未在视口展示,则在当前页面中隐藏所述第二子元素。
进一步的,根据当前页面中预设的分类对象获取至少一个指定元素,包括:
在预先构建的分类对象库中查找对应的视口对象;
获取当前页面中与所述视口对象的标识匹配的至少一个指定元素。
进一步的,若第一子元素在视口展示,则在当前页面中弹出所述第二子元素,包括:
若第一子元素在视口展示,则获取所述视口对象下预设的弹出规则;
根据所述弹出规则在当前页面中弹出所述第二子元素。
进一步的,若第一子元素未在视口展示,则在当前页面中隐藏所述第二子元素,包括:
若第一子元素未在视口展示,则获取所述视口对象下预设的隐藏规则;
根据所述隐藏规则在当前页面中隐藏所述第二子元素。
第二方面,本公开实施例提供了一种页面展示的装置,该装置包括:
元素获取模块,用于根据当前页面中预设的分类对象获取至少一个指定元素,所述指定元素包括第一子元素和第二子元素;
弹出模块,用于若第一子元素在视口展示,则在当前页面中弹出所述第二子元素。
进一步的,所述页面展示的装置,还包括:
隐藏模块,用于若第一子元素未在视口展示,则在当前页面中隐藏所述第二子元素。
进一步的,所述元素获取模块,包括:
视口对象查找单元,用于在预先构建的分类对象库中查找对应的视口对象;
元素获取单元,用于获取当前页面中与所述视口对象的标识匹配的至少一个指定元素。
进一步的,所述弹出模块,具体用于:
若第一子元素在视口展示,则获取所述视口对象下预设的弹出规则;根据所述弹出规则在当前页面中弹出所述第二子元素。
进一步的,所述隐藏模块,具体用于:
若第一子元素未在视口展示,则获取所述视口对象下预设的隐藏规则;根据所述隐藏规则在当前页面中隐藏所述第二子元素。
第三方面,本公开实施例还提供了一种设备,该设备包括:
一个或多个处理器;
存储器,用于存储一个或多个程序;
当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现如本公开任意实施例所述的页面展示的方法。
第四方面,本公开实施例提供了一种可读介质,其上存储有计算机程序,该程序被处理器执行时实现如本公开任意实施例所述的页面展示的方法。
本公开实施例提供的一种页面展示的方法、装置、设备和可读介质,通过在页面中预先配置对应的分类对象,并根据该分类对象确定页面中对应的指定元素,当指定元素中的第一子元素在视口展示时,弹出对应的第二子元素,从而实现页面滑动中各第二子元素在视口的相应展示,无需采用JavaScript语言来同时监听各个指定元素,解决了现有技术中内存占用大、页面滑动卡顿的问题,简化了为各指定元素添加滑动效果的软件操作,提高了页面中滑动效果展示的流畅性。
附图说明
为了更清楚地说明本公开实施例或现有技术中的技术方案,下面将对实施例或现有技术描述中所需要使用的附图做一简单地介绍,显而易见地,下面描述中的附图是本公开的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1示出了本公开实施例提供的一种页面展示的方法的流程图;
图2示出了本公开实施例提供的另一种页面展示的方法的流程图;
图3示出了本公开实施例提供的一种页面滑动展示的界面示意图;
图4示出了本公开实施例提供的一种页面展示的装置的结构示意图;
图5示出了本公开实施例提供的一种设备的结构示意图。
具体实施方式
为使本公开的目的、技术方案和优点更加清楚,以下将参照本公开实施例中的附图,通过实施方式清楚、完整地描述本公开的技术方案,显然,所描述的实施例是本公开一部分实施例,而不是全部的实施例。基于本公开中的实施例,本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例,都属于本公开保护的范围。
图1示出了本公开实施例提供的一种页面展示的方法的流程图,本公开实施例可适用于在页面滑动过程中添加对应滑动效果的情况中。本实施例提供的一种页面展示的方法可以由本公开实施例提供的页面展示的装置来执行,该装置可以通过软件和/或硬件的方式来实现,并集成在执行本方法的设备中,在本实施例中执行本方法的设备可以是智能手机、平板电脑和笔记本等任意一种具备页面展示功能的智能终端。
具体的,如图1所示,本公开实施例中提供的页面展示的方法可以包括如下步骤:
S110,根据当前页面中预设的分类对象获取至少一个指定元素。
其中,指定元素包括第一子元素和第二子元素。分类对象是根据页面中元素的功能特征不同对各个元素进行分类的对象。本实施例中分类对象可以是预先设定的层叠样式表(Cascading Style Sheets,CSS)伪类,通过该CSS伪类中针对的不同元素功能对各页面元素进行分类。
具体的,CSS是一种用来为结构化文档,如超文本标记语言(Hyper Text Mark-upLanguage,HTML)网页或可扩展标记语言(Extensible Markup Language,XML)应用,添加字体、间距和颜色等样式结构的计算机语言,由万维网联盟(World Wide Web Consortium,W3C)来定义和维护。其中,CSS主要用于定义如何显示结构化文档中的各个元素,样式可以直接存储于HTML网页或者单独的样式单文件中;样式单中包含将该样式应用到指定类型的元素中的规则。此外,CSS伪类主要用于向某些选择器添加特殊的效果,同时CSS伪类是基于页面中各个元素所处的不同特征进行分类。需要说明的是,本实施例主要针对页面滑动过程中需要添加一些滑动效果的情况,因此本实施例中的分类对象,也就是CSS伪类主要通过判断页面中对应的元素是否在视口显示,其中,视口(viewport)是指当前页面中的可视区域,从而对页面中的各个元素进行分类。本实施例中的CSS伪类可以根据页面滑动的效果展示需求由用户预先设定。
可选的,由于当前页面中存在多个元素,但并不是每个元素在页面滑动过程中都需要添加对应的滑动效果,因此在预先设定分类对象,也就是CSS伪类时,还会为该CSS伪类指定匹配的页面元素,也就是该CSS伪类仅定义页面中某一类特定的页面元素在结构化文档中的显示样式,从而确保仅有该匹配的页面元素能够应用该CSS伪类中设定的样式,其他元素并不参与该CSS伪类中定义的显示样式。其中,由于指定元素在页面滑动过程中会需要添加相应的滑动效果,该滑动效果仅在指定元素滑至页面视口时才会弹出进行展示,在其他情况下无需展示;因此该指定元素中可以包括第一子元素和第二子元素两种。其中,第一子元素为页面滑动过程中指定元素中一直显示在当前页面中的子元素;第二子元素为页面滑动过程中为该指定元素设置的滑动效果所对应的子元素,该第二子元素仅在指定元素滑动到页面视口时,才会弹出显示在当前页面中,以展示给用户。
本实施例在页面滑动过程中显示对应的滑动效果时,首先需要确定用户针对该当前页面添加相应滑动效果的需求,预先设定的基于页面中各个元素所处的不同特征而进行分类的分类对象,从而根据该预设的分类对象与页面元素之间的匹配关系,确定该分类对象中指定的需要添加对应的滑动效果的元素,也就是在当前页面中根据预设的分类对象获取匹配的至少一个指定元素,并确定各指定元素中包括的第一子元素和第二子元素,以便在后续判断指定元素在页面滑动过程中是否在页面视口显示,从而确定对应的滑动效果。具体的,本实施例中预先根据当前页面添加相应滑动效果的需求设定对应的CSS伪类,进而根据该CSS伪类与页面元素之间的匹配关系,确定该CSS伪类中指定的需要添加对应的滑动效果的元素,以便后续判断指定元素在页面滑动过程中是否在页面视口显示。
S120,若第一子元素在视口展示,则在当前页面中弹出第二子元素。
其中,视口为移动前端设备中安装的浏览器或其他应用程序在显示页面内容时对应的设备屏幕区域。
具体的,由于展示的当前页面相对于设备的显示窗口(也就是本实施例中的视口)可能较大,需要在视口中滑动该页面而显示页面中的全部信息,因此在当前页面中根据预设的分类对象获取到至少一个指定元素时,首先需要判断各个指定元素是否在当前页面中的视口展示,此时由于指定元素中的第一子元素在页面滑动过程中一直显示在当前页面中,而第二子元素设定只有在指定元素滑动至视口显示时才会弹出进行显示,因此可以直接通过判断指定元素中的第一子元素是否在视口展示,来确定该指定元素是否在视口展示。
可选的,本实施例中采用观察者模式,通过为当前页面中的各第一子元素配置相应的观察者,也就是为每一个第一子元素设定添加一个对应的监控项,通过该观察者实时监控页面滑动过程中该第一子元素的具体展示位置,以确定该第一子元素当前是否在视口中展示。进一步的,若确定第一子元素在视口展示,则可以确定该第一子元素此时满足预设的分类对象中所基于页面中各个元素所处的不同特征进行分类的特征依据,从而触发分类对象中预设的元素在视口时对应的分类规则,并响应该分类规则,在当前页面中弹出与该第一子元素对应的第二子元素,使第二子元素能够在此时显示在当前页面的视口中,并展示给用户。具体的,由于第二子元素为页面滑动过程中为对应的指定元素设置的滑动效果所对应的子元素,因此在第一子元素在视口展示,也就是对应的指定元素在视口展示时,在当前页面中弹出与该第一子元素对应的第二子元素,也就是在视口中弹出为该指定元素在页面滑动过程中添加的滑动效果,从而将该滑动效果展示给用户。
本公开实施例提供的技术方案,通过在页面中预先配置对应的分类对象,并根据该分类对象确定页面中对应的指定元素,当指定元素中的第一子元素在视口展示时,弹出对应的第二子元素,从而实现页面滑动中各第二子元素在视口的相应展示,无需采用JavaScript语言来同时监听各个指定元素,解决了现有技术中内存占用大、页面滑动卡顿的问题,简化了为各指定元素添加滑动效果的软件操作,提高了页面中滑动效果展示的流畅性。
在上述实施例提供的技术方案的基础上,对于本公开实施例提供的页面展示的方法所存在的其他情况进行进一步说明。上述页面展示的方法中,在根据当前页面中预设的分类对象获取到至少一个指定元素,并确定各指定元素中包括的第一子元素和第二子元素后,需要判断该第一子元素的具体展示位置,此时除在上述技术方案中介绍的第一子元素在视口展示之外,还存在某些指定元素中的第一子元素未在视口展示。此时,上述页面展示的方法还可以包括:若第一子元素未在视口展示,则在当前页面中隐藏第二子元素。
具体的,本实施例中为当前页面中获取的各个指定元素中的第一子元素配置相应的观察者,通过该观察者实时监控页面滑动过程中各指定元素中的第一子元素的具体展示位置,此时存在某个指定元素中的第一子元素当前在视口中展示;也存在其他指定元素中的第一子元素在页面滑动过程中,还未滑至页面视口中,也就是该第一子元素未在视口展示。此时可以确定该第一子元素满足预设的分类对象中所基于页面中各个元素所处的不同特征进行分类时的另一特征依据,也就是元素未在视口的特征,从而触发分类对象中预设的元素未在视口时对应的另一分类规则,并响应该另一分类规则,在当前页面中隐藏与该第一子元素对应的第二子元素,使第二子元素在此时隐藏在第一子元素后,在当前页面中不再显示。
具体的,在确定第一子元素未在视口展示时,通过将与该第一子元素对应的第二子元素移动一定的位置,使该第二子元素与对应的第一子元素的位置重叠,并将该第二子元素的样式设置为在该第一子元素的下一层中进行隐藏。此时可以保证在页面滑动过程中,当前页面中仅展示在视口的指定元素所添加的滑动效果,在指定元素滑出视口时,直接将该添加的滑动效果隐藏,从而展示当前在视口的另一指定元素添加的滑动效果,简化了为各指定元素添加滑动效果的软件操作,提高了页面中滑动效果展示的流畅性。
图2示出了本公开实施例提供的另一种页面展示的方法的流程图,本实施例在上述实施例提供的各个可选方案的基础上进行优化。具体的,本实施对于上述实施例提供的各步骤中如何获取指定元素以及如何弹出或隐藏第二子元素的具体过程进行详细的介绍。
可选的,如图2所示,本实施例中的方法可以包括如下步骤:
S210,在预先构建的分类对象库中查找对应的视口对象。
其中,分类对象库中包括在需要对当前页面中处于不同特征下的各个元素进行不同的样式操作时,用户针对元素的各个不同特征而预先设定的多种分类对象,以在后续可以直接根据该分类对象对当前页面中的各个元素进行分类,并对同一特征中的各元素响应匹配的样式操作处理。具体的,本实施例中的分类对象库可以是预设的CSS伪类库,包括针对元素的各个不同特征的多种CSS伪类。如若某一CSS伪类为应用于页面中有焦点的元素,此时可以为页面中有焦点的元素设置特殊的样式;如HTML网页中一个有文本输入焦点的输入框,则会对应匹配一个文本输入光标;而页面中其他没有焦点的元素则不存在对应的文本输入光标。
具体的,本实施例中主要针对页面滑动过程中需要添加对应的滑动效果,以展示给用户的情况中,主要是针对元素在视口展示时的效果显示样式,因此可以根据当前页面中的元素是否在视口来设定匹配的元素样式,此时用户根据样式需求预先在分类对象库中设定对应的视口对象,该视口对象为在视口和未在视口的元素预先设定不同的滑动效果的展示样式;也就是在CSS伪类库中设定对应的视口伪类,通过该视口伪类为在视口和未在视口的元素设定不同的滑动效果。可选的,在页面滑动过程中,针对为用户展示的不同滑动效果,首先在预先构建的CSS伪类库中查找出用户设定的视口伪类,以根据该视口伪类中设定的不同视口特征的元素展示样式,在页面滑动过程中为用户展示对应滑动效果。
S220,获取当前页面中与视口对象的标识匹配的至少一个指定元素。
具体的,在预先构建的分类对象库,也就是CSS伪类库中查找到对应的视口对象时,由于当前页面中存在多个元素,但并不是每个元素在页面滑动过程中都需要添加对应的滑动效果,因此在设定视口对象时,会为该视口对象指定当前页面中匹配的元素,使该视口对象仅定义该指定元素在不同视口特征下的显示样式。具体的,以CSS伪类库中设定多种CSS伪类为例,本实施例中在CSS伪类库中查找到视口伪类时,首先确定该视口伪类的标识,该标识可以是视口伪类的名称等在CSS伪类库中能够唯一区分出视口伪类的标志;并根据该视口伪类的标识获取当前页面中指定的能够应用该视口伪类中设定的显示样式的至少一个指定元素,该指定元素中包括第一子元素和第二子元素两种。
S230,判断指定元素中的第一子元素是否在视口展示,若是,执行S240;若否,执行S250。
可选的,在根据视口对象的标识获取到匹配的至少一个指定元素时,为了根据该视口对象中设定的在不同视口特征下的显示样式,在视口显示对应的滑动效果,首先需要判断获取的各个指定元素中第一子元素当前是否在视口展示,从而确定该指定元素中的第二子元素是否需要弹出显示。
S240,获取视口对象下预设的弹出规则,并根据弹出规则在当前页面中弹出第二子元素。
具体的,在设定视口对象时会为不同的视口特征分别匹配对应的元素显示样式,视口对象为元素在视口展示时设定匹配的弹出规则,该弹出规则能够确保元素在视口时弹出为该元素添加的对应的滑动效果,也就是本实施例中的第二子元素;视口对象为元素未在视口时设定匹配的隐藏规则,该隐藏规则能够确保元素未在视口时隐藏为该元素添加的对应的滑动效果,也就是本实施例中的第二子元素。
具体的,本实施例中视口对象为对应的视口伪类时,此时设定元素在视口展示时匹配的弹出规则为具体的CSS弹出规则;设定元素未在视口时匹配的隐藏规则为具体的CSS隐藏规则。可选的,当确定指定元素中的第一子元素在视口展示时,可以获取该视口伪类中为在视口的元素预设的CSS弹出规则,响应于该CSS弹出规则,在当前页面中弹出与该指定元素中的第一子元素对应的第二子元素,使第二子元素能够在此时显示在当前页面的视口中,并展示给用户;也就是在视口中弹出为该指定元素在页面滑动过程中添加的滑动效果,从而将该滑动效果展示给用户。
S250,获取视口对象下预设的隐藏规则,并根据隐藏规则在当前页面中隐藏第二子元素。
具体的,当确定指定元素中的第一子元素未在视口展示时,可以获取该视口对象为未在视口的元素预设的隐藏规则,并响应于该隐藏规则,也就是获取视口伪类为未在视口的元素预设的CSS隐藏规则,并响应于该CSS隐藏规则,在当前页面中将与该指定元素中的第一子元素对应的第二子元素移动一定位置,使该第二子元素与对应的第一子元素在当前页面中的位置重叠,并将第二子元素的样式设为隐藏在第一子元素的下一层中;从而在页面滑动过程中,可以在当前页面中仅展示当前在视口的指定元素所添加的滑动效果,在该指定元素滑出视口时,直接将该添加的滑动效果隐藏,并展示此时滑动到视口的另一指定元素对应添加的滑动效果,简化了为各指定元素添加滑动效果的软件操作,提高了页面中滑动效果展示的流畅性。
本公开实施例提供的技术方案,通过在页面中预先配置对应的分类对象,并根据该分类对象确定页面中对应的指定元素,当指定元素中的第一子元素在视口展示时,弹出对应的第二子元素,从而实现页面滑动中各第二子元素在视口的相应展示,无需采用JavaScript语言来同时监听各个指定元素,解决了现有技术中内存占用大、页面滑动卡顿的问题,简化了为各指定元素添加滑动效果的软件操作,提高了页面中滑动效果展示的流畅性。
图3示出了本公开实施例提供的一种页面滑动展示的界面示意图。本实施例主要通过在具体场景下的页面展示,对本实施例中的页面展示的方法进行进一步的说明。具体的,本实施例以世界杯比赛中各项比赛对应的具体比赛结果和添加的明星头像效果为例,其中,比赛结果为第一子元素,在页面滑动过程中能够一直显示;明星头像为第二子元素,在页面滑动过程中仅在视口显示;此时各项比赛中的比赛结果和明星头像共同组成对应的指定元素,每一项比赛均对应一个指定元素。由于在页面滑动过程中仅为世界杯比赛添加对应的滑动效果,因此在预先设定对应CSS伪类中的视口伪类时,需要将该视口伪类的标识与各项比赛对应的指定元素建立对应的匹配关系。
可选的,在页面滑动过程中,首先根据预设的视口伪类的标识获取当前页面中各项比赛对应的指定元素,并确定各个指定元素中包括的比赛结果和明星头像,如图3中的比赛结果A和对应的明星头像A,以及比赛结果B和明星头像B。此时对各个指定元素中的比赛结果A和比赛结果B在当前页面中的展示位置进行判断,通过分别为比赛结果A和比赛结果B设置对应观察者,返回比赛结果A和比赛结果B在页面滑动过程中是否在视口展示的监控结果。
进一步的,如图3中所示,刚开始比赛结果A在视口展示,比赛结果B未在视口展示,此时各项比赛分别响应视口伪类中预先设定的元素在视口时的CSS弹出规则,以及元素未在视口时的CSS隐藏规则,从而在当前页面中弹出比赛结果A对应的明星头像A,从而将明星头像A展示在视口中;并在当前页面中隐藏比赛结果B对应的明星头像B,使视口中仅显示明星头像A,从而为用户展示对应的滑动效果。
可选的,在页面滑动后,比赛结果A滑出视口而未在视口展示,比赛结果B滑入视口而展示在视口,此时各项比赛再次分别响应视口伪类中预先设定的元素在视口时的CSS弹出规则,以及元素未在视口时的CSS隐藏规则,在当前页面中隐藏比赛结果A对应的明星头像A,并在当前页面中弹出比赛结果B对应的明星头像B,从而将明星头像B展示在视口中,此时能够实现页面滑动过程中为用户展示对应的滑动效果。
需要说明的是,页面左右滑动仅是本实施例提供的一种页面滑动示例,页面也可以在界面中上下滑动,本实施例对此不作限定;同时本实施例在比赛结果的上弹出对应的明星头像,显示对应的滑动效果,也可以在下方弹出对应的明星头像,本实施例对于滑动效果的具体显示位置不作限定,可以由用户根据界面美观性等各方面的需求自行设定。
本公开实施例提供的技术方案,通过在页面中预先配置对应的CSS伪类,并根据该CSS伪类确定页面中对应的指定元素,当指定元素中的第一子元素在视口展示时,弹出对应的第二子元素,从而实现页面滑动中各第二子元素在视口的相应展示,无需采用JavaScript语言来同时监听各个指定元素,解决了现有技术中内存占用大、页面滑动卡顿的问题,简化了为各指定元素添加滑动效果的软件操作,提高了页面中滑动效果展示的流畅性。
图4示出了本公开实施例提供的一种页面展示的装置的结构示意图,本公开实施例可适用于在页面滑动过程中添加对应滑动效果的情况中,该装置可以通过软件和/或硬件来实现,并集成在执行本方法的设备中。如图4所示,本公开实施例中多页面展示的装置,可以包括:
元素获取模块410,用于根据当前页面中预设的分类对象获取至少一个指定元素,该指定元素包括第一子元素和第二子元素;
弹出模块420,用于若第一子元素在视口展示,则在当前页面中弹出第二子元素。
本公开实施例提供的技术方案,通过在页面中预先配置对应的分类对象,并根据该分类对象确定页面中对应的指定元素,当指定元素中的第一子元素在视口展示时,弹出对应的第二子元素,从而实现页面滑动中各第二子元素在视口的相应展示,无需采用JavaScript语言来同时监听各个指定元素,解决了现有技术中内存占用大、页面滑动卡顿的问题,简化了为各指定元素添加滑动效果的软件操作,提高了页面中滑动效果展示的流畅性。
进一步的,上述页面展示的装置,还可以包括:
隐藏模块,用于若第一子元素未在视口展示,则在当前页面中隐藏第二子元素。
进一步的,上述元素获取模块,可以包括:
视口对象查找单元,用于在预先构建的分类对象库中查找对应的视口对象;
元素获取单元,用于获取当前页面中与视口对象的标识匹配的至少一个指定元素。
进一步的,上述弹出模块420,可以具体用于:
若第一子元素在视口展示,则获取视口对象下预设的弹出规则;根据弹出规则在当前页面中弹出第二子元素。
进一步的,上述隐藏模块,可以具体用于:
若第一子元素未在视口展示,则获取视口对象下预设的隐藏规则;根据隐藏规则在当前页面中隐藏第二子元素。
本公开实施例提供的页面展示的装置,与上述实施例提供的页面展示的方法属于同一发明构思,未在本公开实施例中详尽描述的技术细节可参见上述实施例,并且本公开实施例与上述实施例具有相同的有益效果。
下面参考图5,其示出了适于用来实现本公开实施例的设备500的结构示意图。本公开实施例中的设备可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。图5示出的设备仅仅是一个示例,不应对本公开实施例的功能和使用范围带来任何限制。
如图5所示,设备500可以包括处理装置(例如中央处理器、图形处理器等)501,其可以根据存储在只读存储器(ROM)502中的程序或者从存储装置508加载到随机访问存储器(RAM)503中的程序而执行各种适当的动作和处理。在RAM 503中,还存储有设备500操作所需的各种程序和数据。处理装置501、ROM 502以及RAM 503通过总线504彼此相连。输入/输出(I/O)接口505也连接至总线504。
通常,以下装置可以连接至I/O接口505:包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置506;包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置507;包括例如磁带、硬盘等的存储装置508;以及通信装置509。通信装置509可以允许设备500与其他设备进行无线或有线通信以交换数据。虽然图5示出了具有各种装置的设备500,但是应理解的是,并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。
特别地,根据本公开的实施例,上文参考流程图描述的过程可以被实现为计算机软件程序。例如,本公开的实施例包括一种计算机程序产品,其包括承载在计算机可读介质上的计算机程序,该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中,该计算机程序可以通过通信装置509从网络上被下载和安装,或者从存储装置508被安装,或者从ROM 502被安装。在该计算机程序被处理装置501执行时,执行本公开实施例的方法中限定的上述功能。
需要说明的是,本公开上述的计算机可读介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件,或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于:具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中,计算机可读存储介质可以是任何包含或存储程序的有形介质,该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中,计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号,其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式,包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质,该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输,包括但不限于:电线、光缆、RF(射频)等等,或者上述的任意合适的组合。
上述计算机可读介质可以是上述设备中所包含的;也可以是单独存在,而未装配入该设备中。
上述计算机可读介质承载有一个或者多个程序,当上述一个或者多个程序被该设备执行时,使得该设备:根据当前页面中预设的分类对象获取至少一个指定元素,该指定元素包括第一子元素和第二子元素;若第一子元素在视口展示,则在当前页面中弹出第二子元素。
可以以一种或多种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码,上述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++,还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中,远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机,或者,可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
附图中的流程图和框图,图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上,流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分,该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意,在有些作为替换的实现中,方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如,两个接连地表示的方框实际上可以基本并行地执行,它们有时也可以按相反的顺序执行,这依所涉及的功能而定。也要注意的是,框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合,可以用执行规定的功能或操作的专用的基于硬件的系统来实现,或者可以用专用硬件与计算机指令的组合来实现。
描述于本公开实施例中所涉及到的单元可以通过软件的方式实现,也可以通过硬件的方式来实现。其中,单元的名称在某种情况下并不构成对该单元本身的限定。
以上描述仅为本公开的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解,本公开中所涉及的公开范围,并不限于上述技术特征的特定组合而成的技术方案,同时也应涵盖在不脱离上述公开构思的情况下,由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本公开中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。

Claims (10)

1.一种页面展示的方法,其特征在于,包括:
根据当前页面中预设的分类对象获取至少一个指定元素,所述指定元素包括第一子元素和第二子元素;
若第一子元素在视口展示,则在当前页面中弹出所述第二子元素。
2.根据权利要求1所述的方法,其特征在于,还包括:
若第一子元素未在视口展示,则在当前页面中隐藏所述第二子元素。
3.根据权利要求2所述的方法,其特征在于,根据当前页面中预设的分类对象获取至少一个指定元素,包括:
在预先构建的分类对象库中查找对应的视口对象;
获取当前页面中与所述视口对象的标识匹配的至少一个指定元素。
4.根据权利要求3所述的方法,其特征在于,若第一子元素在视口展示,则在当前页面中弹出所述第二子元素,包括:
若第一子元素在视口展示,则获取所述视口对象下预设的弹出规则;
根据所述弹出规则在当前页面中弹出所述第二子元素。
5.根据权利要求3所述的方法,其特征在于,若第一子元素未在视口展示,则在当前页面中隐藏所述第二子元素,包括:
若第一子元素未在视口展示,则获取所述视口对象下预设的隐藏规则;
根据所述隐藏规则在当前页面中隐藏所述第二子元素。
6.一种页面展示的装置,其特征在于,包括:
元素获取模块,用于根据当前页面中预设的分类对象获取至少一个指定元素,所述指定元素包括第一子元素和第二子元素;
弹出模块,用于若第一子元素在视口展示,则在当前页面中弹出所述第二子元素。
7.根据权利要求6所述的装置,其特征在于,还包括:
隐藏模块,用于若第一子元素未在视口展示,则在当前页面中隐藏所述第二子元素。
8.根据权利要求7所述的装置,其特征在于,所述元素获取模块包括:
视口对象查找单元,用于在预先构建的分类对象库中查找对应的视口对象;
元素获取单元,用于获取当前页面中与所述视口对象的标识匹配的至少一个指定元素。
9.一种设备,其特征在于,所述设备包括:
一个或多个处理器;
存储器,用于存储一个或多个程序;
当所述一个或多个程序被所述一个或多个处理器执行,使得所述一个或多个处理器实现如权利要求1-5中任一所述的页面展示的方法。
10.一种可读介质,其上存储有计算机程序,其特征在于,该程序被处理器执行时实现如权利要求1-5中任一所述的页面展示的方法。
CN201811401680.2A 2018-11-22 2018-11-22 一种页面展示的方法、装置、设备和可读介质 Active CN111209499B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201811401680.2A CN111209499B (zh) 2018-11-22 2018-11-22 一种页面展示的方法、装置、设备和可读介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201811401680.2A CN111209499B (zh) 2018-11-22 2018-11-22 一种页面展示的方法、装置、设备和可读介质

Publications (2)

Publication Number Publication Date
CN111209499A true CN111209499A (zh) 2020-05-29
CN111209499B CN111209499B (zh) 2021-10-29

Family

ID=70784041

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201811401680.2A Active CN111209499B (zh) 2018-11-22 2018-11-22 一种页面展示的方法、装置、设备和可读介质

Country Status (1)

Country Link
CN (1) CN111209499B (zh)

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102663056A (zh) * 2012-03-29 2012-09-12 奇智软件(北京)有限公司 一种图片元素显示方法和装置
CN102999535A (zh) * 2011-09-19 2013-03-27 阿里巴巴集团控股有限公司 信息显示方法和信息获取方法、客户端和服务器
CN104360882A (zh) * 2014-11-07 2015-02-18 北京奇虎科技有限公司 一种浏览器中对网页中图片进行显示方法和装置
CN104881478A (zh) * 2015-06-02 2015-09-02 吴小宇 一种网页页面定位识别系统及定位识别方法

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN102999535A (zh) * 2011-09-19 2013-03-27 阿里巴巴集团控股有限公司 信息显示方法和信息获取方法、客户端和服务器
CN102663056A (zh) * 2012-03-29 2012-09-12 奇智软件(北京)有限公司 一种图片元素显示方法和装置
CN104360882A (zh) * 2014-11-07 2015-02-18 北京奇虎科技有限公司 一种浏览器中对网页中图片进行显示方法和装置
CN104881478A (zh) * 2015-06-02 2015-09-02 吴小宇 一种网页页面定位识别系统及定位识别方法

Non-Patent Citations (1)

* Cited by examiner, † Cited by third party
Title
赵颖等: "《HTML5开发技术》", 30 April 2018 *

Also Published As

Publication number Publication date
CN111209499B (zh) 2021-10-29

Similar Documents

Publication Publication Date Title
US20190303219A1 (en) Embedding an interface of one application into an interface of another application
CN111459586B (zh) 远程协助方法、装置、存储介质及终端
CN110865734B (zh) 目标对象显示方法、装置、电子设备和计算机可读介质
CN109389365B (zh) 多人协作式文档的处理方法、装置和电子设备
CN110619099B (zh) 一种评论内容显示方法、装置、设备及存储介质
CN111339418A (zh) 页面展示方法、装置、电子设备和计算机可读介质
EP4459450A1 (en) Information flow display method and apparatus, and device, storage medium and program
MX2014003452A (es) Aparato de visualizacion para proveer informacion de recomendacion y metodo del mismo.
CN111240793B (zh) cell预渲染的方法、装置、电子设备以及计算机可读介质
CN116048337A (zh) 一种页面展示方法、装置、设备和存储介质
CN114416945A (zh) 一种词云图显示方法、装置、设备及介质
CN111353296B (zh) 文章处理方法、装置、电子设备及计算机可读存储介质
CN111209503B (zh) 网页中弹窗的处理方法、装置、电子设备、及存储介质
CN110069186B (zh) 显示应用的操作界面的方法和设备
CN113641921A (zh) 一种页面展示方法、装置和用于页面展示的装置
CN112492399B (zh) 信息显示方法、装置及电子设备
CN111209499B (zh) 一种页面展示的方法、装置、设备和可读介质
CN110221892B (zh) 一种滚动窗口信息的方法、装置、介质和电子设备
CN109299416B (zh) 一种网页处理方法、装置、电子设备及存储介质
AU2023327991A1 (en) Live-streaming video processing method and apparatus, and device and medium
CN111209156B (zh) 一种页面元素的检测方法、装置、设备和可读介质
CN112672182B (zh) 直播界面展示方法、装置、电子设备和计算机可读介质
EP4207775A1 (en) Method and apparatus for determining object addition mode, electronic device, and medium
CN117354548A (zh) 一种评论展示方法、装置、电子设备、计算机可读介质
CN111274513B (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