CN114510189A - 一种切换标签的方法、装置、电子设备及存储介质 - Google Patents

Abstract

本公开提供了一种切换标签的方法、装置、电子设备及存储介质，涉及数据处理技术领域，尤其涉及计算机视觉技术领域。具体实现方案为：接收对小程序的显示页面上第一标签的选择操作；响应于选择操作，基于标签与可滚动区域之间的对应关系，确定第一标签对应的第一可滚动区域，其中，第一可滚动区域包括大小动态变化的可滚动区域；获取第一可滚动区域对应的第一滚动距离值；基于第一滚动距离值，将第一可滚动区域显示在显示页面的第一可视区域内。通过本公开，有效地解决了小程序的页面中的动态内容在滚动时显示不准确甚至失效的问题。

Description

一种切换标签的方法、装置、电子设备及存储介质

技术领域

本公开涉及数据处理技术领域，尤其涉及计算机视觉技术领域，具体涉及一种切换标签的方法、装置、电子设备及存储介质。

背景技术

在相关技术中，通常采取利用小程序框架中的相关组件并设置其内部参数的方式实现页面的滚动及标签切换，虽然通过上述方法可以实现标签的切换，但是上述方式仅适用于页面中的元素是静态的场景。因此，相关技术中实现标签切换的方案，存在扩展性和兼容性较差的问题。

发明内容

本公开提供了一种用于切换标签的方法、装置、设备以及存储介质。

根据本公开的一方面，提供了一种切换标签的方法，包括：接收对小程序的显示页面上第一标签的选择操作；响应于选择操作，基于标签与可滚动区域之间的对应关系，确定第一标签对应的第一可滚动区域，其中，第一可滚动区域包括大小动态变化的可滚动区域；获取第一可滚动区域对应的第一滚动距离值；基于第一滚动距离值，将第一可滚动区域显示在显示页面的第一可视区域内。

可选地，上述方法还包括：接收在显示页面上的滚动操作；响应于滚动操作，在显示页面上显示滚动操作对应的第二可视区域；基于标签与可滚动区域之间的对应关系，确定第二可视区域对应的第二标签；对第二标签进行突出显示。

可选地，基于标签与可滚动区域之间的对应关系，确定第二可视区域对应的第二标签包括：确定第二可视区域所属的第二可滚动区域；基于标签与可滚动区域之间的对应关系，确定第二可滚动区域对应的第三标签；将第三标签确定为第二可视区域对应的第二标签。

可选地，确定第二可视区域所属的第二可滚动区域包括：获取滚动操作在第二可视区域中的滚动结束位置；确定滚动结束位置对应的第二滚动距离值；基于第二滚动距离值，以及滚动距离值与可滚动区域之间的对应关系，确定第二滚动距离值对应的目标可滚动区域；确定目标可滚动区域为第二可视区域所属的第二可滚动区域。

可选地，获取第一可滚动区域对应的第一滚动距离值包括：确定第一可滚动区域的顶部距离显示页面的顶部之间的距离为第一可滚动区域对应的第一滚动距离值。

可选地，显示页面的顶部包括：显示页面上显示的标签的底部。

根据本公开的另一方面，提供了一种切换标签的装置，包括：第一接收模块，用于接收对小程序的显示页面上第一标签的选择操作；第一确定模块，用于响应于选择操作，基于标签与可滚动区域之间的对应关系，确定第一标签对应的第一可滚动区域，其中，第一可滚动区域包括大小动态变化的可滚动区域；第一获取模块，用于获取第一可滚动区域对应的第一滚动距离值；

可选地，上述装置还包括：第二接收模块，用于接收在显示页面上的滚动操作；第二显示模块，用于响应于滚动操作，在显示页面上显示滚动操作对应的第二可视区域；第二确定模块，用于基于标签与可滚动区域之间的对应关系，确定第二可视区域对应的第二标签；第三显示模块，用于对第二标签进行突出显示。

