一种页面内容处理方法、装置、设备及介质

技术领域

本公开涉及计算机技术领域，尤其涉及一种页面内容处理方法、装置、设备及介质。

背景技术

随着互联网技术的发展，各种应用程序进入人们生活，在应用程序中最常见的一个效果是用户控制页面中的内容进行折叠和展开。相关技术中，页面中内容的折叠和展示可以通过编写代码、设置页面元素样式等方式实现，但是存在成本较高、缩放变形等缺陷。

发明内容

为了解决上述技术问题或者至少部分地解决上述技术问题，本公开提供了一种页面内容处理方法、装置、设备及介质。

本公开实施例提供了一种页面内容处理方法，所述方法包括：

通过内容处理指令对页面的目标元素进行折叠展开配置，其中，所述内容处理指令为vue指令；

响应于所述目标元素的折叠请求或展开请求，基于所述折叠展开配置的结果对所述目标元素进行折叠操作或展开操作。

本公开实施例中，通过内容处理指令对页面的目标元素进行折叠展开配置，包括：

获取所述目标元素的折叠展开参数和初始展开高度，所述折叠展开参数包括折叠高度和折叠状态参数；

通过所述内容处理指令将所述折叠状态参数和所述初始展开高度保存在所述目标元素的元素属性中；

为所述目标元素添加页面变动监视器，所述页面变动监视器用于响应于所述目标元素的变动获取所述目标元素在变动后的目标展开高度，并将所述初始展开高度更新为所述目标展开高度。

本公开实施例中，所述元素属性包括高度属性和折叠属性，所述高度属性保存所述初始展开高度或所述目标展开高度，所述折叠属性保存所述折叠状态参数。

本公开实施例中，基于所述折叠展开配置的结果对所述目标元素进行折叠操作或展开操作，包括：

获取所述折叠请求或所述展开请求中包括的实时折叠状态参数；

如果所述实时折叠状态参数与所述目标元素的元素属性中的折叠状态参数不同，则基于所述元素属性对所述目标元素进行折叠操作或展开操作。

本公开实施例中，所述折叠操作用于将所述目标元素从当前高度折叠到所述元素属性中折叠高度，所述展开操作用于将所述目标元素从当前高度展开到所述元素属性中展开高度。

本公开实施例中，所述方法还包括：

将所述目标元素的元素属性中折叠状态参数变更为所述实时折叠状态参数。

本公开实施例中，通过内容处理指令对页面的目标元素进行折叠展开配置，包括：

通过内容处理指令为所述目标元素添加过渡动画属性，其中，所述过渡动画属性包括动画时间，用于在所述目标元素折叠或展开时展示所述动画时间的过渡动画。

本公开实施例还提供了一种页面内容处理装置，所述装置包括：

配置模块，用于通过内容处理指令对页面的目标元素进行折叠展开配置，其中，所述内容处理指令为vue指令；

处理模块，用于响应于所述目标元素的折叠请求或展开请求，基于所述折叠展开配置的结果对所述目标元素进行折叠操作或展开操作。

本公开实施例还提供了一种电子设备，所述电子设备包括：处理器；用于存储所述处理器可执行指令的存储器；所述处理器，用于从所述存储器中读取所述可执行指令，并执行所述指令以实现如本公开实施例提供的页面内容处理方法。

本公开实施例还提供了一种计算机可读存储介质，所述存储介质存储有计算机程序，所述计算机程序用于执行如本公开实施例提供的页面内容处理方法。

本公开实施例提供的技术方案与现有技术相比具有如下优点：本公开实施例提供的页面内容处理方案，通过vue指令对页面的目标元素进行折叠展开配置，来实现对目标元素进行折叠或展开的操作。采用上述技术方案，通过vue指令即可实现对页面的目标元素的折叠或展开的控制，无需在每个页面编写大量重复的代码，从而节约了人工成本；而且，通过vue指令实现对页面的目标元素的折叠或展开的控制，只是隐藏或展示目标元素，不会由于目标元素高度的变化而在高度方向上对页面内容进行缩放，因而避免了目标元素缩放变形，保证了交互效果。

