CN110457043A - 基于React的页面处理方法以及装置 - Google Patents

Abstract

本申请公开了一种基于React的页面处理方法以及装置。该方法包括配置容器组件，其中所述容器组件中对于长列表进行配置；通过所述容器组件提供列表数据和配置结构化数据的传入接口；抽取所述提供列表数据中的键标识作为索引；监听页面滚动事件，执行相应的页面滚动和索引滚动追踪。本申请解决了在前端页面开发中展示数据列表需要重复编译代码增加人力成本的技术问题。通过本申请的容器组件，抽象并提取了业务的重复逻辑，减少重复代码的书写。

Description

基于React的页面处理方法以及装置

技术领域

本申请涉及前端开发领域，具体而言，涉及一种基于React的页面处理方法以及装置。

背景技术

前端开发中会遇到展示大量结构化数据列表的需求，例如城市列表，车辆品牌列表，信用卡品牌列表等等。

发明人发现，如果每次需求都需要展示大量结构化数据列表，则耗费人力成本、增加重复劳动。

针对相关技术中在前端页面开发中展示数据列表需要重复编译代码增加人力成本的问题，目前尚未提出有效的解决方案。

发明内容

本申请的主要目的在于提供一种基于React的页面处理方法以及装置，以解决在前端页面开发中展示数据列表需要重复编译代码增加人力成本的问题。

为了实现上述目的，根据本申请的一个方面，提供了一种基于React的页面处理方法。

根据本申请的基于React的页面处理方法包括：配置容器组件，其中所述容器组件中对于长列表进行配置；通过所述容器组件提供列表数据和配置结构化数据的传入接口；抽取所述提供列表数据中的键标识作为索引；监听页面滚动事件，执行相应的页面滚动和索引滚动追踪。

进一步地，所述配置容器组件包括：

在所述容器组件中列表样式用于根据列表项数据中的Type值选择展示；

在所述容器组件中索引用于根据预设配置改变键标识的别名或配置成图标形式。

进一步地，所述配置容器组件，用于在在所述容器组件中列表样式中配置长列表。

进一步地，监听页面滚动事件，执行相应的页面滚动和索引滚动追踪包括：

在所述容器组件提供列表数据data和配置config的结构化数据的传入接口；

监听页面滚动事件，根据在所述传入接口获取的数据，以使在手指到达位置执行相应的页面滚动和索引滚动追踪。

进一步地，监听页面滚动事件，执行相应的页面滚动和索引滚动追踪之后，还包括：

根据列表元素点击事件的回调接口，当监听到点击列表中任一项的点击事件时，传回该项的数据。

为了实现上述目的，根据本申请的另一方面，提供了一种基于React的页面处理装置。

根据本申请的基于React的页面处理装置包括：容器配置模块，用于配置容器组件，其中所述容器组件中对于长列表进行配置；数据接口模块，用于通过所述容器组件提供列表数据和配置结构化数据的传入接口；索引模块，用于抽取所述提供列表数据中的键标识作为索引；监听模块，用于监听页面滚动事件，执行相应的页面滚动和索引滚动追踪。

进一步地，所述容器配置模块，用于

在所述容器组件中列表样式用于根据列表项数据中的Type值选择展示；

在所述容器组件中索引用于根据预设配置改变键标识的别名或配置成图标形式。

进一步地，所述容器配置模块，用于在在所述容器组件中列表样式中配置长列表。

进一步地，所述监听模块，用于

在所述容器组件提供列表数据data和配置config的结构化数据的传入接口；

监听页面滚动事件，根据在所述传入接口获取的数据，以使在手指到达位置执行相应的页面滚动和索引滚动追踪。

进一步地，还包括：回调模块，用于根据列表元素点击事件的回调接口，当监听到点击列表中任一项的点击事件时，传回该项的数据。

在本申请实施例中基于React的页面处理方法及装置，采用配置容器组件的方式，通过所述容器组件提供列表数据和配置结构化数据的传入接口，达到了抽取所述提供列表数据中的键标识作为索引的目的，从而实现了监听页面滚动事件，执行相应的页面滚动和索引滚动追踪的技术效果，进而解决了在前端页面开发中展示数据列表需要重复编译代码增加人力成本的技术问题。