可选地，上述第二确定模块包括：第一确定单元，用于确定第二可视区域所属的第二可滚动区域；第二确定单元，用于基于标签与可滚动区域之间的对应关系，确定第二可滚动区域对应的第三标签；第三确定单元，用于将第三标签确定为第二可视区域对应的第二标签。

可选地，上述第一确定单元包括：第一获取单元，用于获取滚动操作在第二可视区域中的滚动结束位置；第四确定单元，用于确定滚动结束位置对应的第二滚动距离值；第五确定单元，用于基于第二滚动距离值，以及滚动距离值与可滚动区域之间的对应关系，确定第二滚动距离值对应的目标可滚动区域；第六确定单元，用于确定目标可滚动区域为第二可视区域所属的第二可滚动区域。

可选地，上述装置还包括：第三确定模块，用于确定第一可滚动区域的顶部距离显示页面的顶部之间的距离为第一可滚动区域对应的第一滚动距离值。

可选地，上述显示页面的顶部包括：显示页面上显示的标签的底部。

根据本公开的还一方面，提供了一种电子设备，包括：至少一个处理器；以及与至少一个处理器通信连接的存储器；其中，存储器存储有可被至少一个处理器执行的指令，指令被至少一个处理器执行，以使至少一个处理器能够执行上述任一项切换标签的方法。

根据本公开的又一方面，提供了一种存储有计算机指令的非瞬时计算机可读存储介质，其中，计算机指令用于使计算机执行上述任一项切换标签的方法。

根据本公开的再一方面，提供了一种计算机程序产品，包括计算机程序，计算机程序在被处理器执行时实现上述任一项切换标签的方法。

应当理解，本部分所描述的内容并非旨在标识本公开的实施例的关键或重要特征，也不用于限制本公开的范围。本公开的其它特征将通过以下的说明书而变得容易理解。

附图说明

附图用于更好地理解本方案，不构成对本公开的限定。其中：

图1是本公开实施例提供的切换标签的方法一的流程图；

图2是本公开实施例提供的切换标签的方法二的流程图；

图3是根据本公开可实施方式提供的切换标签方法的示意图；

图4是根据本公开可实施方式提供的切换标签方法的结果示意图；

图5是根据本公开实施例提供的切换标签装置的结构框图；

图6是根据本公开实施例提供的切换标签装置二的结构框图；

图7示出了可以用来实施本公开的实施例的示例电子设备700的示意性框图。

具体实施方式

以下结合附图对本公开的示范性实施例做出说明，其中包括本公开实施例的各种细节以助于理解，应当将它们认为仅仅是示范性的。因此，本领域普通技术人员应当认识到，可以对这里描述的实施例做出各种改变和修改，而不会背离本公开的范围和精神。同样，为了清楚和简明，以下的描述中省略了对公知功能和结构的描述。

术语说明

Scroll-view，小程序中负责可滚动视图区域的一个组件，称为滚动视图。

Scroll-y，scroll-view中用于控制是否允许纵向滚动的参数。

Scroll-into-view，scroll-view的一个属性，主要作用是用于滚动到制定元素的位置。

createSelectorQuery函数，计算机语言中用于查询节点的函数。

boundingClientRect函数，计算机语言中用于获取节点信息的函数。

层叠样式表(Cascading Style Sheets，简称CSS)，是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

onPageScroll，计算机语言中用于监测页面滚动的函数。

在本公开实施例中，提供了一种切换标签的方法，图1是本公开实施例提供的切换标签方法一的流程图，如图1所示，该方法包括：

步骤S102，接收对小程序的显示页面上第一标签的选择操作；

步骤S104，响应于选择操作，基于标签与可滚动区域之间的对应关系，确定第一标签对应的第一可滚动区域，其中，第一可滚动区域包括大小动态变化的可滚动区域；

步骤S106，获取第一可滚动区域对应的第一滚动距离值；

步骤S108，基于第一滚动距离值，将第一可滚动区域显示在显示页面的第一可视区域内。