附图说明

此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本公开的实施例，并与说明书一起用于解释本公开的原理。

为了更清楚地说明本公开实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，对于本领域普通技术人员而言，在不付出创造性劳动性的前提下，还可以根据这些附图获得其他的附图。

图1为本公开实施例提供的一种页面内容处理方法的流程示意图；

图2为本公开实施例提供的一种页面内容的折叠与展开示意图；

图3为本公开实施例提供的另一种页面内容处理方法的流程示意图；

图4为本公开实施例提供的另一种页面内容处理方法的流程示意图；

图5为本公开实施例提供的一种页面内容处理装置的结构示意图；

图6为本公开实施例提供的一种电子设备的结构示意图。

具体实施方式

为了能够更清楚地理解本公开的上述目的、特征和优点，下面将对本公开的方案进行进一步描述。需要说明的是，在不冲突的情况下，本公开的实施例及实施例中的特征可以相互组合。

在下面的描述中阐述了很多具体细节以便于充分理解本公开，但本公开还可以采用其他不同于在此描述的方式来实施；显然，说明书中的实施例只是本公开的一部分实施例，而不是全部的实施例。

网页应用和APP应用中最常见的一个效果就是用户控制页面内容的“折叠和展开”，而在前端程序中主流的实现方案包括：一、针对每一个页面编写折叠展开功能，先通过js(javascript)获取需要折叠的页面元素的初始高度，再给该页面元素设置transition样式过渡，让折叠展开的过程具有平滑的动画效果，最后在触发折叠或展开时，控制内容的高度为0或者初始高度来实现效果，但该方案的缺点是需要在不同页面写大量重复的代码，人工成本高。二、通过设置页面元素样式scaleY为0或1，也就是在元素的Y轴方向上缩放来解决高度可能会变化的问题，但在缩放过程中，元素的内容会因为缩放变形，交互效果不够理想。

为了解决上述问题，本公开实施例提供了一种页面内容处理方法，下面结合具体的实施例对该方法进行介绍。

图1为本公开实施例提供的一种页面内容处理方法的流程示意图，该方法可以由页面内容处理装置执行，其中该装置可以采用软件和/或硬件实现，一般可集成在电子设备中。如图1所示，该方法包括：

步骤101、通过内容处理指令对页面的目标元素进行折叠展开配置，其中，内容处理指令为vue指令。

上述vue指令为vue自定义指令，vue自定义指令是对vue基本指令(例如v-model和v-show等指令)的扩展和补充，是用来操作DOM的，不仅可用于定义任何DOM操作，并且是可复用的。所谓DOM指的是文档对象模型(Document Object Model)。它提供了对文档结构化的描述，并将HTML页面与脚本、程序语言联系起来。

示例性的，开发用户自定义vue指令v-fold，通过向vue指令传入用于页面的目标元素折叠或展开的参数，包括但不限于是折叠状态参数、目标元素折叠后的高度(本公开称为折叠高度)、目标元素的样式属性(例如折叠或展开过程中展示的过渡动画)、动画时间和回调函数。通过vue指令将折叠状态参数和初始展开高度(可通过页面变动监视器获取)保存在目标元素的元素属性中，从而可根据配置的结果控制目标元素的折叠或展开。本公开实施例中，折叠状态参数用于表示页面的目标元素当前处于折叠状态或是展开状态；目标元素的样式属性可以为一个元素在不同状态之间切换的时候定义不同的过渡效果，本公开实施例在目标元素的折叠或展开过程中展示过渡动画。

步骤102、响应于目标元素的折叠请求或展开请求，基于折叠展开配置的结果对目标元素进行折叠操作或展开操作。

示例性的，页面可显示用于触发折叠指令或展开指令的控件。如图2所示，在页面的目标元素展开后，页面会显示折叠控件，当用户点击折叠控件后，便会触发折叠指令，此时，根据对目标元素折叠配置的结果对目标元素进行折叠操作。而在页面的目标元素折叠后，页面会显示展开控件，当用户点击展开控件后，便会触发展开指令，此时，根据对目标元素展开配置的结果对目标元素进行展开操作。可以理解的是，本公开实施例对上述控件的展现形式不作限定，在一些实施方式中，控件可以显示为向上折叠或向下展开的指示标。

