基于制造技术

本申请的实施例提供了一种基于

【技术实现步骤摘要】
基于React的界面元素布局方法、装置、介质及电子设备


[0001]本申请涉及计算机及数据处理
，具体而言，涉及一种基于
React
的界面元素布局方法
、
装置
、
介质及电子设备
。

技术介绍

[0002]React
是一套用于构建用户界面的
Javascript
库，
React
只关注视图层，采用自底向上增量开发的设计
。
在
React
中，当需要对界面中的元素进行布局时，针对不同布局场景
(
比如排序，分类等场景
)
，通常需要开发不同的代码，导致实现界面元素布局的过程变得复杂
。
基于此，如何提高基于
React
的界面元素布局的便捷性和交互友好性，增强用户体验是亟待解决的技术问题
。

技术实现思路

[0003]本申请的实施例提供了一种基于
React
的界面元素布局方法
、
装置
、
计算机程序产品或计算机程序
、
计算机可读存储介质及电子设备，进而至少在一定程度上可以提高基于
React
的界面元素布局的便捷性和交互友好性，增强用户体验
。
[0004]本申请的其他特性和优点将通过下面的详细描述变得显然，或部分地通过本申请的实践而习得
。
[0005]根据本申请实施例的一个方面，提供了一种基于
React
的界面元素布局方法，所述方法包括：调用预先通过容器封装的拖放组件，所述拖放组件定义有拖动属性和
/
或放置属性；通过所述拖放组件渲染至少一个用于展示业务数据的元素框，各个所述元素框分别配置有拖放控件；在客户端界面中展示各个元素框；响应于用户针对目标拖放控件的拖放操作，通过所述拖放组件调整所述目标拖放控件对应的目标元素框在所述客户端界面中的布局形式
。
[0006]在本申请的一些实施例中，基于前述方案，所述拖放组件包括第一拖放组件，第二拖放组件，以及第三拖放组件，所述第一拖放组件同时定义有拖动属性和放置属性，所述第二拖放组件定义有拖动属性，所述第三拖放组件定义有放置属性
。
[0007]在本申请的一些实施例中，基于前述方案，在针对所述元素框的排序场景中，所述拖放组件为所述第一拖放组件
。
[0008]在本申请的一些实施例中，基于前述方案，在针对所述元素框的排序场景中，所述响应于用户针对目标拖放控件的拖放操作，通过所述拖放组件调整所述目标拖放控件对应的目标元素框在所述客户端界面中的布局形式，包括：响应于用户拖动目标拖放控件并放置至客户端界面中特定区域的操作，通过所述第一拖放组件调整所述目标拖放控件对应的目标元素框在所述客户端界面各个元素框中的排序位置
。
[0009]在本申请的一些实施例中，基于前述方案，在针对所述元素框的分类场景中，所述拖放组件为所述第二拖放组件和所述第三拖放组件
。
[0010]在本申请的一些实施例中，基于前述方案，在针对所述元素框的分类场景中，所述
响应于用户针对目标拖放控件的拖放操作，通过所述拖放组件调整所述目标拖放控件对应的目标元素框在所述客户端界面中的布局形式，包括：响应于用户拖动目标拖放控件的操作，通过所述第二拖放组件在所述客户端界面拖动所述目标拖放控件对应的目标元素框；响应于用户将目标拖放控件放置至客户端界面中特定区域的操作，通过所述第三拖放组件在所述客户端界面中对所述目标拖放控件对应的目标元素框进行分类
。
[0011]在本申请的一些实施例中，基于前述方案，在调用预先通过容器封装的拖放组件之前，所述方法还包括：响应于用户在客户端触发的业务数据展示指令，从服务端下载对应的业务数据；按照预先配置的分类规则，对所述业务数据进行分类，得到至少一组业务数据，其中，所述至少一组业务数据分别展示在由所述拖放组件渲染的至少一个元素框中
。
[0012]根据本申请实施例的一个方面，提供了一种基于
React
的界面元素布局装置，所述装置包括：调用单元，用于调用预先通过容器封装的拖放组件，所述拖放组件定义有拖动属性和
/
或放置属性；渲染单元，用于通过所述拖放组件渲染至少一个用于展示业务数据的元素框，各个所述元素框分别配置有拖放控件；展示单元，用于在客户端界面中展示各个元素框；调整单元，用于响应于用户针对目标拖放控件的拖放操作，通过所述拖放组件调整所述目标拖放控件对应的目标元素框在所述客户端界面中的布局形式
。
[0013]根据本申请实施例的一个方面，提供了一种计算机程序产品或计算机程序，该计算机程序产品或计算机程序包括计算机指令，该计算机指令存储在计算机可读存储介质中
。
计算机设备的处理器从计算机可读存储介质读取该计算机指令，处理器执行该计算机指令，使得该计算机设备执行上述实施例中所述的方法
。
[0014]根据本申请实施例的一个方面，提供了一种计算机可读存储介质，其上存储有计算机程序，所述计算机程序被处理器执行时实现如上述实施例中所述的方法
。
[0015]根据本申请实施例的一个方面，提供了一种电子设备，包括：一个或多个处理器；存储装置，用于存储一个或多个程序，当所述一个或多个程序被所述一个或多个处理器执行时，使得所述一个或多个处理器实现如上述实施例中所述的方法
。
[0016]在本申请的一些实施例所提供的技术方案中，由于在系统中配置有定义了拖动属性和
/
或放置属性的拖放组件，使得用户在需要对界面中的元素进行布局时，只需要调用定义有拖动属性和
/
或放置属性的拖放组件，就能实现调整界面中的元素在客户端界面中的布局形式，进而可以降低界面元素布局的复杂程度，提高界面元素布局的便捷性和交互友好性，增强用户体验
。
[0017]应当理解的是，以上的一般描述和后文的细节描述仅是示例性和解释性的，并不能限制本申请
。
附图说明
[0018]此处的附图被并入说明书中并构成本说明书的一部分，示出了符合本申请的实施例，并与说明书一起用于解释本申请的原理
。
显而易见地，下面描述中的附图仅仅是本申请的一些实施例，对于本领域普通技术人员来讲，在不付出创造性劳动的前提下，还可以根据这些附图获得其他的附图
。
在附图中：
[0019]图1示出了可以应用本申请实施例的技术方案的系统架构图；
[0020]图2示出了根据本申请一个实施例的基于
React
的界面元素布局方法的流程图；
[0021]图3示出了根据本申请一个实施例的基于
React
的界面元素布局的界面图；
[0022]图4示出本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.
一种基于
React
的界面元素布局方法，其特征在于，所述方法包括：调用预先通过容器封装的拖放组件，所述拖放组件定义有拖动属性和
/
或放置属性；通过所述拖放组件渲染至少一个用于展示业务数据的元素框，各个所述元素框分别配置有拖放控件；在客户端界面中展示各个元素框；响应于用户针对目标拖放控件的拖放操作，通过所述拖放组件调整所述目标拖放控件对应的目标元素框在所述客户端界面中的布局形式
。2.
根据权利要求1所述的方法，其特征在于，所述拖放组件包括第一拖放组件，第二拖放组件，以及第三拖放组件，所述第一拖放组件同时定义有拖动属性和放置属性，所述第二拖放组件定义有拖动属性，所述第三拖放组件定义有放置属性
。3.
根据权利要求2所述的方法，其特征在于，在针对所述元素框的排序场景中，所述拖放组件为所述第一拖放组件
。4.
根据权利要求3所述的方法，其特征在于，在针对所述元素框的排序场景中，所述响应于用户针对目标拖放控件的拖放操作，通过所述拖放组件调整所述目标拖放控件对应的目标元素框在所述客户端界面中的布局形式，包括：响应于用户拖动目标拖放控件并放置至客户端界面中特定区域的操作，通过所述第一拖放组件调整所述目标拖放控件对应的目标元素框在所述客户端界面各个元素框中的排序位置
。5.
根据权利要求2所述的方法，其特征在于，在针对所述元素框的分类场景中，所述拖放组件为所述第二拖放组件和所述第三拖放组件
。6.
根据权利要求5所述的方法，其特征在于，在针对所述元素框的分类场景中，所述响应于用户针对目标拖放控件的拖放操作，通过所述拖放组件调整所述目标拖放控件对应的目标元素框在所述客户端界面中的布局形式，包括：响应于用户拖动目...

【专利技术属性】
技术研发人员：杨丽影，吴雪瑶，
申请(专利权)人：上海杉数网络科技有限公司杉数科技苏州有限公司深圳市杉智科技有限公司，
类型：发明
国别省市：