CN113126867B - 浏览器控制方法、装置、浏览器、终端及存储介质 - Google Patents
浏览器控制方法、装置、浏览器、终端及存储介质 Download PDFInfo
- Publication number
- CN113126867B CN113126867B CN202110529518.4A CN202110529518A CN113126867B CN 113126867 B CN113126867 B CN 113126867B CN 202110529518 A CN202110529518 A CN 202110529518A CN 113126867 B CN113126867 B CN 113126867B
- Authority
- CN
- China
- Prior art keywords
- information data
- list
- browser
- information
- sliding
- 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
-
- 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
- G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Databases & Information Systems (AREA)
- Human Computer Interaction (AREA)
- Data Mining & Analysis (AREA)
- User Interface Of Digital Computer (AREA)
Abstract
本申请公开了浏览器控制方法、装置、浏览器、终端及存储介质,该方法包括:响应作用于浏览器的操作界面上显示的第一资讯数据的选择操作,获取第一资讯数据对应的资讯数据信息流,将资讯数据信息流中所有含有图片的资讯数据确定为浏览器对应的目标数据源;对目标数据源进行初始化处理,以生成浏览器对应的列表视图结构,确定第一资讯数据在列表视图结构中的位置;根据选择操作控制浏览器从操作界面切换至预览界面,在预览界面上显示第一资讯数据;响应作用于预览界面的第一滑动操作,根据第一滑动操作控制预览界面上的显示内容从第一资讯数据切换为第二资讯数据,第二资讯数据与第一资讯数据在列表视图结构中的位置相邻。
Description
技术领域
本申请涉及计算机技术领域,具体涉及一种浏览器控制方法、装置、浏览器、终端及存储介质。
背景技术
当前主流的资讯类应用程序,如一些图片浏览器,由于均在同一信息流下,当用户点击某一信息流图片时,只捕获了信息流列表中的一个内容资讯实体,由于该图片浏览器为单列表结构,该图片浏览器初始化的数据源为:当前内容资讯实体所携带的图片数组。因此,用户只能浏览当前内容资讯实体对应的图文内容,如果用户要查看信息流列表中的其他图文动态,需要先退出当前的图片浏览器,回到信息流展示列表去点击下一个图文动态。此时用户触达下一条图文动态的路径较长,增加了用户的操作负担,不利于图文内容的消费提升。
因此,现有技术需要改进。
发明内容
本申请实施例提供一种浏览器控制方法、装置、浏览器、终端及存储介质,可以减少用户触达下一条图文内容的操作路径。
本申请实施例提供一种浏览器控制方法,包括:
响应作用于浏览器的操作界面上显示的第一资讯数据的选择操作,获取所述第一资讯数据对应的资讯数据信息流,并将所述资讯数据信息流中所有含有图片的资讯数据确定为所述浏览器对应的目标数据源;
对所述目标数据源进行初始化处理,以生成所述浏览器对应的列表视图结构,并确定所述第一资讯数据在所述列表视图结构中的位置;
根据所述选择操作控制所述浏览器从所述操作界面切换至预览界面,并在所述预览界面上显示所述第一资讯数据;
响应作用于所述预览界面的第一滑动操作,根据所述第一滑动操作控制所述预览界面上的显示内容从所述第一资讯数据切换为第二资讯数据,所述第二资讯数据在所述列表视图结构中的位置与所述第一资讯数据在所述列表视图结构中的位置相邻。
在一个可选的实施例中,所述将所述资讯数据信息流中所有含有图片的资讯数据确定为所述浏览器对应的目标数据源,包括:
获取所述资讯数据信息流的信息列表,通过遍历所述信息列表中的信息子项输出所述信息子项对应的资讯数据;
判断所述信息子项对应的资讯数据是否为图片类型;
若所述信息子项对应的资讯数据为图片类型,则提取所述信息子项对应的资讯数据作为所述目标数据源。
在一个可选的实施例中,所述列表视图结构由具备多个列表子项的列表容器组成,所述多个列表子项中的每一个列表子项对应所述目标数据源中的每一条资讯数据,所述对所述目标数据源进行初始化处理,以生成所述浏览器对应的列表视图结构,包括:
在所述列表容器中设置第一列表,所述第一列表绑定所述目标数据源;
根据所述目标数据源中的每一条资讯数据对所述列表子项进行渲染处理,使所述列表子项与所述目标数据源中的每一条资讯数据一一对应绑定。
在一个可选的实施例中,在所述列表容器中设置第二列表,所述第二列表由多个第二列表子项组成,所述对所述目标数据源进行初始化处理,以生成所述浏览器对应的列表视图结构,包括:
根据所述列表子项绑定的资讯数据中的每一个图片数据对所述第二列表子项进行渲染处理,使所述第二列表子项与所述列表子项绑定的资讯数据中的每一个图片数据一一对应绑定。
在一个可选的实施例中,所述浏览器设有列表视图控制器,所述列表视图控制器包括集合视图与视图列表单元,所述对所述目标数据源进行初始化处理,以生成所述浏览器对应的列表视图结构,包括:
将所述目标数据源承载在所述集合视图中进行显示;
根据所述目标数据源中的每一条资讯数据对所述视图列表单元进行渲染处理,使所述视图列表单元与所述目标数据源中的每一条资讯数据一一对应绑定,并基于所述目标数据源的每一条资讯数据对所述视图列表单元进行初始化处理。
在一个可选的实施例中,所述列表视图控制器还包括可视层级,所述基于所述目标数据源的每一条资讯数据对所述视图列表单元进行初始化处理,包括:
将所述视图列表单元对应的视图添加到所述可视层级。
在一个可选的实施例中,所述根据所述第一滑动操作控制所述预览界面上的显示内容从所述第一资讯数据切换为第二资讯数据,包括:
获取所述第一滑动操作对应的第一滑动偏移量,并根据所述第一滑动偏移量,控制所述预览界面上的显示内容从所述第一资讯数据切换为第二资讯数据。
在一个可选的实施例中,在所述根据所述第一滑动操作控制所述预览界面上的显示内容从所述第一资讯数据切换为第二资讯数据之前,还包括:
确定所述第一滑动操作对应的第一列表子项,根据所述第一列表子项对应的横坐标、所述第一滑动偏移量与终端屏幕宽度值计算第一图片缩放比例;
根据所述第一图片缩放比例计算旋转角度;
所述根据所述第一滑动偏移量,控制所述预览界面上的显示内容从所述第一资讯数据切换为第二资讯数据,包括:
根据所述第一图片缩放比例和所述旋转角度,控制所述预览界面上的显示内容从所述第一资讯数据切换为第二资讯数据。
在一个可选的实施例中,所述获取所述第一滑动操作对应的第一滑动偏移量,包括:
获取所述第一滑动操作的起始横坐标与终点横坐标,并将所述起始横坐标与所述终点横坐标的差值确定为所述第一滑动偏移量。
在一个可选的实施例中,所述第一资讯数据包括多个图片,所述响应作用于所述预览界面的第一滑动操作,包括:
所述作用于所述预览界面的第一滑动操作,为作用于所述第一资讯数据的多个图片中的首张图片、且滑动方向向右的滑动操作;或者
所述作用于所述预览界面的第一滑动操作,为作用于所述第一资讯数据的多个图片中的末张图片、且所述滑动方向向左的滑动操作。
在一个可选的实施例中,所述第一资讯数据包括单个图片,所述响应作用于所述预览界面的第一滑动操作,包括:
所述作用于所述预览界面的第一滑动操作,为作用于所述第一资讯数据的单个图片、且滑动方向向右的滑动操作;或者
所述作用于所述预览界面的第一滑动操作,为作用于所述第一资讯数据的单个图片、且所述滑动方向向左的滑动操作。
在一个可选的实施例中,还包括:
响应作用于所述预览界面的第二滑动操作,获取所述第二滑动操作对应的第二滑动偏移量,并根据所述第二滑动偏移量,控制所述浏览器退出所述预览界面。
在一个可选的实施例中,根据所述第二滑动偏移量,控制所述浏览器退出所述预览界面,包括:
基于所述第二滑动偏移量与终端屏幕高度值计算退出进度,并基于所述退出进度计算背景透明度;
基于所述第二滑动偏移量、所述终端屏幕高度值和预设偏移量计算第二图片缩放比例。
在一个可选的实施例中,在所述基于所述第二滑动偏移量与终端屏幕高度值计算退出进度之后,还包括:
基于所述退出进度修改顶部展示控件与底部展示控件相对于终端屏幕下边界的纵坐标。
在一个可选的实施例中,所述基于所述退出进度修改顶部展示控件与底部展示控件相对于终端屏幕下边界的纵坐标,包括:
所述顶部展示控件的纵坐标根据所述退出进度递减,所述底部展示控件的纵坐标根据所述退出进度递增。
在一个可选的实施例中,在所述根据所述第二滑动偏移量,控制所述浏览器退出所述预览界面之前,还包括:
判断所述第二滑动偏移量是否满足所述预设偏移量;
若所述第二滑动偏移量满足所述预设偏移量,则根据所述第二滑动偏移量,控制所述浏览器退出所述预览界面。
在一个可选的实施例中,所述获取所述第二滑动操作对应的第二滑动偏移量,包括:
对所述操作界面进行手势监听,以识别所述第二滑动操作;
获取所述第二滑动操作相对于终端屏幕下边界的起始纵坐标与终点纵坐标,计算所述起始纵坐标与所述终点纵坐标的差值为所述第二滑动偏移量。
本申请实施例还提供一种浏览器控制装置,包括:
获取单元,用于响应作用于浏览器的操作界面上显示的第一资讯数据的选择操作,获取所述第一资讯数据对应的资讯数据信息流,并将所述资讯数据信息流中所有含有图片的资讯数据确定为所述浏览器对应的目标数据源;
设置单元,用于对所述目标数据源进行初始化处理,以生成所述浏览器对应的列表视图结构,并确定所述第一资讯数据在所述列表视图结构中的位置;
切换单元,用于根据所述选择操作控制所述浏览器从所述操作界面切换至预览界面,并在所述预览界面上显示所述第一资讯数据;
计算单元,用于响应作用于所述预览界面的第一滑动操作,根据所述第一滑动操作控制所述预览界面上的显示内容从所述第一资讯数据切换为第二资讯数据,所述第二资讯数据在所述列表视图结构中的位置与所述第一资讯数据在所述列表视图结构中的位置相邻。
本申请实施例还提供一种浏览器,包括:
获取单元,用于响应作用于浏览器的操作界面上显示的第一资讯数据的选择操作,获取所述第一资讯数据对应的资讯数据信息流,并将所述资讯数据信息流中所有含有图片的资讯数据确定为所述浏览器对应的目标数据源;
设置单元,用于对所述目标数据源进行初始化处理,以生成所述浏览器对应的列表视图结构,并确定所述第一资讯数据在所述列表视图结构中的位置;
切换单元,用于根据所述选择操作控制所述浏览器从所述操作界面切换至预览界面,并在所述预览界面上显示所述第一资讯数据;
计算单元,用于响应作用于所述预览界面的第一滑动操作,根据所述第一滑动偏移操作控制所述预览界面上的显示内容从所述第一资讯数据切换为第二资讯数据,所述第二资讯数据在所述列表视图结构中的位置与所述第一资讯数据在所述列表视图结构中的位置相邻。
本申请实施例还提供了一种终端,包括存储器,处理器及存储在存储器上并可在处理器上运行的计算机程序,其中,处理器执行计算机程序时实现如上述浏览器控制方法的步骤。
本申请实施例还提供了一种存储介质,其上存储有计算机程序,其中,计算机程序被处理器执行时实现如上述浏览器控制方法的步骤。
本申请实施例提供了一种浏览器控制方法、装置、浏览器、终端及存储介质,该浏览器控制方法包括:响应作用于浏览器的操作界面上显示的第一资讯数据的选择操作,获取第一资讯数据对应的资讯数据信息流,并将资讯数据信息流中所有含有图片的资讯数据确定为浏览器对应的目标数据源;对目标数据源进行初始化处理,以生成浏览器对应的列表视图结构,并确定第一资讯数据在列表视图结构中的位置;根据选择操作控制浏览器从操作界面切换至预览界面,并在预览界面上显示第一资讯数据;响应作用于预览界面的第一滑动操作,根据第一滑动操作控制预览界面上的显示内容从第一资讯数据切换为第二资讯数据,第二资讯数据在列表视图结构中的位置与第一资讯数据在列表视图结构中的位置相邻。由此,本申请实施例筛选出当前信息流中的含图片内容的资讯数据,基于对预览界面当前显示的资讯数据进行相应滑动操作,以切换至其他资讯数据并进行显示,减少了用户触达下一条图文内容的操作路径,减少了用户的操作负担,有利于图文内容的消费提升。
附图说明
为了更清楚地说明本申请实施例中的技术方案,下面将对实施例描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本发明的一些实施例,对于本领域技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1是本申请实施例提供的一种浏览器控制方法的流程图;
图2是本申请实施例提供的一种浏览器的双重列表视图结构的示意图;
图3是本申请实施例提供的一种浏览器的视图代码结构图的示意图;
图4是本申请实施例提供的一种转换效果示意图;
图5是本申请实施例提供的一种转换实现流程图的示意图;
图6是本申请实施例提供的一种拖拽渐隐退出动画的示意图;
图7是本申请实施例提供的一种退出实现流程图的示意图;
图8是本申请实施例提供的一种沉浸式图片浏览器的实现思路的示意图;
图9是本申请实施例提供的一种浏览器控制结构的示意图;
图10是本申请实施例提供的一种浏览器的结构示意图;
图11是本申请实施例提供的一种服务器的结构示意图;
图12是本申请实施例提供的一种终端的结构示意图。
具体实施方式
下面将结合本申请实施例中的附图,对本申请实施例中的技术方案进行清楚、完整地描述,显然,所描述的实施例仅仅是本申请一部分实施例,而不是全部的实施例。基于本申请中的实施例,本领域技术人员在没有作出创造性劳动前提下所获得的所有其他实施例,都属于本申请保护的范围。
本申请实施例提供一种浏览器控制方法、装置、浏览器、终端及存储介质。具体地,本实施例提供适用于浏览器控制装置的浏览器控制方法,该浏览器控制装置可以集成在计算机设备中。
该计算机设备可以为终端等设备,例如可以为手机、平板电脑、笔记本电脑、台式电脑等。
该计算机设备还可以为服务器等设备,该服务器可以是独立的物理服务器,也可以是多个物理服务器构成的服务器集群或者分布式系统,还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务、域名服务、安全服务、CDN、以及大数据和人工智能平台等基础云计算服务的云服务器,但并不局限于此。
以下分别进行详细说明。需说明的是,以下实施例的描述顺序不作为对实施例优选顺序的限定。
本申请实施例将从浏览器控制装置的角度进行描述,该浏览器控制装置具体可以集成在计算机设备中。
本申请实施例提供了一种浏览器控制方法,本申请实施例的浏览器控制方法应用于终端,该终端部署有用于浏览器控制的应用,如图1所示,本实施例的浏览器控制方法的流程可以如下:
101、响应作用于浏览器的操作界面上显示的第一资讯数据的选择操作,获取所述第一资讯数据对应的资讯数据信息流,并将所述资讯数据信息流中所有含有图片的资讯数据确定为所述浏览器对应的目标数据源。
本申请实施例中,浏览器应用一种浏览器控制方法,用户在进入浏览器查看资讯内容时,不需要额外请求服务端数据,用户在浏览器的操作界面上进行操作,选择用户当前想要查看的资讯数据,以该资讯数据作为第一资讯数据(第一资讯数据只是自定义,不代表该资讯数据排列在操作界面上的第一)。终端响应作用于该浏览器的操作界面上显示的第一资讯数据的选择操作,此时终端获取该第一资讯数据对应的资讯数据信息流。信息流指在空间和时间上向同一方向运动过程中的一组信息,具有共同的信息源和信息的接收者,即由一个信息源向另一个单位传递的全部信息的集合。本申请实施例中的资讯数据信息流指该浏览器中的全部信息,例如可以包括图文内容信息,图片内容信息和文字内容信息等等。
其中,在获取第一资讯数据对应的资讯数据信息流后,终端获取该第一资讯数据对应的资讯数据信息流的信息列表,通过遍历该信息列表中的信息子项输出该信息子项对应的资讯数据。随后,判断该信息子项对应的资讯数据是否为图片类型;若该信息子项对应的资讯数据为图片类型,则提取该信息子项对应的资讯数据作为目标数据源。目标数据源为该浏览器所显示的资讯数据的来源,即用户进入该浏览器可选择查看的所有资讯数据。
其中,第一资讯数据可以是浏览器的操作界面上所显示的某一图文内容中的某张图片,在点击该图片时,可以执行析构逻辑,将该图片对应的信息流展示的所有图片类型动态,都放置于构建的数组中,以此为该浏览器的目标数据源对该浏览器进行初始化。析构逻辑指提供了一个函数方法,用于遍历信息流列表中的子项,并且取出子项对应的内容数据,判断其类型是否为图文类型,是则提取数据放到数组中,作为浏览器的目标数据源。即本申请实施例提供了一种信息流内容的析构能力,可以筛选出当前信息流中的含图片媒体内容的动态数据。
可选的,在点击某一动态的单张图片时,获取该图片对应的信息流,通过信息流列表组件基类(例如GLFeedTableViewComponent)拓展数据遍历方法,取出列表组件内的所有展示组件,判断展示组件绑定的数据类型是否为包含图片的类型,将图片类型的数据指针存至变量数组即提取图片类型的数据放到数组中,返回该数组作为初始化图片浏览器的数组源,也即上述的目标数据源。
102、对所述目标数据源进行初始化处理,以生成所述浏览器对应的列表视图结构,并确定所述第一资讯数据在所述列表视图结构中的位置。
本申请实施例中,在终端获取浏览器的目标数据源后,对该目标数据源进行初始化处理,以生成浏览器对应的列表视图结构,并确定用户选择的第一资讯数据在该列表视图结构中对应的位置。
其中,该列表视图结构由列表容器组成,列表容器包括多个列表子项。在列表容器中设置第一列表,第一列表绑定获取的目标数据源;根据该目标数据源中的每一条资讯数据,对多个列表子项进行渲染处理,多个列表子项中的每一个列表子项对应该目标数据源中的每一条资讯数据,即,使列表子项与该目标数据源中的每一条资讯数据一一对应绑定。在列表容器中还设置第二列表,第二列表由多个第二列表子项组成,根据列表子项绑定的资讯数据中的每一个图片数据,对第二列表子项进行渲染处理,多个第二列表子项中的每一个第二列表子项对应列表子项绑定的资讯数据中的每一个图片数据,即,使第二列表子项与列表子项绑定的资讯数据中的每一个图片数据一一对应绑定。
可选的,图2为一种浏览器的双重列表视图结构示意图,如图3所示,浏览器视图容器包括大列表,浏览器视图容器也即上述的列表容器,大列表即上述的第一列表,其中大列表绑定析构数据源,可以根据数据源的资讯条数进行子项渲染。浏览器视图容器包括两个列表子项,每个列表子项也可认为是一个子项列表容器,每个列表子项分别绑定一个资讯实体,其中把列表子项绑定的资讯数据所携带的图片数组作为小列表的渲染数据源,小列表即上述的第二列表,对小列表进行渲染,使小列表的子项(即上述的第二列表子项)绑定单个媒体,即绑定具体的单个图片信息,单个媒体也即上述的列表子项绑定的资讯数据中的单个图片数据。其中第二列表子项设置单图控件,单图控件由多个信息模块组成,即图2中的小列表子项中具有单图控件,单图控件包括例如图片展示,用户信息和资讯文案这三个信息模块,即资讯文案以及用户信息是从小列表绑定的资讯实体中进行读取,本申请对信息模块的数量与信息模块分别对应的内容不作限制。其中,图2所示的单图控件中所包含的信息仅为本申请实施例的示例,可以根据用户需求增加或减少该信息,本申请不作限制。另外,本申请对列表子项的个数同样不作限制,可为2个、3个、4个等等。
其中,浏览器设有列表视图控制器,该列表视图控制器用于代码逻辑计算,实现列表视图结构,向列表容器传递数据,该列表视图控制器包括集合视图与视图列表单元,集合视图与第一列表对应,视图列表单元与列表子项对应。将获取的目标数据源承载在集合视图中进行显示;以目标数据源中的每一条资讯数据,对视图列表单元进行渲染,使视图列表单元与目标数据源中的每一条资讯数据一一对应绑定,并基于目标数据源的每一条资讯数据对视图列表单元进行初始化处理。列表视图控制器还包括可视层级,在进行初始化处理时,把视图列表单元对应的视图添加到该可视层级。此时,列表视图控制器具备了展示多条多图动态的能力,由原本的单动态浏览迭代为多动态浏览,增加了浏览器承载的内容量。
可选的,图3为一种浏览器的视图代码结构图,如图3所示,新建一个列表视图控制器,可以将列表视图控制器命名为
GLFeedLargeImageListViewController。列表视图控制器包括集合视图和视图列表单元(自定义的子项),将集合视图命名为UICollectionView,将视图列表单元命名为GLFeedLargeImageListContainCell,使用集合视图来承载目标数据源,即将目标数据源承载在集合视图中进行显示。通过对视图列表单元的渲染,每一个视图列表单元都绑定一个动态数据(目标数据源中的一条资讯数据),同时使用该数据为自身持有的单动态图片浏览器赋值,即使用单条资讯数据,去初始化第一列表的一个子项列表。在初始化过程中,将视图列表单元的视图添加到可视层级,即将图3中所示的largeImageVC.view(大图像视图)添加到GLFeedLargeImageListContainCell(大图像列表单元,即视图列表单元)上。其中,视图列表单元中也包括集合视图,以及图像单元(ImageCell)。
103、根据所述选择操作控制所述浏览器从所述操作界面切换至预览界面,并在所述预览界面上显示所述第一资讯数据。
在本申请实施例中,用户在浏览器的操作界面上进行选择操作后,终端根据该选择操作控制浏览器从操作界面切换至预览界面,在预览界面上显示选择操作对应的第一资讯数据,用户即可浏览第一资讯数据。
104、响应作用于所述预览界面的第一滑动操作,根据所述第一滑动操作控制所述预览界面上的显示内容从所述第一资讯数据切换为第二资讯数据,所述第二资讯数据在所述列表视图结构中的位置与所述第一资讯数据在所述列表视图结构中的位置相邻。
在本申请实施例中,进入预览界面后,当用户浏览完当前预览界面对应的第一资讯数据后,想要继续浏览下一条资讯时,用户对预览界面上显示的第一资讯数据进行与第一预设操作匹配的滑动操作,以该与第一预设操作匹配的滑动操作作为第一滑动操作。例如,该第一预设操作包括以下至少一种:
基于预览界面上显示的第一资讯数据的多个图片中的首张图片的向右滑动操作;
基于预览界面上显示的第一资讯数据的多个图片中的末张图片的向左滑动操作;
基于预览界面上显示的第一资讯数据的单个图片的向右滑动操作;
基于预览界面上显示的第一资讯数据的单个图片的向左滑动操作。
其中,终端响应作用于该预览界面的第一滑动操作,获取该第一滑动操作对应的第一滑动偏移量,即获取第一滑动操作对应的起始横坐标与终点横坐标,并将起始横坐标与终点横坐标的差值确定为该第一滑动偏移量。然后,确定第一滑动操作对应的第一列表子项,根据第一列表子项对应的横坐标、第一滑动偏移量与终端屏幕宽度值计算第一图片缩放比例;再根据第一图片缩放比例计算旋转角度。其中,第一列表子项对应的横坐标=n(第几个子项,索引从0开始)*终端屏幕宽度;第一图片缩放比例=(第一列表子项对应的横坐标-(滑动偏移量+0.5*终端屏幕宽度))/终端屏幕宽度;设定最大旋转角度,旋转角度=最大旋转角度*第一图片缩放比例。最大旋转角度可以设定为20度,本申请对最大旋转角度不作限制。
在计算出第一图片缩放比例和旋转角度后,终端基于第一图片缩放比例和旋转角度控制当前预览界面上的显示内容从第一资讯数据切换为第二资讯数据,实现了第一资讯数据与第二资讯数据切换时的3D切换效果,增强了沉浸感;其中第二资讯数据即为下一条资讯数据,也即第二资讯数据在列表视图结构中的位置与第一资讯数据在列表视图结构中的位置相邻。
可选的,在一些实施例中,终端响应作用于该预览界面的第一滑动操作,根据第一滑动操作的滑动方向,确定第二资讯数据。第一滑动操作的滑动方向可以向左或者向右,使得预览界面上的显示内容从第一资讯数据切换为第二资讯数据,第二资讯数据在列表视图结构中的位置为第一列表视图结构中的位置的右边或左边。
请参阅图4,图4为一种转换效果示意图,其中D表示用户的手势滑动方向,可以为向右滑动或向左滑动,A表示上一条资讯,B表示当前浏览的资讯,C表示旋转角度。如图4所示,手势向右滑动,手势结束后内容由当前浏览的资讯切换为上一条资讯。
可选的,第一资讯数据包括多个图片,响应作用于预览界面的第一滑动操作,包括:
作用于预览界面上的第一滑动操作,为作用于第一资讯数据的多个图片中的首张图片、且滑动方向向右的滑动操作;或者
作用于预览界面上的第一滑动操作,为作用于第一资讯数据的多个图片中的末张图片、且滑动方向向左的滑动操作。
其中,如果第一资讯数据包括多个图片,对于第一资讯数据的多个图片中的第一图片(首张图片),用户手势向右滑动为第一滑动操作;对于第一资讯数据的多个图片中的最后一张图片(末张图片),用户手势向左滑动为第一滑动操作。其中用户在第一资讯数据的多个图片中左右滑动时,只会直接切换第一资讯数据内的图片,不认为是第一滑动操作,因而不会产生转换效果。可选的,如果用户在浏览完第一图片后,不想依次浏览第一资讯数据所包含的全部图片后,再切换至下一资讯数据,可以设置一操作方式,直接从第一图片跳至最后一张图片,例如用户长按第一图片再向右滑动。本申请对用户的长按时间不作限制,可理解的是,也不限制用户浏览的图片序数,可以是第一图片,也可以是第二图片等等。
可选的,第一资讯数据包括单个图片,响应作用于预览界面的第一滑动操作,包括:
作用于预览界面上的第一滑动操作,为作用于第一资讯数据的单个图片、且滑动方向向右的滑动操作;或者
作用于预览界面上的第一滑动操作,为作用于第一资讯数据的单个图片、且滑动方向向左的滑动操作。
可选的,请参阅图5,图5为一种转换实现流程图的示意图,可以通过自定义集合视图布局来实现对每个动态承载器布局cell的转换样式管理,可以将集合视图布局命名为UICollectionViewFlowLayout。新增自定义布局(layout)类即大图像列表集合布局(GLFeedLargeImageListCollectLayout),重写cell的布局绘制方法即布局属性(layoutAttributesForElementsInRect)。在此方法中,根据当前集合视图(collectionView)的滑动间隔(列表滑动偏移量)以及当前列表控件的大小(子项现布局值),计算该控件滑动的偏移量,再通过滑动偏移量动态计算当前展示需要缩放的比例(第一图片缩放比例)以及旋转角度。设置最大旋转角度与最大缩放比例,例如最大旋转角度可以设置为20度,最大缩放比例可以设置为0.9倍,本申请对此不作限制。通过创建两个3D转换(CATransform3D),一个负责缩放,一个负责角度旋转。最终赋值给当前Item对应的用户设备集合视图布局属性(UICollectionViewLayoutAttributes),从而实现3D旋转效果以及图片缩放的动效切换。
本申请实施例中,当用户浏览完当前预览界面对应的资讯数据后,想要退出当前预览界面,用户对预览界面进行滑动操作,以该滑动操作作为第二滑动操作,第二滑动操作可以是由下往上滑动,本申请对此不作限制。终端响应作用于预览界面的第二滑动操作,获取第二滑动操作对应的第二滑动偏移量,并根据第二滑动偏移量,控制浏览器退出该预览界面。
其中,基于第二滑动偏移量与终端屏幕高度值计算退出进度,退出进度(dismissProgress)=第二滑动偏移量(translationGap)*3/终端屏幕高度(UIScreenHeight),即第二滑动偏移量除以终端屏幕高度的三分之一;并基于退出进度计算背景透明度,背景透明度(Alpha)=1-退出进度,背景透明度即为导航控制器和视图背景颜色的透明度,从而实现背景透明度跟随手势变化的沉浸退出效果,提高用户的沉浸式体验,有利于提升用户对于图文动态内容的消费时长。
然后,基于第二滑动偏移量、终端屏幕高度值和预设偏移量计算第二图片缩放比例。第二图片缩放比例(scale)=1-第二滑动偏移量/(终端屏幕高度-startY);其中startY为预设偏移量;设置集合视图转换(collectionView.transform),修改当前展示比例。预设偏移量可以设置为60ppi,本申请对此不作限制。
可选的,请参阅图6,图6为一种拖拽渐隐退出动画的示意图,如图6所示,可以基于计算出的退出进度修改顶部展示控件与底部展示控件相对于终端屏幕下边界的纵坐标。顶部展示控件的纵坐标根据退出进度递减,底部展示控件的纵坐标根据退出进度递增,底部展示控件可以设置用户信息与文案区域,顶部及底部展示控件逐步从可视区域移开,从而实现视图挂载控件的渐隐式退出动画和部件的上下移出动画,浏览器的退出效果更好。
其中,终端对操作界面进行手势监听,以识别第二滑动操作;获取第二滑动操作相对于终端屏幕下边界的起始纵坐标与终点纵坐标,计算起始纵坐标与终点纵坐标的差值为第二滑动偏移量。当第二滑动操作结束时,判断第二滑动偏移量是否满足预设偏移量;若第二滑动偏移量满足预设偏移量,则根据第二滑动偏移量,控制浏览器退出当前预览界面;若第二滑动偏移量不满足预设偏移量,则用户需要重新进行第二滑动操作。
可选的,请参阅图7,图7为一种退出实现流程图的示意图,浏览器中可以设置一图片展示控制器,该图片展示控制器可命名为
GLShowLargeImageViewController,通过该图片展示控制器实现手势监听方法,以针对用户手势的不同状态进行处理,当监听到第二滑动操作时,计算第二滑动偏移量。根据第二滑动偏移量进一步计算出退出进度,第二图片缩放比例及背景透明度;再根据退出进度对视图挂载部件(顶部展示控件与底部展示控件)的纵坐标值(y值)进行修改,以及根据第二图片缩放比例控制图片控件的缩放。在用户的第二滑动操作结束后,执行退出图片展示控制器的逻辑,退出当前预览界面。
其中,请参阅图8,图8为本申请实施例提供的一种沉浸式图片浏览器的实现思路。如图8所示,解析当前信息流列表中的包含图片类型的动态,将所有图片类型的动态作为该图片浏览器的目标数据源,并使用列表内嵌结构,在用户由当前的图文动态切换至下一条图文动态时,实现动态切换3D转场和比例缩放效果,以及在用户退出该图片浏览器时实现手势拖拽渐隐退出效果。
为了更好地实施以上浏览器控制方法,相应的,本申请实施例还提供一种浏览器控制装置,该浏览器控制装置具体可以集成在计算机设备中,例如以终端的形式。
参考图9,该浏览器控制装置包括获取单元201、设置单元202、切换单元203和计算单元204,如下:
获取单元201,用于响应作用于浏览器的操作界面上显示的第一资讯数据的选择操作,获取所述第一资讯数据对应的资讯数据信息流,并将所述资讯数据信息流中所有含有图片的资讯数据确定为所述浏览器对应的目标数据源;
设置单元202,用于对所述目标数据源进行初始化处理,以生成所述浏览器对应的列表视图结构,并确定所述第一资讯数据在所述列表视图结构中的位置;
切换单元203,用于根据所述选择操作控制所述浏览器从所述操作界面切换至预览界面,并在所述预览界面上显示所述第一资讯数据;
计算单元204,用于响应作用于所述预览界面的第一滑动操作,根据所述第一滑动操作控制所述预览界面上的显示内容从所述第一资讯数据切换为第二资讯数据,所述第二资讯数据在所述列表视图结构中的位置与所述第一资讯数据在所述列表视图结构中的位置相邻。
在一个可选的实施例中,所述获取单元201还用于:
获取所述资讯数据信息流的信息列表,通过遍历所述信息列表中的信息子项输出所述信息子项对应的资讯数据;
判断所述信息子项对应的资讯数据是否为图片类型;
若所述信息子项对应的资讯数据为图片类型,则提取所述信息子项对应的资讯数据作为所述目标数据源。
在一个可选的实施例中,所述列表视图结构由具备多个列表子项的列表容器组成,所述多个列表子项中的每一个列表子项对应所述目标数据源中的每一条资讯数据,所述设置单元202还用于:
在所述列表容器中设置第一列表,所述第一列表绑定所述目标数据源;
根据所述目标数据源中的每一条资讯数据对所述列表子项进行渲染处理,使所述列表子项与所述目标数据源中的每一条资讯数据一一对应绑定。
在一个可选的实施例中,在所述列表容器中设置第二列表,所述第二列表由多个第二列表子项组成,所述设置单元202还用于:
根据所述列表子项绑定的资讯数据中的每一个图片数据对所述第二列表子项进行渲染处理,使所述第二列表子项与所述列表子项绑定的资讯数据中的每一个图片数据一一对应绑定。
在一个可选的实施例中,所述浏览器设有列表视图控制器,所述列表视图控制器包括集合视图与视图列表单元,所述设置单元202还用于:
将所述目标数据源承载在所述集合视图中进行显示;
根据所述目标数据源中的每一条资讯数据对所述视图列表单元进行渲染处理,使所述视图列表单元与所述目标数据源中的每一条资讯数据一一对应绑定,并基于所述目标数据源的每一条资讯数据对所述视图列表单元进行初始化处理。
在一个可选的实施例中,所述列表视图控制器还包括可视层级,所述设置单元202还用于:
将所述视图列表单元对应的视图添加到所述可视层级。
在一个可选的实施例中,所述计算单元204还用于:
获取所述第一滑动操作对应的第一滑动偏移量,并根据所述第一滑动偏移量,控制所述预览界面上的显示内容从所述第一资讯数据切换为第二资讯数据。
在一个可选的实施例中,所述计算单元204还用于:
确定所述第一滑动操作对应的第一列表子项,根据所述第一列表子项对应的横坐标、所述第一滑动偏移量与终端屏幕宽度值计算第一图片缩放比例;
根据所述第一图片缩放比例计算旋转角度;
所述根据所述第一滑动偏移量,控制所述预览界面上的显示内容从所述第一资讯数据切换为第二资讯数据,包括:
根据所述第一图片缩放比例和所述旋转角度,控制所述预览界面上的显示内容从所述第一资讯数据切换为第二资讯数据。
在一个可选的实施例中,所述计算单元204还用于:
获取所述第一滑动操作的起始横坐标与终点横坐标,并将所述起始横坐标与所述终点横坐标的差值确定为所述第一滑动偏移量。
在一个可选的实施例中,所述第一资讯数据包括多个图片,所述计算单元204还用于:
所述作用于所述预览界面的第一滑动操作,为作用于所述第一资讯数据的多个图片中的首张图片、且滑动方向向右的滑动操作;或者
所述作用于所述预览界面的第一滑动操作,为作用于所述第一资讯数据的多个图片中的末张图片、且所述滑动方向向左的滑动操作。
在一个可选的实施例中,所述第一资讯数据包括单个图片,所述计算单元204还用于:
所述作用于所述预览界面的第一滑动操作,为作用于所述第一资讯数据的单个图片、且滑动方向向右的滑动操作;或者
所述作用于所述预览界面的第一滑动操作,为作用于所述第一资讯数据的单个图片、且所述滑动方向向左的滑动操作。
在一个可选的实施例中,所述计算单元204还用于:
响应作用于所述预览界面的第二滑动操作,获取所述第二滑动操作对应的第二滑动偏移量,并根据所述第二滑动偏移量,控制所述浏览器退出所述预览界面。
在一个可选的实施例中,所述计算单元204还用于:
基于所述第二滑动偏移量与终端屏幕高度值计算退出进度,并基于所述退出进度计算背景透明度;
基于所述第二滑动偏移量、所述终端屏幕高度值和预设偏移量计算第二图片缩放比例。
在一个可选的实施例中,所述计算单元204还用于:
基于所述退出进度修改顶部展示控件与底部展示控件相对于终端屏幕下边界的纵坐标。
在一个可选的实施例中,所述计算单元204还用于:
所述顶部展示控件的纵坐标根据所述退出进度递减,所述底部展示控件的纵坐标根据所述退出进度递增。
在一个可选的实施例中,所述计算单元204还用于:
对所述操作界面进行手势监听,以识别所述第二滑动操作;
获取所述第二滑动操作相对于终端屏幕下边界的起始纵坐标与终点纵坐标,并将所述起始纵坐标与所述终点纵坐标的差值确定为所述第二滑动偏移量。
在一个可选的实施例中,所述计算单元204还用于:
判断所述第二滑动偏移量是否满足所述预设偏移量;
若所述第二滑动偏移量满足所述预设偏移量,则根据所述第二滑动偏移量,控制所述浏览器退出所述预览界面。
相应的,本申请实施例还提供一种浏览器,如图10所示,该浏览器包括获取单元301、设置单元302、切换单元303和计算单元304,如下:
获取单元301,用于响应作用于浏览器的操作界面上显示的第一资讯数据的选择操作,获取所述第一资讯数据对应的资讯数据信息流,并将所述资讯数据信息流中所有含有图片的资讯数据确定为所述浏览器对应的目标数据源;
设置单元302,用于对所述目标数据源进行初始化处理,以生成所述浏览器对应的列表视图结构,并确定所述第一资讯数据在所述列表视图结构中的位置;
切换单元303,用于根据所述选择操作控制所述浏览器从所述操作界面切换至预览界面,并在所述预览界面上显示所述第一资讯数据;
计算单元304,用于响应作用于所述预览界面的第一滑动操作,根据所述第一滑动操作控制所述预览界面上的显示内容从所述第一资讯数据切换为第二资讯数据,所述第二资讯数据在所述列表视图结构中的位置与所述第一资讯数据在所述列表视图结构中的位置相邻。
在一个可选的实施例中,所述获取单元301还用于:
获取所述资讯数据信息流的信息列表,通过遍历所述信息列表中的信息子项输出所述信息子项对应的资讯数据;
判断所述信息子项对应的资讯数据是否为图片类型;
若所述信息子项对应的资讯数据为图片类型,则提取所述信息子项对应的资讯数据作为所述目标数据源。
在一个可选的实施例中,所述列表视图结构由具备多个列表子项的列表容器组成,所述多个列表子项中的每一个列表子项对应所述目标数据源中的每一条资讯数据,所述设置单元302还用于:
在所述列表容器中设置第一列表,所述第一列表绑定所述目标数据源;
根据所述目标数据源中的每一条资讯数据对所述列表子项进行渲染处理,使所述列表子项与所述目标数据源中的每一条资讯数据一一对应绑定。
在一个可选的实施例中,在所述列表容器中设置第二列表,所述第二列表由多个第二列表子项组成,所述设置单元302还用于:
根据所述列表子项绑定的资讯数据中的每一个图片数据对所述第二列表子项进行渲染处理,使所述第二列表子项与所述列表子项绑定的资讯数据中的每一个图片数据一一对应绑定。
在一个可选的实施例中,所述浏览器设有列表视图控制器,所述列表视图控制器包括集合视图与视图列表单元,所述设置单元302还用于:
将所述目标数据源承载在所述集合视图中进行显示;
根据所述目标数据源中的每一条资讯数据对所述视图列表单元进行渲染处理,使所述视图列表单元与所述目标数据源中的每一条资讯数据一一对应绑定,并基于所述目标数据源的每一条资讯数据对所述视图列表单元进行初始化处理。
在一个可选的实施例中,所述列表视图控制器还包括可视层级,所述设置单元302还用于:
将所述视图列表单元对应的视图添加到所述可视层级。
在一个可选的实施例中,所述计算单元304还用于:
获取所述第一滑动操作对应的第一滑动偏移量,并根据所述第一滑动偏移量,控制所述预览界面上的显示内容从所述第一资讯数据切换为第二资讯数据
在一个可选的实施例中,所述计算单元304还用于:
确定所述第一滑动操作对应的第一列表子项,根据所述第一列表子项对应的横坐标、所述第一滑动偏移量与终端屏幕宽度值计算第一图片缩放比例;
根据所述第一图片缩放比例计算旋转角度;
所述根据所述第一滑动偏移量,控制所述预览界面上的显示内容从所述第一资讯数据切换为第二资讯数据,包括:
根据所述第一图片缩放比例和所述旋转角度,控制所述预览界面上的显示内容从所述第一资讯数据切换为第二资讯数据。
在一个可选的实施例中,所述计算单元304还用于:
获取所述第一滑动操作的起始横坐标与终点横坐标,并将所述起始横坐标与所述终点横坐标的差值确定为所述第一滑动偏移量。
在一个可选的实施例中,所述第一资讯数据包括多个图片,所述计算单元304还用于:
所述作用于所述预览界面的第一滑动操作,为作用于所述第一资讯数据的多个图片中的首张图片、且滑动方向向右的滑动操作;或者
所述作用于所述预览界面的第一滑动操作,为作用于所述第一资讯数据的多个图片中的末张图片、且所述滑动方向向左的滑动操作。
在一个可选的实施例中,所述第一资讯数据包括单个图片,所述计算单元304还用于:
所述作用于所述预览界面的第一滑动操作,为作用于所述第一资讯数据的单个图片、且滑动方向向右的滑动操作;或者
所述作用于所述预览界面的第一滑动操作,为作用于所述第一资讯数据的单个图片、且所述滑动方向向左的滑动操作。
在一个可选的实施例中,所述计算单元304还用于:
响应作用于所述预览界面的第二滑动操作,获取所述第二滑动操作对应的第二滑动偏移量,并根据所述第二滑动偏移量,控制所述浏览器退出所述预览界面。
在一个可选的实施例中,所述计算单元304还用于:
基于所述第二滑动偏移量与终端屏幕高度值计算退出进度,并基于所述退出进度计算背景透明度;
基于所述第二滑动偏移量、所述终端屏幕高度值和预设偏移量计算第二图片缩放比例。
在一个可选的实施例中,所述计算单元304还用于:
基于所述退出进度修改顶部展示控件与底部展示控件相对于终端屏幕下边界的纵坐标。
在一个可选的实施例中,所述计算单元304还用于:
所述顶部展示控件的纵坐标根据所述退出进度递减,所述底部展示控件的纵坐标根据所述退出进度递增。
在一个可选的实施例中,所述计算单元304还用于:
对所述操作界面进行手势监听,以识别所述第二滑动操作;
获取所述第二滑动操作相对于终端屏幕下边界的起始纵坐标与终点纵坐标,并将所述起始纵坐标与所述终点纵坐标的差值确定为所述第二滑动偏移量。
在一个可选的实施例中,所述计算单元304还用于:
判断所述第二滑动偏移量是否满足所述预设偏移量;
若所述第二滑动偏移量满足所述预设偏移量,则根据所述第二滑动偏移量,控制所述浏览器退出所述预览界面。
相应的,本申请实施例还提供一种服务器,该服务器可以为独立的物理服务器,也可以是多个物理服务器构成的服务器集群或者分布式系统,还可以是提供云服务、云数据库、云计算、云函数、云存储、网络服务、云通信、中间件服务等基础云计算服务的云服务器。如图11所示,图11为本申请实施例提供的服务器的结构示意图。该服务器800包括有一个或者一个以上处理核心的处理器801、有一个或一个以上计算机可读存储介质的存储器802及存储在存储器802上并可在处理器上运行的计算机程序。其中,处理器801与存储器802电性连接。本领域技术人员可以理解,图中示出的服务器结构并不构成对服务器的限定,可以包括比图示更多或更少的部件,或者组合某些部件,或者不同的部件布置。
处理器801是服务器800的控制中心,利用各种接口和线路连接整个服务器800的各个部分,通过运行或加载存储在存储器802内的软件程序和/或模块,以及调用存储在存储器802内的数据,执行服务器800的各种功能和处理数据,从而对服务器800进行整体监控。
在本申请实施例中,服务器800中的处理器801会按照如下的步骤,将一个或一个以上的应用程序的进程对应的指令加载到存储器802中,并由处理器801来运行存储在存储器802中的应用程序,从而实现各种功能:
响应作用于浏览器的操作界面上显示的第一资讯数据的选择操作,获取所述第一资讯数据对应的资讯数据信息流,并将所述资讯数据信息流中所有含有图片的资讯数据确定为所述浏览器对应的目标数据源;
对所述目标数据源进行初始化处理,以生成所述浏览器对应的列表视图结构,并确定所述第一资讯数据在所述列表视图结构中的位置;
根据所述选择操作控制所述浏览器从所述操作界面切换至预览界面,并在所述预览界面上显示所述第一资讯数据;
响应作用于所述预览界面的第一滑动操作,根据所述第一滑动操作控制所述预览界面上的显示内容从所述第一资讯数据切换为第二资讯数据,所述第二资讯数据在所述列表视图结构中的位置与所述第一资讯数据在所述列表视图结构中的位置相邻。
以上各个操作的具体实施可参见前面的实施例,在此不再赘述。
相应的,本申请实施例还提供一种终端,该终端可以为智能手机、平板电脑、笔记本电脑、触控屏幕、游戏机、个人计算机(PC,Personal Computer)、个人数字助理(PersonalDigital Assistant,PDA)等计算机设备。如图12所示,图12为本发明实施例提供的终端900的结构示意图。该终端900包括有一个或者一个以上处理核心的处理器901、有一个或一个以上计算机可读存储介质的存储器902及存储在存储器902上并可在处理器上运行的计算机程序。其中,处理器901与存储器902电性连接。本领域技术人员可以理解,图中示出的终端900结构并不构成对终端的限定,可以包括比图示更多或更少的部件,或者组合某些部件,或者不同的部件布置。
处理器901是终端900的控制中心,利用各种接口和线路连接整个终端900的各个部分,通过运行或加载存储在存储器902内的软件程序和/或模块,以及调用存储在存储器902内的数据,执行终端900的各种功能和处理数据,从而对终端900进行整体监控。
在本申请实施例中,终端900中的处理器901会按照如下的步骤,将一个或一个以上的应用程序的进程对应的指令加载到存储器902中,并由处理器901来运行存储在存储器902中的应用程序,从而实现各种功能:
响应作用于浏览器的操作界面上显示的第一资讯数据的选择操作,获取所述第一资讯数据对应的资讯数据信息流,并将所述资讯数据信息流中所有含有图片的资讯数据确定为所述浏览器对应的目标数据源;
对所述目标数据源进行初始化处理,以生成所述浏览器对应的列表视图结构,并确定所述第一资讯数据在所述列表视图结构中的位置;
根据所述选择操作控制所述浏览器从所述操作界面切换至预览界面,并在所述预览界面上显示所述第一资讯数据;
响应作用于所述预览界面的第一滑动操作,根据所述第一滑动操作控制所述预览界面上的显示内容从所述第一资讯数据切换为第二资讯数据,所述第二资讯数据在所述列表视图结构中的位置与所述第一资讯数据在所述列表视图结构中的位置相邻。
以上各个操作的具体实施可参见前面的实施例,在此不再赘述。
可选的,如图12所示,终端900还包括:触控显示屏903、射频电路904、音频电路905、输入单元906以及电源907。其中,处理器901分别与触控显示屏903、射频电路904、音频电路905、输入单元906以及电源907电性连接。本领域技术人员可以理解,图12中示出的终端结构并不构成对终端的限定,可以包括比图示更多或更少的部件,或者组合某些部件,或者不同的部件布置。
触控显示屏903可用于显示图形用户界面以及接收用户作用于图形用户界面产生的操作指令。触控显示屏903可以包括显示面板和触控面板。其中,显示面板可用于显示由用户输入的信息或提供给用户的信息以及终端的各种图形用户接口,这些图形用户接口可以由图形、文本、图标、视频和其任意组合来构成。可选的,可以采用液晶显示器(LCD,Liquid Crystal Display)、有机发光二极管(OLED,Organic Light-Emitting Diode)等形式来配置显示面板。触控面板可用于收集用户在其上或附近的触摸操作(比如用户使用手指、触笔等任何适合的物体或附件在触控面板上或在触控面板附近的操作),并生成相应的操作指令,且操作指令执行对应程序。可选的,触控面板可包括触摸检测装置和触摸控制器两个部分。其中,触摸检测装置检测用户的触摸方位,并检测触摸操作带来的信号,将信号传送给触摸控制器;触摸控制器从触摸检测装置上接收触摸信息,并将它转换成触点坐标,再送给处理器901,并能接收处理器901发来的命令并加以执行。触控面板可覆盖显示面板,当触控面板检测到在其上或附近的触摸操作后,传送给处理器901以确定触摸事件的类型,随后处理器901根据触摸事件的类型在显示面板上提供相应的视觉输出。在本发明实施例中,可以将触控面板与显示面板集成到触控显示屏903而实现输入和输出功能。但是在某些实施例中,触控面板与触控面板可以作为两个独立的部件来实现输入和输出功能。即触控显示屏903也可以作为输入单元906的一部分实现输入功能。
射频电路904可用于收发射频信号,以通过无线通信与网络设备或其他终端建立无线通讯,与网络设备或其他终端之间收发信号。
音频电路905可以用于通过扬声器、传声器提供用户与终端之间的音频接口。音频电路905可将接收到的音频数据转换后的电信号,传输到扬声器,由扬声器转换为声音信号输出;另一方面,传声器将收集的声音信号转换为电信号,由音频电路905接收后转换为音频数据,再将音频数据输出处理器901处理后,经射频电路904以发送给比如另一终端,或者将音频数据输出至存储器902以便进一步处理。音频电路905还可能包括耳塞插孔,以提供外设耳机与终端的通信。
输入单元906可用于接收输入的数字、字符信息或用户特征信息(例如指纹、虹膜、面部信息等),以及产生与用户设置以及功能控制有关的键盘、鼠标、操作杆、光学或者轨迹球信号输入。
电源907用于给终端900的各个部件供电。可选的,电源907可以通过电源管理系统与处理器901逻辑相连,从而通过电源管理系统实现管理充电、放电、以及功耗管理等功能。电源907还可以包括一个或一个以上的直流或交流电源、再充电系统、电源故障检测电路、电源转换器或者逆变器、电源状态指示器等任意组件。
尽管图12中未示出,终端900还可以包括摄像头、传感器、无线保真模块、蓝牙模块等,在此不再赘述。
在上述实施例中,对各个实施例的描述都各有侧重,某个实施例中没有详述的部分,可以参见其他实施例的相关描述。
本领域普通技术人员可以理解,上述实施例的各种方法中的全部或部分步骤可以通过指令来完成,或通过指令控制相关的硬件来完成,该指令可以存储于一计算机可读存储介质中,并由处理器进行加载和执行。
为此,本申请实施例提供一种计算机可读存储介质,其中存储有多条计算机程序,该计算机程序能够被处理器进行加载,以执行本申请实施例所提供的任一种浏览器控制方法中的步骤。例如,该计算机程序可以执行如下步骤:
响应作用于浏览器的操作界面上显示的第一资讯数据的选择操作,获取所述第一资讯数据对应的资讯数据信息流,并将所述资讯数据信息流中所有含有图片的资讯数据确定为所述浏览器对应的目标数据源;
对所述目标数据源进行初始化处理,以生成所述浏览器对应的列表视图结构,并确定所述第一资讯数据在所述列表视图结构中的位置;
根据所述选择操作控制所述浏览器从所述操作界面切换至预览界面,并在所述预览界面上显示所述第一资讯数据;
响应作用于所述预览界面的第一滑动操作,根据所述第一滑动操作控制所述预览界面上的显示内容从所述第一资讯数据切换为第二资讯数据,所述第二资讯数据在所述列表视图结构中的位置与所述第一资讯数据在所述列表视图结构中的位置相邻。
以上各个操作的具体实施可参见前面的实施例,在此不再赘述。
其中,该存储介质可以包括:只读存储器(ROM,Read Only Memory)、随机存取记忆体(RAM,Random Access Memory)、磁盘或光盘等。
以上对本申请实施例所提供的一种浏览器控制方法、装置、浏览器、终端及存储介质进行了详细介绍,本文中应用了具体个例对本申请的原理及实施方式进行了阐述,以上实施例的说明只是用于帮助理解本申请的方法及其核心思想;同时,对于本领域的技术人员,依据本申请的思想,在具体实施方式及应用范围上均会有改变之处,综上所述,本说明书内容不应理解为对本申请的限制。
Claims (21)
1.一种浏览器控制方法,其特征在于,包括:
响应作用于浏览器的操作界面上显示的第一资讯数据的选择操作,获取所述第一资讯数据对应的资讯数据信息流,并将所述资讯数据信息流中所有含有图片的资讯数据确定为所述浏览器对应的目标数据源;
对所述目标数据源进行初始化处理,以生成所述浏览器对应的列表视图结构,并确定所述第一资讯数据在所述列表视图结构中的位置;
根据所述选择操作控制所述浏览器从所述操作界面切换至预览界面,并在所述预览界面上显示所述第一资讯数据;
响应作用于所述预览界面的第一滑动操作,根据所述第一滑动操作控制所述预览界面上的显示内容从所述第一资讯数据切换为第二资讯数据,所述第二资讯数据在所述列表视图结构中的位置与所述第一资讯数据在所述列表视图结构中的位置相邻。
2.根据权利要求1所述的浏览器控制方法,其特征在于,所述将所述资讯数据信息流中所有含有图片的资讯数据确定为所述浏览器对应的目标数据源,包括:
获取所述资讯数据信息流的信息列表,通过遍历所述信息列表中的信息子项输出所述信息子项对应的资讯数据;
判断所述信息子项对应的资讯数据是否为图片类型;
若所述信息子项对应的资讯数据为图片类型,则提取所述信息子项对应的资讯数据作为所述目标数据源。
3.根据权利要求1所述的浏览器控制方法,其特征在于,所述列表视图结构由具备多个列表子项的列表容器组成,所述多个列表子项中的每一个列表子项对应所述目标数据源中的每一条资讯数据,所述对所述目标数据源进行初始化处理,以生成所述浏览器对应的列表视图结构,包括:
在所述列表容器中设置第一列表,所述第一列表绑定所述目标数据源;
根据所述目标数据源中的每一条资讯数据对所述列表子项进行渲染处理,使所述列表子项与所述目标数据源中的每一条资讯数据一一对应绑定。
4.根据权利要求3所述的浏览器控制方法,其特征在于,在所述列表容器中设置第二列表,所述第二列表由多个第二列表子项组成,所述对所述目标数据源进行初始化处理,以生成所述浏览器对应的列表视图结构,包括:
根据所述列表子项绑定的资讯数据中的每一个图片数据对所述第二列表子项进行渲染处理,使所述第二列表子项与所述列表子项绑定的资讯数据中的每一个图片数据一一对应绑定。
5.根据权利要求1所述的浏览器控制方法,其特征在于,所述浏览器设有列表视图控制器,所述列表视图控制器包括集合视图与视图列表单元,所述对所述目标数据源进行初始化处理,以生成所述浏览器对应的列表视图结构,包括:
将所述目标数据源承载在所述集合视图中进行显示;
根据所述目标数据源中的每一条资讯数据对所述视图列表单元进行渲染处理,使所述视图列表单元与所述目标数据源中的每一条资讯数据一一对应绑定,并基于所述目标数据源的每一条资讯数据对所述视图列表单元进行初始化处理。
6.根据权利要求5所述的浏览器控制方法,其特征在于,所述列表视图控制器还包括可视层级,所述基于所述目标数据源的每一条资讯数据对所述视图列表单元进行初始化处理,包括:
将所述视图列表单元对应的视图添加到所述可视层级。
7.根据权利要求1所述的浏览器控制方法,其特征在于,所述根据所述第一滑动操作控制所述预览界面上的显示内容从所述第一资讯数据切换为第二资讯数据,包括:
获取所述第一滑动操作对应的第一滑动偏移量,并根据所述第一滑动偏移量,控制所述预览界面上的显示内容从所述第一资讯数据切换为第二资讯数据。
8.根据权利要求7所述的浏览器控制方法,其特征在于,在所述根据所述第一滑动操作控制所述预览界面上的显示内容从所述第一资讯数据切换为第二资讯数据之前,还包括:
确定所述第一滑动操作对应的第一列表子项,根据所述第一列表子项对应的横坐标、所述第一滑动偏移量与终端屏幕宽度值计算第一图片缩放比例;
根据所述第一图片缩放比例计算旋转角度;
所述根据所述第一滑动偏移量,控制所述预览界面上的显示内容从所述第一资讯数据切换为第二资讯数据,包括:
根据所述第一图片缩放比例和所述旋转角度,控制所述预览界面上的显示内容从所述第一资讯数据切换为第二资讯数据。
9.根据权利要求7所述的浏览器控制方法,其特征在于,所述获取所述第一滑动操作对应的第一滑动偏移量,包括:
获取所述第一滑动操作的起始横坐标与终点横坐标,并将所述起始横坐标与所述终点横坐标的差值确定为所述第一滑动偏移量。
10.根据权利要求1所述的浏览器控制方法,其特征在于,所述第一资讯数据包括多个图片,所述响应作用于所述预览界面的第一滑动操作,包括:
所述作用于所述预览界面的第一滑动操作,为作用于所述第一资讯数据的多个图片中的首张图片、且滑动方向向右的滑动操作;或者
所述作用于所述预览界面的第一滑动操作,为作用于所述第一资讯数据的多个图片中的末张图片、且所述滑动方向向左的滑动操作。
11.根据权利要求1所述的浏览器控制方法,其特征在于,所述第一资讯数据包括单个图片,所述响应作用于所述预览界面的第一滑动操作,包括:
所述作用于所述预览界面的第一滑动操作,为作用于所述第一资讯数据的单个图片、且滑动方向向右的滑动操作;或者
所述作用于所述预览界面的第一滑动操作,为作用于所述第一资讯数据的单个图片、且所述滑动方向向左的滑动操作。
12.根据权利要求1所述的浏览器控制方法,其特征在于,还包括:
响应作用于所述预览界面的第二滑动操作,获取所述第二滑动操作对应的第二滑动偏移量,并根据所述第二滑动偏移量,控制所述浏览器退出所述预览界面。
13.根据权利要求12所述的浏览器控制方法,其特征在于,所述根据所述第二滑动偏移量,控制所述浏览器退出所述预览界面,包括:
基于所述第二滑动偏移量与终端屏幕高度值计算退出进度,并基于所述退出进度计算背景透明度;
基于所述第二滑动偏移量、所述终端屏幕高度值和预设偏移量计算第二图片缩放比例。
14.根据权利要求13所述的浏览器控制方法,其特征在于,在所述基于所述第二滑动偏移量与终端屏幕高度值计算退出进度之后,还包括:
基于所述退出进度修改顶部展示控件与底部展示控件相对于终端屏幕下边界的纵坐标。
15.根据权利要求14所述的浏览器控制方法,其特征在于,所述基于所述退出进度修改顶部展示控件与底部展示控件相对于终端屏幕下边界的纵坐标,包括:
所述顶部展示控件的纵坐标根据所述退出进度递减,所述底部展示控件的纵坐标根据所述退出进度递增。
16.根据权利要求13所述的浏览器控制方法,其特征在于,在所述根据所述第二滑动偏移量,控制所述浏览器退出所述预览界面之前,还包括:
判断所述第二滑动偏移量是否满足所述预设偏移量;
若所述第二滑动偏移量满足所述预设偏移量,则根据所述第二滑动偏移量,控制所述浏览器退出所述预览界面。
17.根据权利要求12所述的浏览器控制方法,其特征在于,所述获取所述第二滑动操作对应的第二滑动偏移量,包括:
对所述操作界面进行手势监听,以识别所述第二滑动操作;
获取所述第二滑动操作相对于终端屏幕下边界的起始纵坐标与终点纵坐标,并将所述起始纵坐标与所述终点纵坐标的差值确定为所述第二滑动偏移量。
18.一种浏览器控制装置,其特征在于,包括:
获取单元,用于响应作用于浏览器的操作界面上显示的第一资讯数据的选择操作,获取所述第一资讯数据对应的资讯数据信息流,并将所述资讯数据信息流中所有含有图片的资讯数据确定为所述浏览器对应的目标数据源;
设置单元,用于对所述目标数据源进行初始化处理,以生成所述浏览器对应的列表视图结构,并确定所述第一资讯数据在所述列表视图结构中的位置;
切换单元,用于根据所述选择操作控制所述浏览器从所述操作界面切换至预览界面,并在所述预览界面上显示所述第一资讯数据;
计算单元,用于响应作用于所述预览界面的第一滑动操作,根据所述第一滑动操作控制所述预览界面上的显示内容从所述第一资讯数据切换为第二资讯数据,所述第二资讯数据在所述列表视图结构中的位置与所述第一资讯数据在所述列表视图结构中的位置相邻。
19.一种浏览器,其特征在于,包括:
获取单元,用于响应作用于浏览器的操作界面上显示的第一资讯数据的选择操作,获取所述第一资讯数据对应的资讯数据信息流,并将所述资讯数据信息流中所有含有图片的资讯数据确定为所述浏览器对应的目标数据源;
设置单元,用于对所述目标数据源进行初始化处理,以生成所述浏览器对应的列表视图结构,并确定所述第一资讯数据在所述列表视图结构中的位置;
切换单元,用于根据所述选择操作控制所述浏览器从所述操作界面切换至预览界面,并在所述预览界面上显示所述第一资讯数据;
计算单元,用于响应作用于所述预览界面的第一滑动操作,根据所述第一滑动操作控制所述预览界面上的显示内容从所述第一资讯数据切换为第二资讯数据,所述第二资讯数据在所述列表视图结构中的位置与所述第一资讯数据在所述列表视图结构中的位置相邻。
20.一种终端,其特征在于,包括存储器,处理器及存储在存储器上并可在处理器上运行的计算机程序,其中,所述处理器执行所述计算机程序时实现如权利要求1-17任一项所述浏览器控制方法的步骤。
21.一种存储介质,其特征在于,其上存储有计算机程序,其中,所述计算机程序被处理器执行时实现如权利要求1-17任一项所述浏览器控制方法的步骤。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110529518.4A CN113126867B (zh) | 2021-05-14 | 2021-05-14 | 浏览器控制方法、装置、浏览器、终端及存储介质 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202110529518.4A CN113126867B (zh) | 2021-05-14 | 2021-05-14 | 浏览器控制方法、装置、浏览器、终端及存储介质 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN113126867A CN113126867A (zh) | 2021-07-16 |
CN113126867B true CN113126867B (zh) | 2022-07-22 |
Family
ID=76782598
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202110529518.4A Active CN113126867B (zh) | 2021-05-14 | 2021-05-14 | 浏览器控制方法、装置、浏览器、终端及存储介质 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN113126867B (zh) |
Families Citing this family (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN113535031A (zh) * | 2021-08-03 | 2021-10-22 | 北京字跳网络技术有限公司 | 页面显示方法、装置、设备及介质 |
CN114064774B (zh) * | 2021-11-16 | 2024-07-05 | 中国平安财产保险股份有限公司 | 应用程序的表视图加载方法、装置、设备及存储介质 |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103685528A (zh) * | 2013-12-18 | 2014-03-26 | 北京奇虎科技有限公司 | 信息展示方法和装置 |
KR20150111008A (ko) * | 2014-03-24 | 2015-10-05 | (주)나온미디어 | 웹페이지 형태의 인터넷뉴스기사의 사진을 이용한 광고방법 |
CN109086366A (zh) * | 2018-07-20 | 2018-12-25 | 腾讯科技(武汉)有限公司 | 浏览器中的推荐新闻显示方法、装置、设备及存储介质 |
CN110083418A (zh) * | 2019-04-04 | 2019-08-02 | 上海掌门科技有限公司 | 信息流中图片的处理方法、设备及计算机可读存储介质 |
-
2021
- 2021-05-14 CN CN202110529518.4A patent/CN113126867B/zh active Active
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN103685528A (zh) * | 2013-12-18 | 2014-03-26 | 北京奇虎科技有限公司 | 信息展示方法和装置 |
KR20150111008A (ko) * | 2014-03-24 | 2015-10-05 | (주)나온미디어 | 웹페이지 형태의 인터넷뉴스기사의 사진을 이용한 광고방법 |
CN109086366A (zh) * | 2018-07-20 | 2018-12-25 | 腾讯科技(武汉)有限公司 | 浏览器中的推荐新闻显示方法、装置、设备及存储介质 |
CN110083418A (zh) * | 2019-04-04 | 2019-08-02 | 上海掌门科技有限公司 | 信息流中图片的处理方法、设备及计算机可读存储介质 |
Also Published As
Publication number | Publication date |
---|---|
CN113126867A (zh) | 2021-07-16 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN109062479B (zh) | 分屏应用切换方法、装置、存储介质和电子设备 | |
US11086479B2 (en) | Display device and method of controlling the same | |
US20220377128A1 (en) | File transfer display control method and apparatus, and corresponding terminal | |
EP3842905B1 (en) | Icon display method and apparatus, terminal and storage medium | |
WO2021184375A1 (zh) | 执行手势指令的方法、装置、系统及存储介质 | |
CN109508128B (zh) | 搜索控件显示方法、装置、设备及计算机可读存储介质 | |
US10228835B2 (en) | Method for displaying information, and terminal equipment | |
CN113126867B (zh) | 浏览器控制方法、装置、浏览器、终端及存储介质 | |
AU2013356799A1 (en) | Display device and method of controlling the same | |
WO2020007114A1 (zh) | 分屏应用切换方法、装置、存储介质和电子设备 | |
WO2022121903A1 (zh) | 桌面整理方法、装置及电子设备 | |
WO2021104193A1 (zh) | 界面显示方法及电子设备 | |
CN112817555A (zh) | 音量控制方法及音量控制装置 | |
CN113783995A (zh) | 显示控制方法、装置、电子设备和介质 | |
CN113268182A (zh) | 应用图标的管理方法和电子设备 | |
CN112269501A (zh) | 图标移动方法、装置及电子设备 | |
WO2022127804A1 (zh) | 应用图标的管理方法及装置 | |
CN111459350A (zh) | 图标排序方法、装置及电子设备 | |
CN111638828A (zh) | 界面显示方法及装置 | |
US11941245B2 (en) | Information processing method, storage medium, and electronic device | |
CN105122179A (zh) | 显示接收的用户界面的设备 | |
CN115828845A (zh) | 多媒体数据查看方法、装置、介质及设备 | |
CN115379113A (zh) | 拍摄处理方法、装置、设备及存储介质 | |
CN111880700B (zh) | 应用程序控制方法、装置及电子设备 | |
CN113535054B (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 |