基于React的页面处理方法以及装置制造方法及图纸

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

Page processing method and device based on react

The application discloses a page processing method and a device based on react. The method comprises the configuration of a container component, wherein the long list is configured in the container component; the input interface of the list data and the configuration structured data is provided through the container component; the key identification in the provided list data is extracted as an index; the page scrolling event is monitored, and the corresponding page scrolling and index scrolling tracking are performed. The application solves the technical problem that it is necessary to repeatedly compile the code to increase the labor cost when displaying the data list in the front-end page development. Through the container component of the application, the duplicate logic of the business is abstracted and extracted to reduce the writing of duplicate code.

【技术实现步骤摘要】
基于React的页面处理方法以及装置
本申请涉及前端开发领域，具体而言，涉及一种基于React的页面处理方法以及装置。
技术介绍
前端开发中会遇到展示大量结构化数据列表的需求，例如城市列表，车辆品牌列表，信用卡品牌列表等等。专利技术人发现，如果每次需求都需要展示大量结构化数据列表，则耗费人力成本、增加重复劳动。针对相关技术中在前端页面开发中展示数据列表需要重复编译代码增加人力成本的问题，目前尚未提出有效的解决方案。
技术实现思路
本申请的主要目的在于提供一种基于React的页面处理方法以及装置，以解决在前端页面开发中展示数据列表需要重复编译代码增加人力成本的问题。为了实现上述目的，根据本申请的一个方面，提供了一种基于React的页面处理方法。根据本申请的基于React的页面处理方法包括：配置容器组件，其中所述容器组件中对于长列表进行配置；通过所述容器组件提供列表数据和配置结构化数据的传入接口；抽取所述提供列表数据中的键标识作为索引；监听页面滚动事件，执行相应的页面滚动和索引滚动追踪。进一步地，所述配置容器组件包括：在所述容器组件中列表样式用于根据列表项数据中的Type值选择展示；在所述容器组件中索引用于根据预设配置改变键标识的别名或配置成图标形式。进一步地，所述配置容器组件，用于在在所述容器组件中列表样式中配置长列表。进一步地，监听页面滚动事件，执行相应的页面滚动和索引滚动追踪包括：在所述容器组件提供列表数据data和配置config的结构化数据的传入接口；监听页面滚动事件，根据在所述传入接口获取的数据，以使在手指到达位置执行相应的页面滚动和索引滚动追踪。进一步地，监听页面滚动事件，执行相应的页面滚动和索引滚动追踪之后，还包括：根据列表元素点击事件的回调接口，当监听到点击列表中任一项的点击事件时，传回该项的数据。为了实现上述目的，根据本申请的另一方面，提供了一种基于React的页面处理装置。根据本申请的基于React的页面处理装置包括：容器配置模块，用于配置容器组件，其中所述容器组件中对于长列表进行配置；数据接口模块，用于通过所述容器组件提供列表数据和配置结构化数据的传入接口；索引模块，用于抽取所述提供列表数据中的键标识作为索引；监听模块，用于监听页面滚动事件，执行相应的页面滚动和索引滚动追踪。进一步地，所述容器配置模块，用于在所述容器组件中列表样式用于根据列表项数据中的Type值选择展示；在所述容器组件中索引用于根据预设配置改变键标识的别名或配置成图标形式。进一步地，所述容器配置模块，用于在在所述容器组件中列表样式中配置长列表。进一步地，所述监听模块，用于在所述容器组件提供列表数据data和配置config的结构化数据的传入接口；监听页面滚动事件，根据在所述传入接口获取的数据，以使在手指到达位置执行相应的页面滚动和索引滚动追踪。进一步地，还包括：回调模块，用于根据列表元素点击事件的回调接口，当监听到点击列表中任一项的点击事件时，传回该项的数据。在本申请实施例中基于React的页面处理方法及装置，采用配置容器组件的方式，通过所述容器组件提供列表数据和配置结构化数据的传入接口，达到了抽取所述提供列表数据中的键标识作为索引的目的，从而实现了监听页面滚动事件，执行相应的页面滚动和索引滚动追踪的技术效果，进而解决了在前端页面开发中展示数据列表需要重复编译代码增加人力成本的技术问题。附图说明构成本申请的一部分的附图用来提供对本申请的进一步理解，使得本申请的其它特征、目的和优点变得更明显。本申请的示意性实施例附图及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：图1是根据本申请实施例的基于React的页面处理方法流程示意图；图2是根据本申请实施例的基于React的页面处理装置结构示意图。具体实施方式为了使本
的人员更好地理解本申请方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行清楚、完整地描述，显然，所描述的实施例仅仅是本申请一部分的实施例，而不是全部的实施例。基于本申请中的实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都应当属于本申请保护的范围。需要说明的是，本申请的说明书和权利要求书及上述附图中的术语“第一”、“第二”等是用于区别类似的对象，而不必用于描述特定的顺序或先后次序。应该理解这样使用的数据在适当情况下可以互换，以便这里描述的本申请的实施例。此外，术语“包括”和“具有”以及他们的任何变形，意图在于覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。在本申请中，术语“上”、“下”、“左”、“右”、“前”、“后”、“顶”、“底”、“内”、“外”、“中”、“竖直”、“水平”、“横向”、“纵向”等指示的方位或位置关系为基于附图所示的方位或位置关系。这些术语主要是为了更好地描述本申请及其实施例，并非用于限定所指示的装置、元件或组成部分必须具有特定方位，或以特定方位进行构造和操作。并且，上述部分术语除了可以用于表示方位或位置关系以外，还可能用于表示其他含义，例如术语“上”在某些情况下也可能用于表示某种依附关系或连接关系。对于本领域普通技术人员而言，可以根据具体情况理解这些术语在本申请中的具体含义。此外，术语“安装”、“设置”、“设有”、“连接”、“相连”、“套接”应做广义理解。例如，可以是固定连接，可拆卸连接，或整体式构造；可以是机械连接，或电连接；可以是直接相连，或者是通过中间媒介间接相连，又或者是两个装置、元件或组成部分之间内部的连通。对于本领域普通技术人员而言，可以根据具体情况理解上述术语在本申请中的具体含义。本申请的实施例中提供了可配置的容器组件，需要约定一种数据格式和配置格式接口，包括数据元素的展示样式和展示顺序。索引功能根据提供的数据进行抽取键标识，将键依次排列展示在页面的固定位置，当滑动该索引元素，列表实时追踪到相应位置。通过设计此容器组件，抽象并提取了业务的重复逻辑，减少重复代码的书写，优化了长列表索引组件的开发复杂度，提供了简单使用与可配置的功能。需要说明的是，在不冲突的情况下，本申请中的实施例及实施例中的特征可以相互组合。下面将参考附图并结合实施例来详细说明本申请。如图1所示，该方法包括如下的步骤S102至步骤S108：步骤S102，配置容器组件，所述容器组件中对于长列表进行配置。所述长列表是指前端开发中会遇到展示大量结构化数据列表的需求，例如城市列表，车辆品牌列表，信用卡品牌列表等等。具体地，所述配置的容器组件需要约定一种数据格式和配置格式接口，包括数据元素的展示样式和展示顺序。<本文档来自技高网...