通过上述方法，用户可以通过选择标签的方式切换页面显示内容，在针对动态内容进行标签切换时，可以动态地基于第一滚动距离值在显示页面的第一可视区域显示第一滚动区域，完成切换，避免了因动态计算内容高度而导致页面切换不准确甚至失效的问题，该方法的兼容性更强，可扩展性更强，提升了用户的使用感和体验感，也可以用于满足多种业务场景。

作为一种可选的实施例，图2是本公开实施例提供的切换标签方法二的流程图，如图2所示，该方法包括：

步骤S202，接收在显示页面上的滚动操作；

步骤S204，响应于滚动操作，在显示页面上显示滚动操作对应的第二可视区域；

步骤S206，基于标签与可滚动区域之间的对应关系，确定第二可视区域对应的第二标签；

步骤S208，对第二标签进行突出显示。

通过上述方式，用户可以通过滑动页面的方式实现页面显示内容与对应标签的切换，在页面显示内容随滚动操作切换时，可以基于标签和可滚动区域的对应关系，完成标签的切换，避免了因无法动态计算内容高度而导致页面切换不准确甚至失效的问题，该方法的兼容性更强，可扩展性更强，提升了用户的使用感和体验感，也可以用于满足多种业务场景。

作为一种可选的实施例，在基于标签与可滚动区域之间的对应关系，确定第二可视区域对应的第二标签时，可以采用多种方式，例如，可以采用以下方式：先确定第二可视区域所属的第二可滚动区域；之后，基于标签与可滚动区域之间的对应关系，确定第二可滚动区域对应的第三标签；将第三标签确定为第二可视区域对应的第二标签。采用上述方式，由于可视区域与标签之间没有直接的对应关系，因此，可以在确定可视区域所属的可滚动区域之后，基于可滚动区域与标签之间的对应关系间接地确定可视区域与标签之间的关系，以便于针对可视区域中的内容选中对应的标签，完成切换，提高了切换标签时的准确性，进而提高了用户的使用感。

作为一种可选的实施例，在确定第二可视区域所属的第二可滚动区域时可以采用多种方式，例如，可以采用以下方式：获取滚动操作在第二可视区域中的滚动结束位置；确定滚动结束位置对应的第二滚动距离值；基于第二滚动距离值，以及滚动距离值与可滚动区域之间的对应关系，确定第二滚动距离值对应的目标可滚动区域；确定目标可滚动区域为第二可视区域所属的第二可滚动区域。通过上述方式，基于滚动距离值与可滚动区域之间的对应关系来确定第二可视区域所属的第二可滚动区域，由于滚动距离值能够较为准确地将各个可滚动区域进行划分，因此，能够实现准确定位第二可视区域所属的第二可滚动区域。由于页面渲染完成之后每个可滚动区域对应的滚动距离值都是固定的，根据滚动距离值判断可视区域对应的可滚动区域，可以避免出现需要单独处理内容高度固定和动态的两种情况，极大地提高了标签切换以及对应的动态内容切换和显示的准确性，大大地提高了用户的使用感，也促进了该方案应用于多种业务场景的可能。

需要说明的是，上述依据第二可视区域中的滚动结束位置，以及依据该滚动结束位置对应的第二滚动距离值来确定第二可滚动区域仅仅为本公开的一种实现方式，依据第二可视区域中的其它位置也可以采用对上述方式的灵活变化来实现。例如，依据第二可视区域的中间位置，或者开始位置均可以实现上述确定第二可视区域中第二可滚动区域的效果。当然，由于滚动结束位置是滚动结束的标识，在一定程度上具有快速，高效确定可滚动区域的好处。

作为一种可选的实施例，在获取第一可滚动区域对应的第一滚动距离值时可以采用多种方式，例如，可以采用以下方式：确定第一可滚动区域的顶部距离显示页面的顶部之间的距离为第一可滚动区域对应的第一滚动距离值。通过上述方式，可以将每个可滚动区域对应的滚动距离值变为固定的，避免了动态计算内容高度而造成的滑动偏差，进而提高了标签切换时的准确性。需要说明的是，将第一可滚动区域的顶部距离显示页面的顶部之间的距离为第一可滚动区域对应的第一滚动距离值，仅仅为一种举例。该第一滚动距离值的标准还可以是其它的，例如，也可以依据第一可滚动区域的中间位置距离显示页面的顶部之间的距离为该第一可滚动区域对应的第一滚动距离值。