本公开实施例提供的页面内容处理方案，通过vue指令对页面的目标元素进行折叠展开配置，来实现对目标元素进行折叠或展开的操作。采用上述技术方案，通过vue指令即可实现对页面的目标元素的折叠或展开的控制，无需在每个页面编写大量重复的代码，从而节约了人工成本；而且，通过vue指令实现对页面的目标元素的折叠或展开的控制，只是隐藏或展示目标元素，不会由于目标元素高度的变化而在高度方向上对页面内容进行缩放，因而避免了目标元素缩放变形，保证了交互效果。

图3为本公开实施例提供的另一种页面内容处理方法的流程示意图，本实施例在上述实施例的基础上，将步骤通过内容处理指令对页面的目标元素进行折叠展开配置优化为：获取目标元素的折叠展开参数和初始展开高度，折叠展开参数包括折叠高度和折叠状态参数；通过内容处理指令将折叠状态参数和初始展开高度保存在目标元素的元素属性中；为目标元素添加页面变动监视器，页面变动监视器用于响应于目标元素的变动获取目标元素在变动后的目标展开高度，并将初始展开高度更新为目标展开高度。如图3所示，该方法包括：

步骤201、获取目标元素的折叠展开参数和初始展开高度，折叠展开参数包括折叠高度和折叠状态参数。

示例性的，开发用户对折叠展开参数进行配置，并将折叠展开参数输入至vue指令。但考虑到因各种场景因素(比如页面内容是异步获取，某些操作添加或删除了页面内容中的元素等)会造成页面内容的高度发生改变，因此，折叠展开参数中不包含目标元素的展开高度。而折叠高度可设置为0(即目标元素完全隐藏)或其他小于页面内容高度的任一高度。另外，对于折叠状态参数，可根据页面内容的初始折叠展开状态进行配置。例如，初次浏览页面内容时，页面内容通常是折叠后的，此时，设置的折叠状态参数应使页面内容(实际为页面的目标元素)处于折叠状态。本实施例的折叠状态参数可采用两种不同的标识符，以表示页面内容折叠或展开。例如，可用“ture”代表折叠，用“false”代表展开。

步骤202、通过内容处理指令将折叠状态参数和初始展开高度保存在目标元素的元素属性中。

通过内容处理指令将折叠展开参数保存在目标元素的元素属性中，实现vue指令与目标元素的绑定，以此实现vue指令对目标元素折叠或展开的控制。

在一些实施例中，元素属性包括高度属性和折叠属性，其中，高度属性保存初始展开高度或下文中的目标展开高度，折叠属性保存折叠状态参数。另外，为了便于查看和更新元素属性，可分别对高度属性和折叠属性进行命名，例如，高度属性命名为fold-data-height，折叠属性命名为fold-data-show。

步骤203、为目标元素添加页面变动监视器，页面变动监视器用于响应于目标元素的变动获取目标元素在变动后的目标展开高度，并将初始展开高度更新为目标展开高度。

目前，因各种场景因素(比如页面内容是异步获取，某些操作添加或删除了页面内容中的元素等)会造成页面内容的高度发生改变，开发用户会在不同场景中重复编写更新内容高度的代码，以此在页面内容高度改变后重新获取页面内容高度。但该方案不仅需要编辑大量重复的代码，而且还会因为遗漏部分代码而出现漏洞(bug)。对此，本实施例可为绑定vue指令的目标元素添加页面变动监视器(例如MutationObserver)，来监视页面目标元素的变动。本实施例中，目标元素的任何变动，比如节点的增减、属性的变动和文本内容的变动等都会被页面变动监视器监视到。当页面变动监视器监视到目标元素发生影响页面内容高度的变动时，获取目标元素在变动后的高度作为目标元素的目标展开高度并将初始展开高度更新为目标展开高度，保存在元素属性的高度属性中，从而在对目标元素的下次展开操作中，基于该高度属性中的目标展开高度对目标元素进行展开，以确保展示全部的目标元素。