附图说明

构成本申请的一部分的附图用来提供对本申请的进一步理解，使得本申请的其它特征、目的和优点变得更明显。本申请的示意性实施例附图及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：

图1是根据本申请实施例的基于React的页面处理方法流程示意图；

图2是根据本申请实施例的基于React的页面处理装置结构示意图。

具体实施方式

为了使本技术领域的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。

需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。

在本申请中，术语“上”、“下”、“左”、“右”、“前”、“后”、“顶”、“底”、“内”、“外”、“中”、“竖直”、“水平”、“横向”、“纵向”等指示的方位或位置关系为基于附图所示的方位或位置关系。这些术语主要是为了更好地描述本申请及其实施例，并非用于限定所指示的装置、元件或组成部分必须具有特定方位，或以特定方位进行构造和操作。

并且，上述部分术语除了可以用于表示方位或位置关系以外，还可能用于表示其他含义，例如术语“上”在某些情况下也可能用于表示某种依附关系或连接关系。对于本领域普通技术人员而言，可以根据具体情况理解这些术语在本申请中的具体含义。

此外，术语“安装”、“设置”、“设有”、“连接”、“相连”、“套接”应做广义理解。例如，可以是固定连接，可拆卸连接，或整体式构造；可以是机械连接，或电连接；可以是直接相连，或者是通过中间媒介间接相连，又或者是两个装置、元件或组成部分之间内部的连通。对于本领域普通技术人员而言，可以根据具体情况理解上述术语在本申请中的具体含义。

本申请的实施例中提供了可配置的容器组件，需要约定一种数据格式和配置格式接口，包括数据元素的展示样式和展示顺序。索引功能根据提供的数据进行抽取键标识，将键依次排列展示在页面的固定位置，当滑动该索引元素，列表实时追踪到相应位置。通过设计此容器组件，抽象并提取了业务的重复逻辑，减少重复代码的书写，优化了长列表索引组件的开发复杂度，提供了简单使用与可配置的功能。

需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。

如图1所示，该方法包括如下的步骤S102至步骤S108：

步骤S102，配置容器组件，

所述容器组件中对于长列表进行配置。

所述长列表是指前端开发中会遇到展示大量结构化数据列表的需求，例如城市列表，车辆品牌列表，信用卡品牌列表等等。

具体地，所述配置的容器组件需要约定一种数据格式和配置格式接口，包括数据元素的展示样式和展示顺序。

具体地，在本申请的实施例中并不进行具体限定，只要满足数据格式和哦配置格式的要求即可。

步骤S104，通过所述容器组件提供列表数据和配置结构化数据的传入接口；

通过所述容器组件提供列表数据和配置结构化数据的传入接口。

步骤S106，抽取所述提供列表数据中的键标识作为索引；

具体地，索引功能根据提供的数据进行抽取键标识，将键依次排列展示在页面的固定位置，当滑动该索引元素，列表实时追踪到相应位置。

步骤S108，监听页面滚动事件，执行相应的页面滚动和索引滚动追踪。

通过设计此容器组件，抽象并提取了业务的重复逻辑，减少重复代码的书写，优化了长列表索引组件的开发复杂度。

优选地，本申请实施例中的基于React的页面处理方法的执行步骤如下：

(1)声明一个组件，该组件提供列表数据data和配置config的结构化数据传入接口；

(2)组件列表样式可根据列表项数据中的type值选择如何展示该项，索引可根据配置改变键的别名或配置成图标；

(3)通过监听页面滚动事件，手指到达位置，做相应的页面滚动，实现索引滚动追踪；

(4)提供列表元素点击事件的回调接口，当点击该项，传回该项的data数据，便于业务调取。

从以上的描述中，可以看出，本申请实现了如下技术效果：

在本申请实施例中基于React的页面处理方法及装置，采用配置容器组件的方式，通过所述容器组件提供列表数据和配置结构化数据的传入接口，达到了抽取所述提供列表数据中的键标识作为索引的目的，从而实现了监听页面滚动事件，执行相应的页面滚动和索引滚动追踪的技术效果，进而解决了在前端页面开发中展示数据列表需要重复编译代码增加人力成本的技术问题。