作为一种可选的实施例，显示页面的顶部可以包括多种，例如，可以包括：显示页面上显示的标签的底部。将显示页面上显示的标签的底部作为显示页面的顶部，使得无论当前页面显示的可视区域对应于哪个标签，标签均可以是显示于页面顶部的，这样可以使用户在对页面进行浏览时，能够直接、准确地获知当前正在浏览的页面对应于哪个标签，而不需要重新滑动到最靠前的标签对应的页面上去对应，有效提升用户浏览体验。

基于上述实施例及可选实施例，提供了一种可选实施方式。

APP作为一个闭环生态，无论是获客还是保持客户的粘性都进入瓶颈，传统的电商及相关的线上业务开展已无法满足很多商户及用户的需求。尤其是B端商户，运营成本越来越高，转化却日益低迷。而小程序作为一种不需要下载安装即可使用的应用相较于APP有以下几个优势：

(1)进入门槛更低，开发周期更短，费用更低。

(2)小程序可以让商家建立自己的流量中心，摆脱平台的绑架，实现去中心化，实现直接连接用户。

(3)小程序无需下载即用即走的特点更易触达用户。

这些特点让小程序的应用也越来越普遍，用户也已经习惯了使用小程序来解决生活中的问题。在使用小程序的过程中，页面滑动切换标签功能颇为常见，通过切换标签可以直接让用户精准的获取到信息。对于这个功能，传统的解决方案是采用小程序框架中的<scroll-view>组件来实现，scroll-view是一个可滚动式图区域，可以通过设置内部参数scroll-y实现竖向滚动，并将scroll-into-view指向某滚动子元素的标号(标号不能以数字开头)，这样在设置滚动方向后，便可以按方向滚动到该元素。但是对于一些业务场景，例如可滚动的区域是动态的，并且在滑动页面的时候，标签能够自动切换高亮选中。这样的业务场景通过使用scroll组件的方式不好扩展，并且在动态计算内容高度时，会导致滑动距离出现偏差，在一定程度上会降低切换标签的准确性。另外，对于动态内容，在没有正确计算可滑动内容高度的情况下，会产生滚动不准确甚至失效的问题，因此需要一种扩展性更强，兼容性更高的技术方案。

目前，在小程序中主要采用的方案是原生scroll-view方案，实现如下：

(1)设置scroll-view的滚动方向为竖向滚动，并为该容器设置高度该高必须为固定高度，可以通过层叠样式表(Cascading Style Sheets，简称CSS)来设置高度。

(2)将可滚动内容按标签分类设置标号(标号不能以数字开头)，并在点击标签时将scroll-into-view指向相对应的标号。

该方案可以实现大多数页面滚动切换标签的场景，但对于动态的滚动内容、或者当标签吸顶之后点击以及需要页面上下滑动同时切换标签时，体验较差。

基于小程序原生组件scroll-view实现的方案有以下不足：

(1)当可滚动区域是动态的情况下，而scroll-view所要设置的高度为固定高度，动态计算内容高度，会导致滑动距离出现偏差，不能准确切换标签跳转到相对应的位置。

(2)当导航标签确定位置之后，切换标签后滑动的距离也不是可滑动元素距离顶部的待滚动距离，同样会导致滑动不准确的问题。

(3)当需要页面上下滚动时，标签相应的发生变化，便需要重新计算每个元素距离顶部的距离，scroll-view没有可暴露的属性来支持此功能。

基于上述问题，在本可选实施方式中，提供了一种标签切换方案。在该方案中，通过获取滚动元素的待滚动距离，并在触发页面滚动事件时判断是哪个标签所属的内容，以此来实现页面滑动切换标签，该技术的兼容性和可扩展性更好。

图3是根据本可选实施方式提供的标签切换方法的示意图，如图3所示，该流程包括如下处理：

