CN110162265B - 一种视图控件的滑动控制方法、装置、设备和存储介质 - Google Patents

一种视图控件的滑动控制方法、装置、设备和存储介质 Download PDF

Info

Publication number
CN110162265B
CN110162265B CN201910448108.XA CN201910448108A CN110162265B CN 110162265 B CN110162265 B CN 110162265B CN 201910448108 A CN201910448108 A CN 201910448108A CN 110162265 B CN110162265 B CN 110162265B
Authority
CN
China
Prior art keywords
control
view control
view
sub
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
Application number
CN201910448108.XA
Other languages
English (en)
Other versions
CN110162265A (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 CN201910448108.XA priority Critical patent/CN110162265B/zh
Publication of CN110162265A publication Critical patent/CN110162265A/zh
Priority to PCT/CN2020/073680 priority patent/WO2020238276A1/zh
Application granted granted Critical
Publication of CN110162265B publication Critical patent/CN110162265B/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
    • G06F3/0485—Scrolling or panning
    • G06F3/04855—Interaction with scrollbars
    • 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

一种视图控件的滑动控制方法、装置、设备和存储介质
技术领域
本公开实施例涉及计算机技术领域，尤其涉及一种视图控件的滑动控制方法、装置、设备和存储介质。
背景技术
随着计算机技术的发展，各种终端设备比如智能手机、平板电脑等已经成为人们生活工作中不可缺少的重要工具。
通常，终端设备上的APP应用程序采用多层可滑动的视图控件嵌套的方案进行页面显示，比如当前显示的页面中包含两个可滑动的视图控件，其中第一个视图控件位于第二个视图控件的上方，并且位于上方的视图控件会覆盖位于下方的视图控件的部分区域。当用户对位于上方的视图控件执行滑动操作时，位于上方的视图控件会随着用户的滑动手势进行滑动，而位于下方的视图控件并不会随之进行滑动。例如，当前显示的界面中包含的两个视图控件为菜单栏控件和列表控件，并且列表控件覆盖在菜单栏控件的尾部视图区域，当用户对列表控件进行滑动时，菜单栏控件中的头部视图区域往往固定显示在屏幕的顶端，不会随着列表控件的滑动而滑动，从而会减少列表控件的显示区域，不利于用户观看。
发明内容
本公开实施例提供了一种视图控件的滑动控制方法、装置、设备和存储介质，以实现在视图控件嵌套显示时，位于下方的视图控件可以随着位于上方的视图控件的滑动而滑动，提高用户观看体验。
第一方面，本公开实施例提供了一种视图控件的滑动控制方法，包括：
当第二视图控件覆盖在第一视图控件上进行显示时，根据所述第二视图控件的显示位置，将所述第一视图控件对应的第一控件区域进行划分，确定至少两个子区域；
对每个所述子区域的当前显示内容进行保存，确定每个所述子区域对应的保存信息，并基于所述保存信息生成与所述子区域对应的单元格；
根据各所述单元格生成第三视图控件，并将所述第三视图控件显示在所述第一视图控件和所述第二视图控件的上方；
当检测到用户滑动操作时，基于所述用户滑动操作控制所述第三视图控件进行滑动。
可选地，根据所述第二视图控件的显示位置，将所述第一视图控件对应的第一控件区域进行划分，确定至少两个子区域，包括：
若所述第二视图控件显示在所述第一视图控件的头部视图区域或者尾部视图区域，则将所述第一视图控件对应的第一控件区域划分为两个子区域；
若所述第二视图控件显示在所述第一视图控件的分隔视图区域，则将所述第一视图控件对应的第一控件区域划分为三个子区域。
可选地，将所述第一视图控件对应的第一控件区域划分为两个子区域，包括：
在所述第一视图控件对应的第一控件区域中，将所述第二视图控件对应的第二控件区域作为第一子区域，将除所述第二控件区域之外的区域作为第二子区域。
可选地，将所述第一视图控件对应的第一控件区域划分为三个子区域，包括：
在所述第一视图控件对应的第一控件区域中，将所述第二视图控件对应的第二控件区域作为第三子区域，将在所述第二控件区域的上方区域作为第四子区域，以及将在所述第二控件区域的下方区域作为第五子区域。
可选地，对每个所述子区域的当前显示内容进行保存，确定每个所述子区域对应的保存信息，并基于所述保存信息生成与所述子区域对应的单元格，包括：
对每个所述子区域的当前显示内容进行截图，确定每个所述子区域对应的截图信息，并基于所述截图信息生成与所述子区域对应的单元格。
可选地，根据各所述单元格生成第三视图控件，包括：
将每个所述单元格的滑动属性设置为禁止滑动，并基于各所述单元格的显示位置，对各所述单元格进行合并，生成第三视图控件；
对每个所述单元格中的保存信息进行拼接，生成所述第三视图控件对应的当前显示图像。
可选地，当检测到用户滑动操作时，基于所述用户滑动操作控制所述第三视图控件进行滑动，包括：
当检测到用户滑动操作时，基于所述用户滑动操作对所述第三视图控件的当前显示图像进行滑动；
基于所述用户滑动操作，将所述第一视图控件的滑动加载数据或者所述第二视图控件的滑动加载数据添加至所述第三视图控件中，并控制所述第三视图控件对所述滑动加载数据进行渲染，获得加载显示图像；
根据所述加载显示图像和所述当前显示图像，确定滑动后的目标显示图像，并于显示界面中显示所述目标显示图像。
第二方面，本公开实施例还提供了一种视图控件的滑动控制装置，包括：
子区域确定模块，用于当第二视图控件覆盖在第一视图控件上进行显示时，根据所述第二视图控件的显示位置，将所述第一视图控件对应的第一控件区域进行划分，确定至少两个子区域；
显示内容保存模块，用于对每个所述子区域的当前显示内容进行保存，确定每个所述子区域对应的保存信息，并基于所述保存信息生成与所述子区域对应的单元格；
第三视图控件生成模块，用于根据各所述单元格生成第三视图控件，并将所述第三视图控件显示在所述第一视图控件和所述第二视图控件的上方；
滑动控制模块，用于当检测到用户滑动操作时，基于所述用户滑动操作控制所述第三视图控件进行滑动。
可选地，子区域确定模块，包括：
第一划分单元，用于若第二视图控件显示在第一视图控件的头部视图区域或者尾部视图区域，则将第一视图控件对应的第一控件区域划分为两个子区域；
第二划分单元，用于若第二视图控件显示在第一视图控件的分隔视图区域，则将第一视图控件对应的第一控件区域划分为三个子区域。
可选地，第一划分单元，具体用于：在第一视图控件对应的第一控件区域中，将第二视图控件对应的第二控件区域作为第一子区域，将除第二控件区域之外的区域作为第二子区域。
可选地，第二划分单元，具体用于：在第一视图控件对应的第一控件区域中，将第二视图控件对应的第二控件区域作为第三子区域，将在第二控件区域的上方区域作为第四子区域，以及将在第二控件区域的下方区域作为第五子区域。
可选地，显示内容保存模块，具体用于：对每个所述子区域的当前显示内容进行截图，确定每个所述子区域对应的截图信息，并基于所述截图信息生成与所述子区域对应的单元格。
可选地，第三视图控件生成模块，具体用于：
将每个单元格的滑动属性设置为禁止滑动，并基于各单元格的显示位置，对各单元格进行合并，生成第三视图控件；
对每个单元格中的保存信息进行拼接，生成第三视图控件对应的当前显示图像。
可选地，滑动控制模块，具体用于：
当检测到用户滑动操作时，基于用户滑动操作对第三视图控件的当前显示图像进行滑动；
基于用户滑动操作，将第一视图控件的滑动加载数据或者第二视图控件的滑动加载数据添加至第三视图控件中，并控制第三视图控件对滑动加载数据进行渲染，获得加载显示图像；
根据加载显示图像和当前显示图像，确定滑动后的目标显示图像，并于显示界面中显示目标显示图像。
第三方面，本公开实施例还提供了一种终端设备，所述设备包括：
一个或多个处理器；
存储器，用于存储一个或多个程序；
当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如本公开任意实施例所提供的视图控件的滑动控制方法。
第四方面，本公开实施例还提供了一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现如本公开任意实施例所提供的视图控件的滑动控制方法。
本公开实施例通过在第二视图控件覆盖在第一视图控件上进行显示，即存在两层视图控件嵌套显示时，可以根据第二视图控件的显示位置，将第一视图控件对应的第一控件区域进行划分，确定至少两个子区域，并对每个子区域的当前显示内容进行保存，基于每个子区域对应的保存信息生成与子区域对应的单元格。根据各个单元格生成第三视图控件，并将第三视图控件显示在第一视图控件和第二视图控件的上方。当检测到用户对第二视图控件的滑动操作时，可以基于用户滑动操作，控制第三视图控件进行整体滑动，使得位于下方的第一视图控件可以随着位于上方的第二视图控件的滑动而滑动，从而提高了用户观看体验。
附图说明
为了更清楚地说明本公开实施例或现有技术中的技术方案，下面将对实施例描述中所需要使用的附图做一简单地介绍，显而易见地，下面描述中的附图是本公开的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图。
图1是本公开实施例一提供的一种视图控件的滑动控制方法的流程图；
图2是本公开实施例二提供的一种视图控件的滑动控制方法的流程图；
图3是本公开实施例三提供的一种视图控件的滑动控制装置的结构示意图；
图4是本公开实施例四提供的一种终端设备的结构示意图。
具体实施方式
为使本公开的目的、技术方案和优点更加清楚，以下将参照本公开实施例中的附图，通过实施方式清楚、完整地描述本公开的技术方案，显然，所描述的实施例是本公开一部分实施例，而不是全部的实施例。基于本公开中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本公开保护的范围。
下述各实施例中，每个实施例中同时提供了可选特征和示例，实施例中记载的各个特征可进行组合，形成多个可选方案，不应将每个编号的实施例仅视为一个技术方案。
实施例一
图1为本公开实施例一提供的一种视图控件的滑动控制方法的流程图，本实施例可适用于在两个视图控件嵌套显示时，对视图控件的滑动进行控制的情况。该方法可以由视图控件的滑动控制装置来执行，该装置可以由软件和/或硬件的方式来实现，集成于显示内容可滑动的终端中，比如智能手机、平板电脑或掌上游戏机等智能终端中。该方法具体包括以下步骤：
S110、当第二视图控件覆盖在第一视图控件上进行显示时，根据第二视图控件的显示位置，将第一视图控件对应的第一控件区域进行划分，确定至少两个子区域。
其中，视图控件可以是指用于页面显示的一种控件，比如列表视图控件。示例性地，可以利用列表视图控件来显示一个列表页，用户可以通过滑动该列表页的方式来显示出更多的列表内容，或者也可以通过点击显示的某个列表项来查看该列表项对应的详情页。本实施例中当前显示的页面中可以包含一个或多个视图控件。每个视图控件的大小和显示位置可以根据业务需求和实际场景预先确定。视图控件对应的控件区域可以是指视图控件的整个视图区域，其可以由头部视图区域headerView、分隔视图区域SegmentView和尾部视图区域FooterView组成，其中分隔视图区域为头部视图区域和尾部视图区域之间的区域。子区域可以是指对整个控件区域进行划分而获得的部分区域。
具体地，当前显示的页面中若存在两个视图控件(第一视图控件和第二视图控件)嵌套显示，如第二视图控件覆盖在第一视图控件上进行显示时，根据第二视图控件在第一视图控件上的显示位置，可以获得被第二视图控件覆盖的第一视图控件的覆盖视图区域，基于该覆盖视图区域可以将第一视图控件对应的第一控件区域进行划分，确定出第一控件区域中的各个子区域。
示例性地，在第二视图控件覆盖在第一视图控件上进行显示之前，还可以包括获取第二视图控件的操作，比如在当前页面中仅显示出第一视图控件时，用户可以通过对第一视图控件中的某个位置执行触发操作来获得第二视图控件，并且获得的第二视图控件显示在第一视图控件的上方，即第一视图控件与第二视图控件进行嵌套显示。
S120、对每个子区域的当前显示内容进行保存，确定每个子区域对应的保存信息，并基于保存信息生成与子区域对应的单元格。
其中，子区域对应的保存信息可以是指在当前显示页面中，当前时刻在子区域处显示的页面内容。本实施例中的每个子区域均对应一个单元格。
具体地，在当前显示页面中，对每个子区域当前显示的页面内容进行保存，以便可以复原每个子区域当前显示的画面。需要注意的是，对于被第二视图控件覆盖的第一视图控件的覆盖视图区域所对应的保存信息应为第二视图控件所显示的页面内容。本实施例可以根据每个子区域的保存信息生成每个子区域对应的单元格。
示例性地，S120可以包括：对每个所述子区域的当前显示内容进行截图，确定每个所述子区域对应的截图信息，并基于所述截图信息生成与所述子区域对应的单元格。本实施例可以通过采用截图方式，对每个子区域的当前显示内容进行保存，获得每个子区域当前显示的页面图片，即截图信息，以便后续无需基于页面内容进行页面复原，从而提高显示效率。
S130、根据各单元格生成第三视图控件，并将第三视图控件显示在第一视图控件和第二视图控件的上方。
具体地，将生成的所有单元格进行合并，生成一个第三视图控件，此时第三视图控件的当前显示图像即为各个子区域保存的页面内容信息进行拼接而成的图像，从而可以将第一视图控件和第二视图控件合并为一个第三视图控件，并且第三视图控件均覆盖在第一视图控件和第二视图控件上进行显示，以便用户可以观看到第三视图控件的显示内容。
S140、当检测到用户滑动操作时，基于用户滑动操作控制第三视图控件进行滑动。
其中，用户滑动操作可以是指用户在第三视图控件所显示的区域中进行的滑动操作，比如向上滑动、向下滑动、向左滑动或者向右滑动。第三视图控件的可滑动方向可以根据第一视图控件的可滑动方向或者第二视图控件的可滑动方向确定。比如，若第二视图控件可以上下滑动，第一视图控件为不可滑动控件，则生成的第三视图控件的可滑动方向为上下滑动。本实施例在第一视图控件和第二视图控件中，可以只存在一个可滑动视图控件，第三视图控件的滑动方向可以与可滑动视图控件的滑动方向一致，以使不可滑动视图控件可以随着可滑动视图控件的滑动而滑动。
具体地，若第三视图控件为可上下滑动的控件，则在检测到用户在第三视图控件所显示的区域中进行上下滑动操作时，基于该滑动操作控制第三视图控件进行整体的上下滑动，从而可以达到第一视图控件与第二视图控件一起滑动的效果，即位于下方的第一视图控件可以随着位于上方的第二视图控件的滑动而滑动。例如，列表控件覆盖在菜单栏控件的尾部视图区域上显示，当用户对列表控件进行滑动时，菜单栏控件中的头部视图区域也可以随着列表控件的滑动而滑动，从而增大了列表控件的显示区域，便于用户观看，提高了用户体验。
本实施例的技术方案，通过在第二视图控件覆盖在第一视图控件上进行显示，即存在两层视图控件嵌套显示时，可以根据第二视图控件的显示位置，将第一视图控件对应的第一控件区域进行划分，确定至少两个子区域，并对每个子区域的当前显示内容进行保存，基于每个子区域对应的保存信息生成与子区域对应的单元格。根据各个单元格生成第三视图控件，并将第三视图控件显示在第一视图控件和第二视图控件的上方。当检测到用户对第二视图控件的滑动操作时，可以基于用户滑动操作，控制第三视图控件进行整体滑动，使得位于下方的第一视图控件可以随着位于上方的第二视图控件的滑动而滑动，从而提高了用户观看体验。
在上述技术方案的基础上，S110中的“根据第二视图控件的显示位置，将第一视图控件对应的第一控件区域进行划分，确定至少两个子区域”，可以包括：若第二视图控件显示在第一视图控件的头部视图区域或者尾部视图区域，则将第一视图控件对应的第一控件区域划分为两个子区域；若第二视图控件显示在第一视图控件的分隔视图区域，则将第一视图控件对应的第一控件区域划分为三个子区域。
具体地，第二视图控件可以覆盖在第一视图控件对应的第一控件区域中的任何一个区域上，比如，第二视图控件可以覆盖在第一视图控件的头部视图区域headerView、分隔视图区域SegmentView和尾部视图区域FooterView中的任意一个区域。当第二视图控件显示在第一视图控件的头部视图区域或者尾部视图区域时，可以将第一视图控件对应的第一控件区域划分为两个子区域。例如，在第一视图控件对应的第一控件区域中，将第二视图控件对应的第二控件区域作为第一子区域，将除第二控件区域之外的区域作为第二子区域。例如，将被第二视图控件覆盖的第一视图控件的头部视图区域或者尾部视图区域作为第一子区域，将除第一子区域之外的其他区域作为第二子区域。
若第二视图控件显示在第一视图控件的分隔视图区域，则可以将第一视图控件对应的第一控件区域划分为三个子区域。例如，在第一视图控件对应的第一控件区域中，将第二视图控件对应的第二控件区域作为第三子区域，将在第二控件区域的上方区域作为第四子区域，即头部视图区域，以及将在第二控件区域的下方区域作为第五子区域，即尾部视图区域。需要说明的是，由于第二视图控件覆盖在第一视图控件的中间区域，从而需要对第一控件区域划分为三个子区域，以便可以获得每个子区域对应的当前显示内容。
实施例二
图2为本公开实施例二提供的一种视图控件的滑动控制的流程图，本实施例在上述实施例的基础上，对“根据各单元格生成第三视图控件”进行了进一步优化。在此基础上，还可以进一步对“当检测到用户滑动操作时，基于用户滑动操作控制第三视图控件进行滑动”进行优化。其中与上述各实施例相同或相应的术语的解释在此不再赘述。
参见图2，本实施例提供的视图控件的滑动控制方法包括以下步骤：
S210、当第二视图控件覆盖在第一视图控件上进行显示时，根据第二视图控件的显示位置，将第一视图控件对应的第一控件区域进行划分，确定至少两个子区域。
S220、对每个子区域的当前显示内容进行保存，确定每个子区域对应的保存信息，并基于保存信息生成与子区域对应的单元格。
S230、将每个单元格的滑动属性设置为禁止滑动，并基于各单元格的显示位置，对各单元格进行合并，生成第三视图控件。
具体地，通过将每个单元格的滑动属性设置为禁止滑动，可以防止第三视图控件中的单元格在随着第三视图控件进行整体滑动时，出现自身滑动的情况，从而提高页面滑动的稳定性，提升用户的观看体验。本实施例可以基于每个子区域在页面中的显示位置，获得相应单元格在页面中的显示位置。基于各个单元格的显示位置对各个单元格进行位置调整，并对调整后的所有单元格进行合并，从而可以生成一个由各个单元格组成的第三视图控件。
S240、对每个单元格中的保存信息进行拼接，生成第三视图控件对应的当前显示图像。
具体地，根据每个单元格中的保存信息，可以确定出每个单元格对应的页面图片，并基于各单元格的显示位置，对各个页面图片进行拼接，从而可以获得当前时刻的页面图像，即作为第三视图控件对应的当前显示图像。示例性地，在每个单元格中的保存信息为截图信息时，可以直接获得每个单元格对应的截图页面图片，并对各个截图页面图片进行拼接，从而可以更加快速地获得第三视图控件对应的当前显示图像。
S250、将第三视图控件显示在第一视图控件和第二视图控件的上方。
S260、当检测到用户滑动操作时，基于用户滑动操作对第三视图控件的当前显示图像进行滑动。
具体地，当检测到用户在第三视图控件所显示的区域中进行滑动操作时，可以基于该滑动操作控制第三视图控件的当前显示图像进行相应地滑动，从而可以实现第三视图控件的整体滑动，并且可以达到位于下方的第一视图控件随着位于上方的第二视图控件的滑动而滑动的效果。
S270、基于用户滑动操作，将第一视图控件的滑动加载数据或者第二视图控件的滑动加载数据添加至第三视图控件中，并控制第三视图控件对滑动加载数据进行渲染，获得加载显示图像。
其中，滑动加载数据可以是指视图控件被滑动后所获得的加载数据，以便可以显示出新的页面内容。在本实施例中，第一视图控件或第二视图控件滑动时，可以仅有一个视图控件存在后续的滑动加载数据，以便在该视图控件滑动后可以显示出新的页面内容。若第一视图控件和第二视图控件均存在滑动加载数据，则在第一视图控件和第二视图控件同时滑动时，无法确定显示出哪个视图控件的滑动加载数据，并且若同时显示出两个视图控件的滑动加载数据，则会导致页面滑动混乱，降低用户的观看体验。
具体地，基于用户滑动操作，可以获得待显示的第一视图控件的滑动加载数据或者第二视图控件的滑动加载数据，并将获得的滑动加载数据添加至第三视图控件中，以使第三视图控件可以数据加载数据进行渲染，获得加载显示图像。
需要说明的是，本实施例对步骤S260和S270的执行顺序不做限定，比如步骤S260和S270可以同时执行，也可以顺序执行，还可以步骤S270在步骤S260之前执行。
S280、根据加载显示图像和当前显示图像，确定滑动后的目标显示图像，并于显示界面中显示目标显示图像。
具体地，本实施例可以将加载显示图像放置在当前显示图像的下方区域，以便在滑动过程中，随着当前显示图像的逐渐消失，加载显示图像逐渐显示在界面上，从而可以实时确定滑动后的目标显示图像，并实时在显示界面上显示目标显示图像。
本实施例的技术方案，通过将第三视图控件中的每个单元格的滑动属性设置为禁止滑动，可以防止单元格在随着第三视图控件进行整体滑动时，出现自身滑动的情况，从而提高页面滑动的稳定性，提升用户的观看体验。并且通过根据用户滑动操作将第一视图控件的滑动加载数据或者第二视图控件的滑动加载数据添加至第三视图控件中，确定加载显示图像，从而在对第三视图控件进行整体滑动时，可以实时显示滑动后的新的页面内容。
本实施例还提供了另一种视图控件的滑动控制方法，该方法包括：当第二视图控件覆盖在第一视图控件上进行显示时，若检测到用户作用于第二视图控件所显示区域的滑动操作时，基于该滑动操作确定第二视图控件的滑动偏移量和滑动方向；根据滑动偏移量和滑动方向，控制第一视图控件进行滑动。
具体地，在第一视图控件和第二视图控件嵌套显示，即第二视图控件覆盖在第一视图控件上进行显示时，可以检测用户是否存在作用于第二视图控件所显示区域的滑动操作，若是，则可以基于该滑动操作，确定第二视图控件的滑动速度，并基于滑动速度确定出第二视图控件的滑动偏移量。然后基于第二视图控件的滑动偏移量和滑动方向，可以控制第一视图控件向相同方向滑动相同的滑动偏移量，从而使得位于下方的第一视图控件可以随着位于上方的第二视图控件的滑动而滑动，提高了用户观看体验。
以下是本公开实施例提供的视图控件的滑动控制装置的实施例，该装置与上述各实施例的视图控件的滑动控制方法属于同一个发明构思，在视图控件的滑动控制装置的实施例中未详尽描述的细节内容，可以参考上述视图控件的滑动控制方法的实施例。
实施例三
图3为本公开实施例三提供的一种视图控件的滑动控制的结构示意图，本实施例可适用于在两个视图控件嵌套显示时，对视图控件的滑动进行控制的情况。该装置具体包括：子区域确定模块310、显示内容保存模块320、第三视图控件生成模块330和滑动控制模块340。
其中，子区域确定模块310，用于当第二视图控件覆盖在第一视图控件上进行显示时，根据第二视图控件的显示位置，将第一视图控件对应的第一控件区域进行划分，确定至少两个子区域；显示内容保存模块320，用于对每个子区域的当前显示内容进行保存，确定每个子区域对应的保存信息，并基于保存信息生成与子区域对应的单元格；第三视图控件生成模块330，用于根据各单元格生成第三视图控件，并将第三视图控件显示在第一视图控件和第二视图控件的上方；滑动控制模块340，用于当检测到用户滑动操作时，基于用户滑动操作控制第三视图控件进行滑动。
可选地，子区域确定模块310，包括：
第一划分单元，用于若第二视图控件显示在第一视图控件的头部视图区域或者尾部视图区域，则将第一视图控件对应的第一控件区域划分为两个子区域；
第二划分单元，用于若第二视图控件显示在第一视图控件的分隔视图区域，则将第一视图控件对应的第一控件区域划分为三个子区域。
可选地，第一划分单元，具体用于：在第一视图控件对应的第一控件区域中，将第二视图控件对应的第二控件区域作为第一子区域，将除第二控件区域之外的区域作为第二子区域。
可选地，第二划分单元，具体用于：在第一视图控件对应的第一控件区域中，将第二视图控件对应的第二控件区域作为第三子区域，将在第二控件区域的上方区域作为第四子区域，以及将在第二控件区域的下方区域作为第五子区域。
可选地，显示内容保存模块，具体用于：对每个所述子区域的当前显示内容进行截图，确定每个所述子区域对应的截图信息，并基于所述截图信息生成与所述子区域对应的单元格。
可选地，第三视图控件生成模块330，具体用于：
将每个单元格的滑动属性设置为禁止滑动，并基于各单元格的显示位置，对各单元格进行合并，生成第三视图控件；
对每个单元格中的保存信息进行拼接，生成第三视图控件对应的当前显示图像。
可选地，滑动控制模块340，具体用于：
当检测到用户滑动操作时，基于用户滑动操作对第三视图控件的当前显示图像进行滑动；
基于用户滑动操作，将第一视图控件的滑动加载数据或者第二视图控件的滑动加载数据添加至第三视图控件中，并控制第三视图控件对滑动加载数据进行渲染，获得加载显示图像；
根据加载显示图像和当前显示图像，确定滑动后的目标显示图像，并于显示界面中显示目标显示图像。
本公开实施例所提供的视图控件的滑动控制装置可执行本公开任意实施例所提供的视图控件的滑动控制方法，具备执行视图控件的滑动控制方法相应的功能模块和有益效果。
实施例四
图4示出了本公开实施例四提供的一种终端设备的结构示意图。本公开实施例中的终端设备可以包括但不限于诸如移动电话、笔记本电脑、数字广播接收器、PDA(个人数字助理)、PAD(平板电脑)、PMP(便携式多媒体播放器)、车载终端(例如车载导航终端)等等的移动终端以及诸如数字TV、台式计算机等等的固定终端。图4示出的终端设备仅仅是一个示例，不应对本公开实施例的功能和使用范围带来任何限制。
如图4所示，终端设备400可以包括处理装置(例如中央处理器、图形处理器等)401，其可以根据存储在只读存储器(Read-Only Memory，ROM)402中的程序或者从存储装置408加载到随机访问存储器(Random Access Memory，RAM)403中的程序而执行各种适当的动作和处理。在RAM 403中，还存储有终端设备400操作所需的各种程序和数据。处理装置401、ROM 402以及RAM403通过总线404彼此相连。输入/输出(I/O)接口405也连接至总线404。
通常，以下装置可以连接至I/O接口405：包括例如触摸屏、触摸板、键盘、鼠标、摄像头、麦克风、加速度计、陀螺仪等的输入装置406；包括例如液晶显示器(LCD)、扬声器、振动器等的输出装置407；包括例如磁带、硬盘等的存储装置408；以及通信装置409。通信装置409可以允许终端设备400与其他设备进行无线或有线通信以交换数据。虽然图4示出了具有各种装置的终端设备400，但是应理解的是，并不要求实施或具备所有示出的装置。可以替代地实施或具备更多或更少的装置。
特别地，根据本公开的实施例，上文参考流程图描述的过程可以被实现为计算机软件程序。例如，本公开的实施例包括一种计算机程序产品，其包括承载在计算机可读介质上的计算机程序，该计算机程序包含用于执行流程图所示的方法的程序代码。在这样的实施例中，该计算机程序可以通过通信装置409从网络上被下载和安装，或者从存储装置408被安装，或者从ROM 402被安装。在该计算机程序被处理装置401执行时，执行本公开实施例的方法中限定的上述功能。
本公开实施例提出的设备与上述实施例提出的视图控件的滑动控制方法属于同一发明构思，未在本实施例中详尽描述的技术细节可参见上述实施例，并且本实施例具备执行视图控件的滑动控制方法相同的有益效果。
实施例五
本公开实施例五提供了一种计算机存储介质，其上存储有计算机程序，该程序被处理器执行时实现上述任意实施例所提供的视图控件的滑动控制方法。
需要说明的是，本公开上述的计算机存储介质可以是计算机可读信号介质或者计算机可读存储介质或者是上述两者的任意组合。计算机可读存储介质例如可以是——但不限于——电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。计算机可读存储介质的更具体的例子可以包括但不限于：具有一个或多个导线的电连接、便携式计算机磁盘、硬盘、随机访问存储器(Random Access Memory，RAM)、只读存储器(Read-Only Memory，ROM)、可擦式可编程只读存储器(Erasable Programmable Read-OnlyMemory，EPROM)或闪存(FLASH)、光纤、便携式紧凑磁盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。在本公开中，计算机可读存储介质可以是任何包含或存储程序的有形介质，该程序可以被指令执行系统、装置或者器件使用或者与其结合使用。而在本公开中，计算机可读信号介质可以包括在基带中或者作为载波一部分传播的数据信号，其中承载了计算机可读的程序代码。这种传播的数据信号可以采用多种形式，包括但不限于电磁信号、光信号或上述的任意合适的组合。计算机可读信号介质还可以是计算机可读存储介质以外的任何计算机可读介质，该计算机可读信号介质可以发送、传播或者传输用于由指令执行系统、装置或者器件使用或者与其结合使用的程序。计算机可读介质上包含的程序代码可以用任何适当的介质传输，包括但不限于：电线、光缆、RF(射频)等等，或者上述的任意合适的组合。
上述计算机存储可以是上述终端设备中所包含的；也可以是单独存在，而未装配入该终端设备中。
上述计算机存储承载有一个或者多个程序，当上述一个或者多个程序被该终端设备执行时，使得该终端设备：当第二视图控件覆盖在第一视图控件上进行显示时，根据第二视图控件的显示位置，将第一视图控件对应的第一控件区域进行划分，确定至少两个子区域；对每个子区域的当前显示内容进行保存，确定每个子区域对应的保存信息，并基于保存信息生成与子区域对应的单元格；根据各单元格生成第三视图控件，并将第三视图控件显示在第一视图控件和第二视图控件的上方；当检测到用户滑动操作时，基于用户滑动操作控制第三视图控件进行滑动。
可以以一种或多种程序设计语言或其组合来编写用于执行本公开的操作的计算机程序代码，上述程序设计语言包括面向对象的程序设计语言—诸如Java、Smalltalk、C++，还包括常规的过程式程序设计语言—诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算机上执行、部分地在用户计算机上执行、作为一个独立的软件包执行、部分在用户计算机上部分在远程计算机上执行、或者完全在远程计算机或服务器上执行。在涉及远程计算机的情形中，远程计算机可以通过任意种类的网络——包括局域网(LAN)或广域网(WAN)—连接到用户计算机，或者，可以连接到外部计算机(例如利用因特网服务提供商来通过因特网连接)。
附图中的流程图和框图，图示了按照本公开各种实施例的系统、方法和计算机程序产品的可能实现的体系架构、功能和操作。在这点上，流程图或框图中的每个方框可以代表一个模块、程序段、或代码的一部分，该模块、程序段、或代码的一部分包含一个或多个用于实现规定的逻辑功能的可执行指令。也应当注意，在有些作为替换的实现中，方框中所标注的功能也可以以不同于附图中所标注的顺序发生。例如，两个接连地表示的方框实际上可以基本并行地执行，它们有时也可以按相反的顺序执行，这依所涉及的功能而定。也要注意的是，框图和/或流程图中的每个方框、以及框图和/或流程图中的方框的组合，可以用执行规定的功能或操作的专用的基于硬件的系统来实现，或者可以用专用硬件与计算机指令的组合来实现。
描述于本公开实施例中所涉及到的单元可以通过软件的方式实现，也可以通过硬件的方式来实现。其中，单元的名称在某种情况下并不构成对该单元本身的限定，例如，第一子区域确定模块，还可以被描述为“用于当第二视图控件覆盖在第一视图控件上进行显示时，根据所述第二视图控件的显示位置，将所述第一视图控件对应的第一控件区域进行划分，确定至少两个子区域的模块”。
以上描述仅为本公开的较佳实施例以及对所运用技术原理的说明。本领域技术人员应当理解，本公开中所涉及的公开范围，并不限于上述技术特征的特定组合而成的技术方案，同时也应涵盖在不脱离上述公开构思的情况下，由上述技术特征或其等同特征进行任意组合而形成的其它技术方案。例如上述特征与本公开中公开的(但不限于)具有类似功能的技术特征进行互相替换而形成的技术方案。

Claims (10)

1.一种视图控件的滑动控制方法，其特征在于，包括：
当第二视图控件覆盖在第一视图控件上进行显示时，根据所述第二视图控件的显示位置，将所述第一视图控件对应的第一控件区域进行划分，确定至少两个子区域；
对每个所述子区域的当前显示内容进行保存，确定每个所述子区域对应的保存信息，并基于所述保存信息生成与所述子区域对应的单元格；
根据各所述单元格生成第三视图控件，并将所述第三视图控件显示在所述第一视图控件和所述第二视图控件的上方；
当检测到用户滑动操作时，基于所述用户滑动操作控制所述第三视图控件进行滑动。
2.根据权利要求1所述的方法，其特征在于，根据所述第二视图控件的显示位置，将所述第一视图控件对应的第一控件区域进行划分，确定至少两个子区域，包括：
若所述第二视图控件显示在所述第一视图控件的头部视图区域或者尾部视图区域，则将所述第一视图控件对应的第一控件区域划分为两个子区域；
若所述第二视图控件显示在所述第一视图控件的分隔视图区域，则将所述第一视图控件对应的第一控件区域划分为三个子区域，所述分隔视图区域为头部视图区域和尾部视图区域之间的区域。
3.根据权利要求2所述的方法，其特征在于，将所述第一视图控件对应的第一控件区域划分为两个子区域，包括：
在所述第一视图控件对应的第一控件区域中，将所述第二视图控件对应的第二控件区域作为第一子区域，将除所述第二控件区域之外的区域作为第二子区域。
4.根据权利要求2所述的方法，其特征在于，将所述第一视图控件对应的第一控件区域划分为三个子区域，包括：
在所述第一视图控件对应的第一控件区域中，将所述第二视图控件对应的第二控件区域作为第三子区域，将在所述第二控件区域的上方区域作为第四子区域，以及将在所述第二控件区域的下方区域作为第五子区域。
5.根据权利要求1所述的方法，其特征在于，对每个所述子区域的当前显示内容进行保存，确定每个所述子区域对应的保存信息，并基于所述保存信息生成与所述子区域对应的单元格，包括：
对每个所述子区域的当前显示内容进行截图，确定每个所述子区域对应的截图信息，并基于所述截图信息生成与所述子区域对应的单元格。
6.根据权利要求1所述的方法，其特征在于，根据各所述单元格生成第三视图控件，包括：
将每个所述单元格的滑动属性设置为禁止滑动，并基于各所述单元格的显示位置，对各所述单元格进行合并，生成第三视图控件；
对每个所述单元格中的保存信息进行拼接，生成所述第三视图控件对应的当前显示图像。
7.根据权利要求1-6任一所述的方法，其特征在于，当检测到用户滑动操作时，基于所述用户滑动操作控制所述第三视图控件进行滑动，包括：
当检测到用户滑动操作时，基于所述用户滑动操作对所述第三视图控件的当前显示图像进行滑动；
基于所述用户滑动操作，将所述第一视图控件的滑动加载数据或者所述第二视图控件的滑动加载数据添加至所述第三视图控件中，并控制所述第三视图控件对所述滑动加载数据进行渲染，获得加载显示图像；
根据所述加载显示图像和所述当前显示图像，确定滑动后的目标显示图像，并于显示界面中显示所述目标显示图像。
8.一种视图控件的滑动控制装置，其特征在于，包括：
子区域确定模块，用于当第二视图控件覆盖在第一视图控件上进行显示时，根据所述第二视图控件的显示位置，将所述第一视图控件对应的第一控件区域进行划分，确定至少两个子区域；
显示内容保存模块，用于对每个所述子区域的当前显示内容进行保存，确定每个所述子区域对应的保存信息，并基于所述保存信息生成与所述子区域对应的单元格；
第三视图控件生成模块，用于根据各所述单元格生成第三视图控件，并将所述第三视图控件显示在所述第一视图控件和所述第二视图控件的上方；
滑动控制模块，用于当检测到用户滑动操作时，基于所述用户滑动操作控制所述第三视图控件进行滑动。
9.一种终端设备，其特征在于，所述设备包括：
一个或多个处理器；
存储器，用于存储一个或多个程序；
当所述一个或多个程序被所述一个或多个处理器执行，使得所述一个或多个处理器实现如权利要求1-7中任一所述的视图控件的滑动控制方法。
10.一种计算机可读存储介质，其上存储有计算机程序，其特征在于，该程序被处理器执行时实现如权利要求1-7中任一所述的视图控件的滑动控制方法。
CN201910448108.XA 2019-05-27 2019-05-27 一种视图控件的滑动控制方法、装置、设备和存储介质 Active CN110162265B (zh)

Priority Applications (2)

Application Number Priority Date Filing Date Title
CN201910448108.XA CN110162265B (zh) 2019-05-27 2019-05-27 一种视图控件的滑动控制方法、装置、设备和存储介质
PCT/CN2020/073680 WO2020238276A1 (zh) 2019-05-27 2020-01-22 一种视图控件的滑动控制方法、装置、设备和存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201910448108.XA CN110162265B (zh) 2019-05-27 2019-05-27 一种视图控件的滑动控制方法、装置、设备和存储介质

Publications (2)

Publication Number Publication Date
CN110162265A CN110162265A (zh) 2019-08-23
CN110162265B true CN110162265B (zh) 2020-09-25

Family

ID=67629172

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201910448108.XA Active CN110162265B (zh) 2019-05-27 2019-05-27 一种视图控件的滑动控制方法、装置、设备和存储介质

Country Status (2)

Country Link
CN (1) CN110162265B (zh)
WO (1) WO2020238276A1 (zh)

Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101923425A (zh) * 2009-06-10 2010-12-22 中国移动通信集团公司 基于滑动终端屏幕实现窗口切换的方法及其装置
CN106339452A (zh) * 2016-08-25 2017-01-18 北京小米移动软件有限公司 事件响应方法及装置
CN107678817A (zh) * 2017-09-21 2018-02-09 北京三快在线科技有限公司 视图切换方法和装置以及计算设备
CN108228073A (zh) * 2018-01-31 2018-06-29 北京小米移动软件有限公司 界面显示方法及装置

Family Cites Families (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US10133439B1 (en) * 2011-08-29 2018-11-20 Twitter, Inc. User interface based on viewable area of a display
KR20140021893A (ko) * 2012-08-13 2014-02-21 삼성전자주식회사 터치 영역을 볼 수 있도록 디스플레이하는 전자 장치 및 방법
CN104657060B (zh) * 2013-11-19 2019-07-23 腾讯科技（深圳）有限公司 一种移动终端上查看相册的方法及装置
CN106201280B (zh) * 2016-07-07 2020-03-31 北京京东尚科信息技术有限公司 滑动显示控制的方法及装置

Patent Citations (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101923425A (zh) * 2009-06-10 2010-12-22 中国移动通信集团公司 基于滑动终端屏幕实现窗口切换的方法及其装置
CN106339452A (zh) * 2016-08-25 2017-01-18 北京小米移动软件有限公司 事件响应方法及装置
CN107678817A (zh) * 2017-09-21 2018-02-09 北京三快在线科技有限公司 视图切换方法和装置以及计算设备
CN108228073A (zh) * 2018-01-31 2018-06-29 北京小米移动软件有限公司 界面显示方法及装置

Also Published As

Publication number Publication date
WO2020238276A1 (zh) 2020-12-03
CN110162265A (zh) 2019-08-23

Similar Documents

Publication Publication Date Title
CN110046021B (zh) 一种页面显示方法、装置、系统、设备和存储介质
CN109460233B (zh) 页面的原生界面显示更新方法、装置、终端设备及介质
CN109600656B (zh) 一种视频榜单显示方法、装置，终端设备及存储介质
CN110070496B (zh) 图像特效的生成方法、装置和硬件装置
CN109710865B (zh) 开放式自动布局方法、装置、电子设备和存储介质
CN110070593B (zh) 图片预览信息的显示方法、装置、设备及介质
CN114491349B (zh) 页面显示方法、装置、电子设备、存储介质和程序产品
CN111291244B (zh) 房源信息展示方法、装置、终端及存储介质
CN113934349B (zh) 交互方法、装置、电子设备和存储介质
CN113721807B (zh) 一种信息展示方法、装置、电子设备和存储介质
CN113094135B (zh) 页面显示控制方法、装置、设备及存储介质
CN111258519B (zh) 屏幕分屏实现方法、装置、终端和介质
CN112954441B (zh) 视频编辑及播放方法、装置、设备、介质
CN106998493B (zh) 视频的预览方法及装置
CN114817630A (zh) 卡片的显示方法、装置、电子设备、存储介质和程序产品
CN114760515A (zh) 媒体内容的显示方法、装置、设备、存储介质和程序产品
CN109976857B (zh) 终端界面的显示控制方法、装置、存储介质及电子设备
CN115515014B (zh) 媒体内容的分享方法、装置、电子设备和存储介质
CN111309798A (zh) 表格的处理方法、装置、设备和存储介质
CN110162265B (zh) 一种视图控件的滑动控制方法、装置、设备和存储介质
CN113608816B (zh) 进度的调整方法、装置、电子设备和存储介质
CN112312058B (zh) 交互方法、装置和电子设备
CN110807164B (zh) 图像区域的自动调节方法、装置、电子设备及计算机可读存储介质
CN110472220B (zh) 粘贴操作的处理方法、装置、电子设备及计算机可读存储介质
CN116156077A (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