一种下拉框组件加载方法及相关装置制造方法及图纸

本申请实施例公开了一种下拉框组件加载方法及相关装置，可应用于金融领域或其他领域。其中该方法包括：加载表单页面时，针对所述表单页面包括的每个下拉框组件，加载所述下拉框组件下的前n条下拉选项；所述n为大于1的整数，并且所述n小于所述下拉框组件下的下拉选项的总数目；检测到用户针对目标下拉框组件触发点击操作后，显示所述目标下拉框组件下的前n条下拉选项；若检测到所述用户针对所述目标下拉框组件下的下拉选项触发目标滚动事件，则加载所述目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项。该方法能够降低加载表单页面时所需消耗的资源，避免出现加载表单页面时出现卡顿的情况。出现卡顿的情况。出现卡顿的情况。

【技术实现步骤摘要】
一种下拉框组件加载方法及相关装置


[0001]本申请涉及计算机
，具体涉及一种下拉框组件加载方法及相关装置。

技术介绍

[0002]对于银行来说，其内部的信息管理系统中往往存在大量的表单，而每张表单中又包括大量的表单项，表单项中的下拉框还存在大量的选项。每一次加载表单页面时，需要同时加载下拉框中的全部选项，这将导致所需加载的DOM树结构非常庞大，加载表单页面时系统的资源消耗急剧上升，容易导致低版本的浏览器加载表单页面时出现卡顿的情况。

技术实现思路