(1)将导航标签和对应的可滚动区域联系起来，为每个滚动元素分别设置标号，每个标号代表每个标签的可滚动内容，这样不管在点击切换标签，或是页面上下滑动时切换标签，都能一一找到标签和其内容的对应关系。

(2)在小程序页面的mounted(运行)生命周期中，通过上面设置的标号，调用createSelectorQuery函数选中每一个可滚动元素，调用boundingClientRect函数获取到每个可滚动区域距离页面顶部的待滚动距离，该值就是切换标签时页面需要滚动的距离，也是页面上下滑动时，判断处于可视区域的内容是属于哪一个标签的依据。这样，无论滚动内容的高度是否是动态的，在页面渲染完成之后，每个可滚动区域距离顶部的距离都是固定的，不需要单独处理内容高度固定和动态的两种情况。

(3)按可滚动区域排列的顺序存储每个可滚动区域相对应的待滚动距离。

(4)在页面onPageScroll事件中，也就是一旦触发页面滚动事件后，就动态判断待滚动距离，通过将页面滚动距离与每个可滚动区域的待滚动距离进行比较，若页面滚动距离正处于某一待滚动距离并小于下一个滚动区域的待滚动距离，即能判断出，处于可视区域的内容是属于哪个标签，就可以将其标签高亮选中。注意：若标签具有吸顶功能，需要在吸顶时，将滑动的待滚动距离减去吸顶后的标签高度，这样才能更准确比较出滚动的内容是处于哪两个范围之中。

图4是根据本可选实施方式进行标签切换的结果示意图，如图4所示。

上述可选实施方式，相对于相关技术中的实现方案，能够实现标签的准确切换，获得了更强的兼容性和可扩展性，不仅可以使用户获得更好的使用感，还可以应用于多种业务场景中。

在本公开实施例中，还提供了一种切换标签装置，图5是根据本公开实施例提供的切换标签装置一的结构框图，如图5所示，该装置包括：第一接收模块51，第一确定模块52和第一获取模块53，下面对该装置进行说明。

第一接收模块51，用于接收对小程序的显示页面上第一标签的选择操作；第一确定模块52，连接至上述第一接收模块51，用于响应于选择操作，基于标签与可滚动区域之间的对应关系，确定第一标签对应的第一可滚动区域，其中，第一可滚动区域包括大小动态变化的可滚动区域；第一获取模块53，连接至上述第一确定模块52，用于获取第一可滚动区域对应的第一滚动距离值；

作为一种可选的实施例，图6是根据本公开实施例提供的切换标签装置二的结构框图，如图6所示，该装置除包括图5所包括的模块外，还包括：第二接收模块54，第二显示模块55，第二确定模块56和第三显示模块57，下面度该装置进行说明。

第二接收模块54，连接至上述第一获取模块53，用于接收在显示页面上的滚动操作；第二显示模块55，连接至上述第二接收模块54，用于响应于滚动操作，在显示页面上显示滚动操作对应的第二可视区域；第二确定模块56，连接至上述第二显示模块55，用于基于标签与可滚动区域之间的对应关系，确定第二可视区域对应的第二标签；第三显示模块57，连接至上述第二确定模块56，用于对第二标签进行突出显示。

作为一种可选的实施例，上述第二确定模块56包括：第一确定单元，用于确定第二可视区域所属的第二可滚动区域；第二确定单元，用于基于标签与可滚动区域之间的对应关系，确定第二可滚动区域对应的第三标签；第三确定单元，用于将第三标签确定为第二可视区域对应的第二标签。

作为一种可选的实施例，上述第一确定单元包括：第一获取单元，用于获取滚动操作在第二可视区域中的滚动结束位置；第四确定单元，用于确定滚动结束位置对应的第二滚动距离值；第五确定单元，用于基于第二滚动距离值，以及滚动距离值与可滚动区域之间的对应关系，确定第二滚动距离值对应的目标可滚动区域；第六确定单元，用于确定目标可滚动区域为第二可视区域所属的第二可滚动区域。