由此，可通过页面变动监视器来监视目标元素的变动，并响应于目标元素的变动自动更新目标元素的展开高度。开发用户无需考虑因各种场景因素而造成的页面内容高度的改变，从而不需要在不同场景中重复编写更新页面内容高度的代码，进一步节省了人工成本。

步骤204、响应于目标元素的折叠请求或展开请求，基于折叠展开配置的结果对目标元素进行折叠操作或展开操作。

本公开实施例提供的页面内容处理方案，开发用户只需通过vue指令将折叠高度和折叠状态参数保存在目标元素的元素属性中，通过为目标元素添加页面变动监视器来监视目标元素的变动并自动更新目标元素的展开高度到元素属性中，从而无需考虑因各种场景因素而造成的页面内容高度的改变，更不需要在不同场景中重复编写更新页面内容高度的代码，进一步节省了人工成本。

图4为本公开实施例提供的另一种页面内容处理方法的流程示意图，本实施例在上述实施例的基础上，将步骤基于折叠展开配置的结果对目标元素进行折叠操作或展开操作优化为：获取折叠请求或展开请求中包括的实时折叠状态参数；如果实时折叠状态参数与目标元素的元素属性中的折叠状态参数不同，则基于元素属性对目标元素进行折叠操作或展开操作。如图4所示，该方法包括：

步骤301、获取目标元素的折叠展开参数和初始展开高度，折叠展开参数包括折叠高度和折叠状态参数。

步骤302、通过内容处理指令将折叠状态参数和初始展开高度保存在目标元素的元素属性中。

步骤303、为目标元素添加页面变动监视器，页面变动监视器用于响应于目标元素的变动获取目标元素在变动后的目标展开高度，并将初始展开高度更新为目标展开高度。

步骤304、响应于目标元素的折叠请求或展开请求，获取折叠请求或展开请求中包括的实时折叠状态参数。

步骤305、如果实时折叠状态参数与目标元素的元素属性中的折叠状态参数不同，则基于元素属性对目标元素进行折叠操作或展开操作。

由于指令的特性，当元素所在页面的部分属性发生变化时，会自动更新一些操作，可能会重复调用指令。但很可能存在与指令无关的其他元素属性发生变化而触发了指令，导致目标元素折叠或展开。因此，需要获取折叠请求或展开请求中实时折叠状态参数，并将实时折叠状态参数与保存在折叠属性中的折叠状态参数进行对比，判断是不是折叠属性产生了变化。如果实时折叠状态参数与目标元素的元素属性中的折叠状态参数相同，则表明不是由于折叠属性的变化触发了vue指令，此时不会对目标元素进行折叠或展开操作。如果实时折叠状态参数与目标元素的元素属性中的折叠状态参数不同，则表明是由于折叠属性的变化触发了vue指令，此时对目标元素进行折叠或展开操作。例如，如果实时折叠状态参数为“ture”，元素属性中的折叠状态参数也为“ture”，则不会对目标元素进行折叠操作；而如果实时折叠状态参数为“ture”，但元素属性中的折叠状态参数为“false”，则对目标元素进行折叠操作。由此，可避免对目标元素进行折叠或展开的误操作。其中，折叠操作用于将目标元素从当前高度折叠到元素属性中折叠高度，展开操作用于将目标元素从当前高度展开到元素属性中展开高度。

本公开实施例提供的页面内容处理方案，通过将实时折叠状态参数与目标元素的元素属性中的折叠状态参数进行对比，只有在实时折叠状态参数与目标元素的元素属性中的折叠状态参数不同时，才会基于元素属性对目标元素进行折叠操作或展开操作，如此避免对目标元素进行折叠或展开的误操作。