[0003]本申请实施例提供了一种下拉框组件加载方法及相关装置，能够降低加载表单页面时所需消耗的资源，避免出现加载表单页面时出现卡顿的情况。
[0004]有鉴于此，本申请第一方面提供了一种下拉框组件加载方法，所述方法包括：
[0005]加载表单页面时，针对所述表单页面包括的每个下拉框组件，加载所述下拉框组件下的前n条下拉选项；所述n为大于1的整数，并且所述n小于所述下拉框组件下的下拉选项的总数目；
[0006]检测到用户针对目标下拉框组件触发点击操作后，显示所述目标下拉框组件下的前n条下拉选项；
[0007]若检测到所述用户针对所述目标下拉框组件下的下拉选项触发目标滚动事件，则加载所述目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项。
[0008]可选的，所述若检测到所述用户针对所述目标下拉框组件下的下拉选项触发目标滚动事件，则加载所述目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项，包括：
>[0009]若检测到所述用户将所述目标下拉框组件下的前n条下拉选项滚动至底部，则加载所述目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项。
[0010]可选的，所述加载所述目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项，包括：
[0011]在客户端从后台服务端获取到所述表单页面中各个下拉框组件下的全量下拉选项的情况下，从所述目标下拉框组件下的全量下拉选项中获取第n+1条下拉选项至第2n条下拉选项，加载所述第n+1条下拉选项至第2n条下拉选项；
[0012]在所述客户端从所述后台服务端获取到所述表单页面中各个下拉框组件下的前n条下拉选项的情况下，生成第一下拉选项获取请求发送给所述后台服务端，以使所述后台服务端获取所述目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项并反馈给所述客户端。
[0013]可选的，所述方法还包括：
[0014]当所述目标下拉框组件的输入框中包括初始选项时，在所述目标下拉框组件下的全量下拉选项中查找所述初始选项对应的下拉选项；
[0015]控制将所述初始选项对应的下拉选项，作为所述目标下拉框组件下的第一条下拉选项来显示。
[0016]可选的，所述在所述目标下拉框组件下的全量下拉选项中查找所述初始选项对应的下拉选项，包括：
[0017]在客户端从后台服务端获取到所述表单页面中各个下拉框组件下的全量下拉选项的情况下，基于所获取的所述目标下拉框组件下的全量下拉选项，查找所述初始选项对应的下拉选项；
[0018]在所述客户端从所述后台服务端获取到所述表单页面中各个下拉框组件下的前n条下拉选项的情况下，生成包括所述初始选项的第二下拉选项获取请求发送给所述后台服务端，以使所述后台服务端查找所述初始选项对应的下拉选项并反馈给所述客户端。
[0019]可选的，所述方法还包括：
[0020]响应于所述用户针对所述目标下拉框组件下的目标下拉选项触发的选择操作，在所述目标下拉框组件的输入框中显示所述目标下拉选项。
[0021]本申请第二方面提供了一种下拉框组件加载装置，所述装置包括：
[0022]选项加载模块，用于加载表单页面时，针对所述表单页面包括的每个下拉框组件，加载所述下拉框组件下的前n条下拉选项；所述n为大于1的整数，并且所述n小于所述下拉框组件下的下拉选项的总数目；
[0023]选项显示模块，用于检测到用户针对目标下拉框组件触发点击操作后，显示所述目标下拉框组件下的前n条下拉选项；
[0024]所述选项加载模块，还用于若检测到所述用户针对所述目标下拉框组件下的下拉选项触发目标滚动事件，则加载所述目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项。
[0025]可选的，所述选项加载模块具体用于：
[0026]若检测到所述用户将所述目标下拉框组件下的前n条下拉选项滚动至底部，则加载所述目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项。
[0027]可选的，所述选项加载模块具体用于：
[0028]在客户端从后台服务端获取到所述表单页面中各个下拉框组件下的全量下拉选项的情况下，从所述目标下拉框组件下的全量下拉选项中获取第n+1条下拉选项至第2n条下拉选项，加载所述第n+1条下拉选项至第2n条下拉选项；
[0029]在所述客户端从所述后台服务端获取到所述表单页面中各个下拉框组件下的前n条下拉选项的情况下，生成第一下拉选项获取请求发送给所述后台服务端，以使所述后台服务端获取所述目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项并反馈给所述客户端。
[0030]可选的，所述装置还包括：
[0031]回显模块，用于当所述目标下拉框组件的输入框中包括初始选项时，在所述目标下拉框组件下的全量下拉选项中查找所述初始选项对应的下拉选项；控制将所述初始选项对应的下拉选项，作为所述目标下拉框组件下的第一条下拉选项来显示。
[0032]可选的，所述回显模块还用于：
[0033]响应于所述用户针对所述目标下拉框组件下的目标下拉选项触发的选择操作，在
所述目标下拉框组件的输入框中显示所述目标下拉选项。
[0034]从以上技术方案可以看出，本申请实施例具有以下优点：
[0035]本申请实施例提供了一种下拉框组件加载方法，该方法包括：加载表单页面时，针对表单页面包括的每个下拉框组件，加载该下拉框组件下的前n条下拉选项，此处的n为大于1的整数，并且n小于该下拉框组件下的下拉选项的总数目；检测到用户针对目标下拉框组件触发点击操作后，显示该目标下拉框组件下的前n条下拉选项；若检测到该用户针对目标下拉框组件下的下拉选项触发目标滚动事件，则加载该目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项。上述方法对表单页面中的下拉框进行了二次封装，懒加载下拉框组件中的下拉选项；限制了初次加载表单页面时针对每个下拉框组件所需加载的下拉选项的数目，从而有效地提高了表单页面的渲染速度，并且能够避免出现表单页面卡顿的情况；当检测到用户针对下拉框组件下的下拉选项触发滚动事件时，再加载后续的n条下拉选项，可以保证下拉选项的有效加载，即避免加载过多无效的下拉选项，进一步节约处理资源。
附图说明
[0036]图1为本申请实施例提供的一种下拉框组件加载方法的流程示意图；
[0037]图2为本申请实施例提供的一种下拉框组件加载装本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种下拉框组件加载方法，其特征在于，所述方法包括：加载表单页面时，针对所述表单页面包括的每个下拉框组件，加载所述下拉框组件下的前n条下拉选项；所述n为大于1的整数，并且所述n小于所述下拉框组件下的下拉选项的总数目；检测到用户针对目标下拉框组件触发点击操作后，显示所述目标下拉框组件下的前n条下拉选项；若检测到所述用户针对所述目标下拉框组件下的下拉选项触发目标滚动事件，则加载所述目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项。2.根据权利要求1所述的方法，其特征在于，所述若检测到所述用户针对所述目标下拉框组件下的下拉选项触发目标滚动事件，则加载所述目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项，包括：若检测到所述用户将所述目标下拉框组件下的前n条下拉选项滚动至底部，则加载所述目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项。3.根据权利要求1或2所述的方法，其特征在于，所述加载所述目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项，包括：在客户端从后台服务端获取到所述表单页面中各个下拉框组件下的全量下拉选项的情况下，从所述目标下拉框组件下的全量下拉选项中获取第n+1条下拉选项至第2n条下拉选项，加载所述第n+1条下拉选项至第2n条下拉选项；在所述客户端从所述后台服务端获取到所述表单页面中各个下拉框组件下的前n条下拉选项的情况下，生成第一下拉选项获取请求发送给所述后台服务端，以使所述后台服务端获取所述目标下拉框组件下的第n+1条下拉选项至第2n条下拉选项并反馈给所述客户端。4.根据权利要求1所述的方法，其特征在于，所述方法还包括：当所述目标下拉框组件的输入框中包括初始选项时，在所述目标下拉框组件下的全量下拉选项中查找所述初始选项对应的下拉选项；控制将所述初始选项对应的下拉选项，作为所述目标下拉框组件下的第一条下拉选项来显示。5.根据权利要求4所述的方法，其特征在于，所述在所述目标下拉框组件下的全量下拉选项中查找所述初始选项对应的下拉选项，包括：在客户端从后台服务端获取到所述表单页面中各个下拉框组件下的全量下拉选项的情况下，基于所获取的所述目标下拉框组件下的全量下拉选项，查找所述初始选项对应的下拉选项；在所述客户端从所述后台服务端...

【专利技术属性】
技术研发人员：刘健能，叶洋东，
申请(专利权)人：中国银行股份有限公司，
类型：发明
国别省市：