作为一种可选的实施例，上述装置还包括：第三确定模块，连接至上述，用于确定第一可滚动区域的顶部距离显示页面的顶部之间的距离为第一可滚动区域对应的第一滚动距离值。

作为一种可选的实施例，上述显示页面的顶部包括：显示页面上显示的标签的底部。

本公开的技术方案中，所涉及的用户个人信息的获取，存储和应用等，均符合相关法律法规的规定，且不违背公序良俗。

根据本公开的实施例，本公开还提供了一种电子设备、一种可读存储介质和一种计算机程序产品。

图7示出了可以用来实施本公开的实施例的示例电子设备700的示意性框图。电子设备旨在表示各种形式的数字计算机，诸如，膝上型计算机、台式计算机、工作台、个人数字助理、服务器、刀片式服务器、大型计算机、和其它适合的计算机。电子设备还可以表示各种形式的移动装置，诸如，个人数字处理、蜂窝电话、智能电话、可穿戴设备和其它类似的计算装置。本文所示的部件、它们的连接和关系、以及它们的功能仅仅作为示例，并且不意在限制本文中描述的和/或者要求的本公开的实现。

如图7所示，设备700包括计算单元701，其可以根据存储在只读存储器(ROM)702中的计算机程序或者从存储单元708加载到随机访问存储器(RAM)703中的计算机程序，来执行各种适当的动作和处理。在RAM 703中，还可存储设备700操作所需的各种程序和数据。计算单元701、ROM 702以及RAM 703通过总线704彼此相连。输入/输出(I/O)接口705也连接至总线704。

设备700中的多个部件连接至I/O接口705，包括：输入单元706，例如键盘、鼠标等；输出单元707，例如各种类型的显示器、扬声器等；存储单元708，例如磁盘、光盘等；以及通信单元709，例如网卡、调制解调器、无线通信收发机等。通信单元709允许设备700通过诸如因特网的计算机网络和/或各种电信网络与其他设备交换信息/数据。

计算单元701可以是各种具有处理和计算能力的通用和/或专用处理组件。计算单元701的一些示例包括但不限于中央处理单元(CPU)、图形处理单元(GPU)、各种专用的人工智能(AI)计算芯片、各种运行机器学习模型算法的计算单元、数字信号处理器(DSP)、以及任何适当的处理器、控制器、微控制器等。计算单元701执行上文所描述的各个方法和处理，例如切换标签方法。例如，在一些实施例中，切换标签方法可被实现为计算机软件程序，其被有形地包含于机器可读介质，例如存储单元708。在一些实施例中，计算机程序的部分或者全部可以经由ROM 702和/或通信单元709而被载入和/或安装到设备700上。当计算机程序加载到RAM 703并由计算单元701执行时，可以执行上文描述的方法XXX的一个或多个步骤。备选地，在其他实施例中，计算单元701可以通过其他任何适当的方式(例如，借助于固件)而被配置为执行切换标签方法。

本文中以上描述的系统和技术的各种实施方式可以在数字电子电路系统、集成电路系统、场可编程门阵列(FPGA)、专用集成电路(ASIC)、专用标准产品(ASSP)、芯片上系统的系统(SOC)、负载可编程逻辑设备(CPLD)、计算机硬件、固件、软件、和/或它们的组合中实现。这些各种实施方式可以包括：实施在一个或者多个计算机程序中，该一个或者多个计算机程序可在包括至少一个可编程处理器的可编程系统上执行和/或解释，该可编程处理器可以是专用或者通用可编程处理器，可以从存储系统、至少一个输入装置、和至少一个输出装置接收数据和指令，并且将数据和指令传输至该存储系统、该至少一个输入装置、和该至少一个输出装置。

用于实施本公开的方法的程序代码可以采用一个或多个编程语言的任何组合来编写。这些程序代码可以提供给通用计算机、专用计算机或其他可编程数据处理装置的处理器或控制器，使得程序代码当由处理器或控制器执行时使流程图和/或框图中所规定的功能/操作被实施。程序代码可以完全在机器上执行、部分地在机器上执行，作为独立软件包部分地在机器上执行且部分地在远程机器上执行或完全在远程机器或服务器上执行。