【技术保护点】
1.一种基于React的页面处理方法，其特征在于，包括：/n配置容器组件，其中所述容器组件中对于长列表进行配置；/n通过所述容器组件提供列表数据和配置结构化数据的传入接口；/n抽取所述提供列表数据中的键标识作为索引；/n监听页面滚动事件，执行相应的页面滚动和索引滚动追踪。/n

【技术特征摘要】
1.一种基于React的页面处理方法，其特征在于，包括：
配置容器组件，其中所述容器组件中对于长列表进行配置；
通过所述容器组件提供列表数据和配置结构化数据的传入接口；
抽取所述提供列表数据中的键标识作为索引；
监听页面滚动事件，执行相应的页面滚动和索引滚动追踪。


2.根据权利要求1所述的基于React的页面处理方法，其特征在于，所述配置容器组件包括：
在所述容器组件中列表样式用于根据列表项数据中的Type值选择展示；
在所述容器组件中索引用于根据预设配置改变键标识的别名或配置成图标形式。


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


4.根据权利要求1所述的基于React的页面处理方法，其特征在于，监听页面滚动事件，执行相应的页面滚动和索引滚动追踪包括：
在所述容器组件提供列表数据data和配置config的结构化数据的传入接口；
监听页面滚动事件，根据在所述传入接口获取的数据，以使在手指到达位置执行相应的页面滚动和索引滚动追踪。


5.根据权利要求1所述的基于React的页面处理方法，其特征在于，监听页面滚动事件，执行相应的页面滚动和索引滚动追踪之后，还包括：
根据列表元素点击事件的回调接口，当监听到点击列表中任一项的点击事件时，传回该项的数据。

【专利技术属性】
技术研发人员：陈安阳，吴峰，郭伟，
申请(专利权)人：上海易点时空网络有限公司，
类型：发明
国别省市：上海;31