基于上述实施例，在一些实施方式中，在完成对目标元素进行折叠操作或展开操作之后，将目标元素的元素属性中折叠状态参数变更为实时折叠状态参数。例如，实时折叠状态参数为“ture”，元素属性中的折叠状态参数为“false”，在完成对目标元素进行折叠操作之后，将元素属性中的折叠状态参数变更为“ture”，即对元素属性中的折叠状态参数进行更新，以在后续获取的实时折叠状态参数为“false”时，能够准确地对目标元素进行展开操作。由此，通过将目标元素的元素属性中折叠状态参数变更为实时折叠状态参数，能够准确地对目标元素进行折叠操作或展开操作。

目前，可通过设置元素在展开时的高度(称为max-height)为一个远大于元素高度的值，利用max-height的特点，即在元素实际高度小于max-height时，会保持元素实际的高度，并且元素的样式属性也可以作用于max-height，这样可以很好解决元素高度变化的问题。但元素折叠时，会以max-height的值为起点来执行过渡动画，所以页面内容实际的过渡动画时间会小于设置的动画时间并且难以控制。针对该技术问题，在本公开一些实施例中，通过内容处理指令对页面的目标元素进行折叠展开配置，也可以包括：通过内容处理指令为目标元素添加过渡动画属性，其中，过渡动画属性包括动画时间，用于在目标元素折叠或展开时展示动画时间的过渡动画。由此，折叠或展开过程中的整个过渡动画时间会根据配置的动画时间而固定，从而解决了动画时间因为高度不同而不可控的问题。

另外，在一些实施例中，在展示过渡动画的过程中，可监听transitionend事件，在过渡动画结束后，会触发transitionend事件，此时可采用相关监听器(如浏览器自带的监听器)监听到transitionend事件，从而会调用通过内容处理指令配置的回调函数，从而让开发用户在过渡动画结束后相对精准地控制页面由于折叠或展开造成页面重排后的一些其他操作。

此外，当从当前页面更换到其他页面后，清除transitionend事件，避免占用浏览器的内存。

图5为本公开实施例提供的一种页面内容处理装置的结构示意图，该装置可由软件和/或硬件实现，一般可集成在电子设备中。如图5所示，该装置包括：

配置模块401，用于通过内容处理指令对页面的目标元素进行折叠展开配置，其中，内容处理指令为vue指令；

处理模块402，用于响应于目标元素的折叠请求或展开请求，基于折叠展开配置的结果对目标元素进行折叠操作或展开操作。

在一些实施例中，配置模块401具体用于：

获取目标元素的折叠展开参数和初始展开高度，折叠展开参数包括折叠高度和折叠状态参数；

通过内容处理指令将折叠状态参数和初始展开高度保存在目标元素的元素属性中；

为目标元素添加页面变动监视器，页面变动监视器用于响应于目标元素的变动获取目标元素在变动后的目标展开高度，并将初始展开高度更新为目标展开高度。

在一些实施例中，元素属性包括高度属性和折叠属性，高度属性保存初始展开高度或目标展开高度，折叠属性保存折叠状态参数。

在一些实施例中，处理模块402具体用于：

获取折叠请求或展开请求中包括的实时折叠状态参数；

如果实时折叠状态参数与目标元素的元素属性中的折叠状态参数不同，则基于元素属性对目标元素进行折叠操作或展开操作。

在一些实施例中，折叠操作用于将目标元素从当前高度折叠到元素属性中折叠高度，展开操作用于将目标元素从当前高度展开到元素属性中展开高度。

在一些实施例中，装置还包括更新模块，用于：

将目标元素的元素属性中折叠状态参数变更为实时折叠状态参数。

在一些实施例中，配置模块401还用于：

通过内容处理指令为目标元素添加过渡动画属性，其中，过渡动画属性包括动画时间，用于在目标元素折叠或展开时展示动画时间的过渡动画。

本公开实施例所提供的页面内容处理装置可执行本公开任意实施例所提供的页面内容处理方法，具备执行方法相应的功能模块和有益效果。

图6为本公开实施例提供的一种电子设备的结构示意图。如图6所示，电子设备500包括一个或多个处理器501和存储器502。

处理器501可以是中央处理单元(CPU)或者具有数据处理能力和/或指令执行能力的其他形式的处理单元，并且可以控制电子设备500中的其他组件以执行期望的功能。