在本公开的上下文中，机器可读介质可以是有形的介质，其可以包含或存储以供指令执行系统、装置或设备使用或与指令执行系统、装置或设备结合地使用的程序。机器可读介质可以是机器可读信号介质或机器可读储存介质。机器可读介质可以包括但不限于电子的、磁性的、光学的、电磁的、红外的、或半导体系统、装置或设备，或者上述内容的任何合适组合。机器可读存储介质的更具体示例会包括基于一个或多个线的电气连接、便携式计算机盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦除可编程只读存储器(EPROM或快闪存储器)、光纤、便捷式紧凑盘只读存储器(CD-ROM)、光学储存设备、磁储存设备、或上述内容的任何合适组合。

为了提供与用户的交互，可以在计算机上实施此处描述的系统和技术，该计算机具有：用于向用户显示信息的显示装置(例如，CRT(阴极射线管)或者LCD(液晶显示器)监视器)；以及键盘和指向装置(例如，鼠标或者轨迹球)，用户可以通过该键盘和该指向装置来将输入提供给计算机。其它种类的装置还可以用于提供与用户的交互；例如，提供给用户的反馈可以是任何形式的传感反馈(例如，视觉反馈、听觉反馈、或者触觉反馈)；并且可以用任何形式(包括声输入、语音输入或者、触觉输入)来接收来自用户的输入。

可以将此处描述的系统和技术实施在包括后台部件的计算系统(例如，作为数据服务器)、或者包括中间件部件的计算系统(例如，应用服务器)、或者包括前端部件的计算系统(例如，具有图形用户界面或者网络浏览器的用户计算机，用户可以通过该图形用户界面或者该网络浏览器来与此处描述的系统和技术的实施方式交互)、或者包括这种后台部件、中间件部件、或者前端部件的任何组合的计算系统中。可以通过任何形式或者介质的数字数据通信(例如，通信网络)来将系统的部件相互连接。通信网络的示例包括：局域网(LAN)、广域网(WAN)和互联网。

计算机系统可以包括客户端和服务器。客户端和服务器一般远离彼此并且通常通过通信网络进行交互。通过在相应的计算机上运行并且彼此具有客户端-服务器关系的计算机程序来产生客户端和服务器的关系。服务器可以是云服务器，也可以为分布式系统的服务器，或者是结合了区块链的服务器。

应该理解，可以使用上面所示的各种形式的流程，重新排序、增加或删除步骤。例如，本发公开中记载的各步骤可以并行地执行也可以顺序地执行也可以不同的次序执行，只要能够实现本公开公开的技术方案所期望的结果，本文在此不进行限制。

上述具体实施方式，并不构成对本公开保护范围的限制。本领域技术人员应该明白的是，根据设计要求和其他因素，可以进行各种修改、组合、子组合和替代。任何在本公开的精神和原则之内所作的修改、等同替换和改进等，均应包含在本公开保护范围之内。

Claims (15)

1.一种切换标签的方法，包括：

接收对小程序的显示页面上第一标签的选择操作；

响应于所述选择操作，基于标签与可滚动区域之间的对应关系，确定所述第一标签对应的第一可滚动区域，其中，所述第一可滚动区域包括大小动态变化的可滚动区域；

获取所述第一可滚动区域对应的第一滚动距离值；

基于所述第一滚动距离值，将所述第一可滚动区域显示在所述显示页面的第一可视区域内。

2.根据权利要求1所述的方法，其中，所述方法还包括：

接收在所述显示页面上的滚动操作；

响应于所述滚动操作，在所述显示页面上显示所述滚动操作对应的第二可视区域；

基于标签与可滚动区域之间的对应关系，确定所述第二可视区域对应的第二标签；

对所述第二标签进行突出显示。

3.根据权利要求2所述的方法，其中，所述基于标签与可滚动区域之间的对应关系，确定所述第二可视区域对应的第二标签包括：