根据本申请实施例，作为本实施例中的优选，所述配置容器组件包括：在所述容器组件中列表样式用于根据列表项数据中的Type值选择展示；在所述容器组件中索引用于根据预设配置改变键标识的别名或配置成图标形式。

具体地，组件列表样式可根据列表项数据中的Type值选择如何展示该项，索引可根据配置改变键的别名或配置成图标。

根据本申请实施例，作为本实施例中的优选，所述配置容器组件，用于在在所述容器组件中列表样式中配置长列表。

由于前段页面的展示需要，比如城市列表，车辆品牌列表，信用卡品牌列表等等，都需要满足长列表数据展示并且可根据名称大写首字母快速滑动索引功能。需要将所述配置容器组件配置为在所述容器组件中列表样式中配置长列表。

根据本申请实施例，作为本实施例中的优选，监听页面滚动事件，执行相应的页面滚动和索引滚动追踪包括：在所述容器组件提供列表数据data和配置config的结构化数据的传入接口；监听页面滚动事件，根据在所述传入接口获取的数据，以使在手指到达位置执行相应的页面滚动和索引滚动追踪。

具体地，通过监听页面滚动事件，当手指到达位置会做相应的页面滚动，实现索引滚动追踪。

根据本申请实施例，作为本实施例中的优选，监听页面滚动事件，执行相应的页面滚动和索引滚动追踪之后，还包括：

根据列表元素点击事件的回调接口，当监听到点击列表中任一项的点击事件时，传回该项的数据。

具体地，通过所述列表元素点击事件的回调接口，当点击该项，传回该项的data数据，便于业务调取。

需要说明的是，在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行，并且，虽然在流程图中示出了逻辑顺序，但是在某些情况下，可以以不同于此处的顺序执行所示出或描述的步骤。

根据本申请实施例，还提供了一种用于实施上述方法的基于React的页面处理装置，如图2所示，该装置包括：容器配置模块10，用于配置容器组件，其中所述容器组件中对于长列表进行配置；数据接口模块20，用于通过所述容器组件提供列表数据和配置结构化数据的传入接口；索引模块30，用于抽取所述提供列表数据中的键标识作为索引；监听模块40，用于监听页面滚动事件，执行相应的页面滚动和索引滚动追踪。

在本申请实施例的容器配置模块10中所述容器组件中对于长列表进行配置。

所述长列表是指前端开发中会遇到展示大量结构化数据列表的需求，例如城市列表，车辆品牌列表，信用卡品牌列表等等。

具体地，所述配置的容器组件需要约定一种数据格式和配置格式接口，包括数据元素的展示样式和展示顺序。

具体地，在本申请的实施例中并不进行具体限定，只要满足数据格式和哦配置格式的要求即可。

在本申请实施例的数据接口模块20中通过所述容器组件提供列表数据和配置结构化数据的传入接口。

在本申请实施例的索引模块30中具体地，索引功能根据提供的数据进行抽取键标识，将键依次排列展示在页面的固定位置，当滑动该索引元素，列表实时追踪到相应位置。

在本申请实施例的监听模块40中通过设计此容器组件，抽象并提取了业务的重复逻辑，减少重复代码的书写，优化了长列表索引组件的开发复杂度。

根据本申请实施例，作为本实施例中的优选，如图2所示，所述容器配置模块10，用于在所述容器组件中列表样式用于根据列表项数据中的Type值选择展示；在所述容器组件中索引用于根据预设配置改变键标识的别名或配置成图标形式。

具体地，组件列表样式可根据列表项数据中的Type值选择如何展示该项，索引可根据配置改变键的别名或配置成图标。

根据本申请实施例，作为本实施例中的优选，如图2所示，所述容器配置模块10，用于在在所述容器组件中列表样式中配置长列表。

由于前段页面的展示需要，比如城市列表，车辆品牌列表，信用卡品牌列表等等，都需要满足长列表数据展示并且可根据名称大写首字母快速滑动索引功能。需要将所述配置容器组件配置为在所述容器组件中列表样式中配置长列表。