存储器502可以包括一个或多个计算机程序产品，所述计算机程序产品可以包括各种形式的计算机可读存储介质，例如易失性存储器和/或非易失性存储器。所述易失性存储器例如可以包括随机存取存储器(RAM)和/或高速缓冲存储器(cache)等。所述非易失性存储器例如可以包括只读存储器(ROM)、硬盘、闪存等。在所述计算机可读存储介质上可以存储一个或多个计算机程序指令，处理器501可以运行所述程序指令，以实现上文所述的本公开的实施例的页面内容处理方法以及/或者其他期望的功能。在所述计算机可读存储介质中还可以存储诸如输入信号、信号分量、噪声分量等各种内容。

在一个示例中，电子设备500还可以包括：输入装置503和输出装置504，这些组件通过总线系统和/或其他形式的连接机构(未示出)互连。

此外，该输入装置503还可以包括例如键盘、鼠标等等。

该输出装置504可以向外部输出各种信息，包括确定出的距离信息、方向信息等。该输出装置504可以包括例如显示器、扬声器、打印机、以及通信网络及其所连接的远程输出设备等等。

当然，为了简化，图6中仅示出了该电子设备500中与本公开有关的组件中的一些，省略了诸如总线、输入/输出接口等等的组件。除此之外，根据具体应用情况，电子设备500还可以包括任何其他适当的组件。

除了上述方法和设备以外，本公开的实施例还可以是计算机程序产品，其包括计算机程序指令，所述计算机程序指令在被处理器运行时使得所述处理器执行本公开实施例所提供的页面内容处理方法。

所述计算机程序产品可以以一种或多种程序设计语言的任意组合来编写用于执行本公开实施例操作的程序代码，所述程序设计语言包括面向对象的程序设计语言，诸如Java、C++等，还包括常规的过程式程序设计语言，诸如“C”语言或类似的程序设计语言。程序代码可以完全地在用户计算设备上执行、部分地在用户设备上执行、作为一个独立的软件包执行、部分在用户计算设备上部分在远程计算设备上执行、或者完全在远程计算设备或服务器上执行。

此外，本公开的实施例还可以是计算机可读存储介质，其上存储有计算机程序指令，所述计算机程序指令在被处理器运行时使得所述处理器执行本公开实施例所提供的页面内容处理方法。

所述计算机可读存储介质可以采用一个或多个可读介质的任意组合。可读介质可以是可读信号介质或者可读存储介质。可读存储介质例如可以包括但不限于电、磁、光、电磁、红外线、或半导体的系统、装置或器件，或者任意以上的组合。可读存储介质的更具体的例子(非穷举的列表)包括：具有一个或多个导线的电连接、便携式盘、硬盘、随机存取存储器(RAM)、只读存储器(ROM)、可擦式可编程只读存储器(EPROM或闪存)、光纤、便携式紧凑盘只读存储器(CD-ROM)、光存储器件、磁存储器件、或者上述的任意合适的组合。

需要说明的是，在本文中，诸如“第一”和“第二”等之类的关系术语仅仅用来将一个实体或者操作与另一个实体或操作区分开来，而不一定要求或者暗示这些实体或操作之间存在任何这种实际的关系或者顺序。而且，术语“包括”、“包含”或者其任何其他变体意在涵盖非排他性的包含，从而使得包括一系列要素的过程、方法、物品或者设备不仅包括那些要素，而且还包括没有明确列出的其他要素，或者是还包括为这种过程、方法、物品或者设备所固有的要素。在没有更多限制的情况下，由语句“包括一个……”限定的要素，并不排除在包括所述要素的过程、方法、物品或者设备中还存在另外的相同要素。

以上所述仅是本公开的具体实施方式，使本领域技术人员能够理解或实现本公开。对这些实施例的多种修改对本领域的技术人员来说将是显而易见的，本文中所定义的一般原理可以在不脱离本公开的精神或范围的情况下，在其它实施例中实现。因此，本公开将不会被限制于本文所述的这些实施例，而是要符合与本文所公开的原理和新颖特点相一致的最宽的范围。