确定所述第二可视区域所属的第二可滚动区域；

基于标签与可滚动区域之间的对应关系，确定所述第二可滚动区域对应的第三标签；

将所述第三标签确定为所述第二可视区域对应的第二标签。

4.根据权利要求3所述的方法，其中，所述确定所述第二可视区域所属的第二可滚动区域包括：

获取所述滚动操作在所述第二可视区域中的滚动结束位置；

确定所述滚动结束位置对应的第二滚动距离值；

基于所述第二滚动距离值，以及滚动距离值与可滚动区域之间的对应关系，确定所述第二滚动距离值对应的目标可滚动区域；

确定所述目标可滚动区域为所述第二可视区域所属的第二可滚动区域。

5.根据权利要求1至4中任一项所述的方法，其中，所述获取所述第一可滚动区域对应的第一滚动距离值包括：

确定所述第一可滚动区域的顶部距离所述显示页面的顶部之间的距离为所述第一可滚动区域对应的第一滚动距离值。

6.根据权利要求5所述的方法，其中，所述显示页面的顶部包括：所述显示页面上显示的标签的底部。

7.一种切换标签的装置，包括：

第一接收模块，用于接收对小程序的显示页面上第一标签的选择操作；

第一确定模块，用于响应于所述选择操作，基于标签与可滚动区域之间的对应关系，确定所述第一标签对应的第一可滚动区域，其中，所述第一可滚动区域包括大小动态变化的可滚动区域；

第一获取模块，用于获取所述第一可滚动区域对应的第一滚动距离值；

第一显示模块，用于基于所述第一滚动距离值，将所述第一可滚动区域显示在所述显示页面的第一可视区域内。

8.根据权利要求7所述的装置，其中，所述装置还包括：

第二接收模块，用于接收在所述显示页面上的滚动操作；

第二显示模块，用于响应于所述滚动操作，在所述显示页面上显示所述滚动操作对应的第二可视区域；

第二确定模块，用于基于标签与可滚动区域之间的对应关系，确定所述第二可视区域对应的第二标签；

第三显示模块，用于对所述第二标签进行突出显示。

9.根据权利要求8所述的装置，其中，所述第二确定模块包括：

第一确定单元，用于确定所述第二可视区域所属的第二可滚动区域；

第二确定单元，用于基于标签与可滚动区域之间的对应关系，确定所述第二可滚动区域对应的第三标签；

第三确定单元，用于将所述第三标签确定为所述第二可视区域对应的第二标签。

10.根据权利要求9所述的方法，其中，所述第一确定单元包括：

第一获取单元，用于获取所述滚动操作在所述第二可视区域中的滚动结束位置；

第四确定单元，用于确定所述滚动结束位置对应的第二滚动距离值；

第五确定单元，用于基于所述第二滚动距离值，以及滚动距离值与可滚动区域之间的对应关系，确定所述第二滚动距离值对应的目标可滚动区域；

第六确定单元，用于确定所述目标可滚动区域为所述第二可视区域所属的第二可滚动区域。

11.根据权利要求7至10中任一项所述的装置，其中，所述装置包括：

第三确定模块，用于确定所述第一可滚动区域的顶部距离所述显示页面的顶部之间的距离为所述第一可滚动区域对应的第一滚动距离值。

12.根据权利要求11所述的装置，其中，所述显示页面的顶部包括：所述显示页面上显示的标签的底部。

13.一种电子设备，包括：

至少一个处理器；以及

与所述至少一个处理器通信连接的存储器；其中，

所述存储器存储有可被所述至少一个处理器执行的指令，所述指令被所述至少一个处理器执行，以使所述至少一个处理器能够执行权利要求1至6中任一项所述的方法。

14.一种存储有计算机指令的非瞬时计算机可读存储介质，其中，所述计算机指令用于使所述计算机执行根据权利要求1至6中任一项所述的方法。

15.一种计算机程序产品，包括计算机程序，所述计算机程序在被处理器执行时实现根据权利要求1至6中任一项所述的方法。

Images