根据本申请实施例，作为本实施例中的优选，如图2所示，所述监听模块40，用于在所述容器组件提供列表数据data和配置config的结构化数据的传入接口；监听页面滚动事件，根据在所述传入接口获取的数据，以使在手指到达位置执行相应的页面滚动和索引滚动追踪。

具体地，通过监听页面滚动事件，当手指到达位置会做相应的页面滚动，实现索引滚动追踪。

根据本申请实施例，作为本实施例中的优选，如图2所示，还包括：回调模块50，用于根据列表元素点击事件的回调接口，当监听到点击列表中任一项的点击事件时，传回该项的数据。

具体地，通过所述列表元素点击事件的回调接口，当点击该项，传回该项的data数据，便于业务调取。

显然，本领域的技术人员应该明白，上述的本申请的各模块或各步骤可以用通用的计算装置来实现，它们可以集中在单个的计算装置上，或者分布在多个计算装置所组成的网络上，可选地，它们可以用计算装置可执行的程序代码来实现，从而，可以将它们存储在存储装置中由计算装置来执行，或者将它们分别制作成各个集成电路模块，或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样，本申请不限制于任何特定的硬件和软件结合。

以上所述仅为本申请的优选实施例而已，并不用于限制本申请，对于本领域的技术人员来说，本申请可以有各种更改和变化。凡在本申请的精神和原则之内，所作的任何修改、等同替换、改进等，均应包含在本申请的保护范围之内。

Claims (10)

1.一种基于React的页面处理方法，其特征在于，包括：

配置容器组件，其中所述容器组件中对于长列表进行配置；

通过所述容器组件提供列表数据和配置结构化数据的传入接口；

抽取所述提供列表数据中的键标识作为索引；

监听页面滚动事件，执行相应的页面滚动和索引滚动追踪。

2.根据权利要求1所述的基于React的页面处理方法，其特征在于，所述配置容器组件包括：

在所述容器组件中列表样式用于根据列表项数据中的Type值选择展示；

在所述容器组件中索引用于根据预设配置改变键标识的别名或配置成图标形式。

3.根据权利要求1所述的基于React的页面处理方法，其特征在于，所述配置容器组件，用于在在所述容器组件中列表样式中配置长列表。

4.根据权利要求1所述的基于React的页面处理方法，其特征在于，监听页面滚动事件，执行相应的页面滚动和索引滚动追踪包括：

在所述容器组件提供列表数据data和配置config的结构化数据的传入接口；

监听页面滚动事件，根据在所述传入接口获取的数据，以使在手指到达位置执行相应的页面滚动和索引滚动追踪。

5.根据权利要求1所述的基于React的页面处理方法，其特征在于，监听页面滚动事件，执行相应的页面滚动和索引滚动追踪之后，还包括：

根据列表元素点击事件的回调接口，当监听到点击列表中任一项的点击事件时，传回该项的数据。

6.一种基于React的页面处理装置，其特征在于，包括：

容器配置模块，用于配置容器组件，其中所述容器组件中对于长列表进行配置；

数据接口模块，用于通过所述容器组件提供列表数据和配置结构化数据的传入接口；

索引模块，用于抽取所述提供列表数据中的键标识作为索引；

监听模块，用于监听页面滚动事件，执行相应的页面滚动和索引滚动追踪。

7.根据权利要求6所述的基于React的页面处理装置，其特征在于，所述容器配置模块，用于

在所述容器组件中列表样式用于根据列表项数据中的Type值选择展示；

在所述容器组件中索引用于根据预设配置改变键标识的别名或配置成图标形式。

8.根据权利要求6所述的基于React的页面处理装置，其特征在于，所述容器配置模块，用于在在所述容器组件中列表样式中配置长列表。

9.根据权利要求6所述的基于React的页面处理装置，其特征在于，所述监听模块，用于

在所述容器组件提供列表数据data和配置config的结构化数据的传入接口；

监听页面滚动事件，根据在所述传入接口获取的数据，以使在手指到达位置执行相应的页面滚动和索引滚动追踪。

10.根据权利要求6所述的基于React的页面处理装置，其特征在于，还包括：回调模块，用于

根据列表元素点击事件的回调接口，当监听到点击列表中任一项的点击事件时，传回该项的数据。