页面布局联动方法以及相关设备技术

技术编号:36567911 阅读:19 留言:0更新日期:2023-02-04 17:24
本申请实施例公开了一种页面布局联动方法、页面布局联动设备以及计算机可读存储介质,用于提高页面布局联动性能和用户使用体验的情况下,对页面进行布局联动。本申请实施例方法包括:响应于对当前页面中目标上一级项目的点击指令,确定目标上一级项目所需进入的目标状态;其中,当前页面包括至少一个上一级项目;若目标状态为展开状态,则刷新当前页面得到刷新后的页面,并展示刷新后的页面中目标上一级项目展开的弹出框,及展示弹出框包括的目标上一级项目的至少一个下一级项目;响应于对至少一个下一级项目的目标操作指令,触发至少一个下一级项目的目标操作事件,以触发刷新后的页面进行联动,得到联动后的页面。得到联动后的页面。得到联动后的页面。

【技术实现步骤摘要】
页面布局联动方法以及相关设备


[0001]本申请实施例涉及页面布局联动领域,更具体的,是页面布局联动方法、页面布局联动设备以及计算机可读存储介质。

技术介绍

[0002]由于Android和iOS原生开发需要两套代码开发并维护,所以跨平台开发便应运而生,ReactNative技术就是一种较为成熟的跨平台开发技术,可以做到使用一套代码运行Android和iOS,有着成熟的开发社区维护,使前端开发者可以利用移动端开发平台运行JavaScript代码来开发APP,使得开发者可以很好地同时开发Android和iOS,很大程度缩减开发成本,缩短了维护周期,随着目前大前端技术的发展,也必然是一种趋势。
[0003]现有的页面布局联动方法可以是通过原生方式实现页面布局联动,或结合ReactNative组件以及原生方式来实现页面布局联动。但是,基于原生方式实现页面布局联动的方法存在某端不兼容的问题,例如在iOS系统中存在点击项目后无法对应的点击事件的情况,比如,点击当前页面中目标上一级项目,目标上一级项目可以展示上一级项目的弹出框,点击弹出框中的目标下一级项目时,无法触发目标下一级项目的点击事件,其中,目标下一级项目的位置超过目标上一级项目位置的最大值,为了解决类似这种无法触发导致无法联动的问题,需要重新开发解决问题对应的方案,页面布局联动的性能较低,用户的使用体验较差。

技术实现思路

[0004]本申请实施例提供了一种页面布局联动方法、页面布局联动设备以及计算机可读存储介质,用于提高页面布局联动性能和用户使用体验的情况下,对页面进行布局联动。
[0005]第一方面,本申请实施例提供了一种页面布局联动方法,包括:
[0006]响应于对当前页面中目标上一级项目的点击指令,确定所述目标上一级项目所需进入的目标状态;其中,所述当前页面包括至少一个上一级项目;
[0007]若所述目标状态为展开状态,则刷新所述当前页面得到刷新后的页面,并展示所述刷新后的页面中所述目标上一级项目展开的弹出框,及展示所述弹出框包括的所述目标上一级项目的至少一个下一级项目;
[0008]响应于对所述至少一个下一级项目的目标操作指令,触发所述至少一个下一级项目的目标操作事件,以触发所述刷新后的页面进行联动,得到联动后的页面。
[0009]可选的,所述确定所述目标上一级项目所需进入的目标状态,包括:
[0010]基于所述目标上一级项目的点击指令,改变所述上一级项目的状态值;
[0011]若改变后的状态值与预设展开状态值相同,则确定所述目标上一级项目的目标状态为展开状态。
[0012]可选的,所述展示所述刷新后的页面中所述目标上一级项目展开的弹出框,包括:
[0013]基于所述目标上一级项目的点击指令,确定所述目标上一级项目的位置信息;
[0014]基于所述目标上一级项目的位置信息,确定所述目标上一级项目的弹出框进行展示的位置信息;
[0015]根据所述弹出框进行展示的位置信息展示所述弹出框。
[0016]可选的,所述基于所述目标上一级项目的点击指令,确定所述目标上一级项目的位置信息,包括:
[0017]基于所述目标上一级项目的点击指令,获得所述目标上一级项目的当前位置标号;
[0018]根据预设位置标号列表确定所述当前位置标号的目标位置;
[0019]将所述目标位置确定为所述目标上一级项目的位置信息。
[0020]可选的,所述基于所述目标上一级项目的点击指令,确定所述目标上一级项目的位置信息,包括:
[0021]基于所述目标上一级项目的点击指令,获得所述目标上一级项目的索引值;
[0022]根据所述目标上一级项目的索引值确定所述目标上一级项目的位置信息。
[0023]可选的,所述展示所述弹出框包括的所述目标上一级项目的至少一个下一级项目,包括:
[0024]基于所述目标上一级项目的位置信息,确定所述至少一个下一级项目进行展示的位置信息;
[0025]根据所述至少一个下一级项目进行展示的位置信息展示所述至少一个下一级项目。
[0026]可选的,所述确定所述目标上一级项目所需进入的目标状态之后,所述方法还包括:
[0027]若所述目标状态为收起状态且所述当前页面包括所述目标上一级项目的弹出框,则刷新所述当前页面以收起所述目标上一级项目的弹出框,并展示所述刷新后的页面。
[0028]可选的,所述响应于对所述至少一个下一级项目的目标操作指令,触发所述至少一个下一级项目的目标操作事件,以触发所述刷新后的页面进行联动,得到联动后的页面,包括:
[0029]响应于对所述至少一个下一级项目的滑动指令,触发所述至少一个下一级项目的滑动事件,以触发所述刷新后的页面进行滑动联动,得到滑动联动后的页面。
[0030]第二方面,本申请实施例提供了一种页面布局联动设备,包括:
[0031]中央处理器,存储器,输入输出接口,有线或无线网络接口以及电源;
[0032]所述存储器为短暂存储存储器或持久存储存储器;
[0033]所述中央处理器配置为与所述存储器通信,并执行所述存储器中的指令操作以执行前述页面布局联动方法。
[0034]第三方面,本申请实施例提供了一种计算机可读存储介质,计算机可读存储介质包括指令,当指令在计算机上运行时,使得计算机执行前述页面布局联动方法。
[0035]第四方面,本申请实施例提供了一种包含指令的计算机程序产品,当计算机程序产品在计算机上运行时,使得计算机执行前述页面布局联动方法。
[0036]从以上技术方案可以看出,本申请实施例具有以下优点:可以响应于对当前页面中目标上一级项目的点击指令,确定目标上一级项目所需进入的目标状态,若目标状态为
展开状态,则刷新当前页面得到刷新后的页面,并展示刷新后的页面中目标上一级项目展开的弹出框,及展示弹出框包括的目标上一级项目的至少一个下一级项目,可以响应于对目标下一级项目的目标操作指令,触发目标下一级项目的目标操作事件以触发刷新后的页面进行联动,减少了出现目标下一级项目的位置超过目标上一级项目位置的最大值而无法触发点击事件的情况,页面布局联动的性能较高,用户的使用体验较高。
附图说明
[0037]图1为本申请实施例公开的一种页面布局联动方法的流程示意图;
[0038]图2为本申请实施例公开的一种进行布局联动的页面示意图;
[0039]图3为本申请实施例公开的一种页面布局联动设备的结构示意图。
具体实施方式
[0040]本申请实施例提供了一种页面布局联动方法、页面布局联动设备以及计算机可读存储介质,用于提高页面布局联动性能和用户使用体验的情况下,对页面进行布局联动。
[0041]请参阅图1,图1为本申请实施例公开的一种页面布局联动方法的流程示意图,方法包括:
[0042]101、响应于对当前页面中目标上一级项目的点击指令,确本文档来自技高网
...

【技术保护点】

【技术特征摘要】
1.一种页面布局联动方法,其特征在于,包括:响应于对当前页面中目标上一级项目的点击指令,确定所述目标上一级项目所需进入的目标状态;其中,所述当前页面包括至少一个上一级项目;若所述目标状态为展开状态,则刷新所述当前页面得到刷新后的页面,并展示所述刷新后的页面中所述目标上一级项目展开的弹出框,及展示所述弹出框包括的所述目标上一级项目的至少一个下一级项目;响应于对所述至少一个下一级项目的目标操作指令,触发所述至少一个下一级项目的目标操作事件,以触发所述刷新后的页面进行联动,得到联动后的页面。2.根据权利要求1所述的方法,其特征在于,所述确定所述目标上一级项目所需进入的目标状态,包括:基于所述目标上一级项目的点击指令,改变所述上一级项目的状态值;若改变后的状态值与预设展开状态值相同,则确定所述目标上一级项目的目标状态为展开状态。3.根据权利要求1所述的方法,其特征在于,所述展示所述刷新后的页面中所述目标上一级项目展开的弹出框,包括:基于所述目标上一级项目的点击指令,确定所述目标上一级项目的位置信息;基于所述目标上一级项目的位置信息,确定所述目标上一级项目的弹出框进行展示的位置信息;根据所述弹出框进行展示的位置信息展示所述弹出框。4.根据权利要求3所述的方法,其特征在于,所述基于所述目标上一级项目的点击指令,确定所述目标上一级项目的位置信息,包括:基于所述目标上一级项目的点击指令,获得所述目标上一级项目的当前位置标号;根据预设位置标号列表确定所述当前位置标号的目标位置;将所述目标位置确定为所述目标上一级项目的位置信息。5.根据权利要求3所述的方法,其特征在于,所述基于所述目标上一级项目的点击指令,确定所述目标上一级项目...

【专利技术属性】
技术研发人员:李蓉张黎许丹昊杨建明
申请(专利权)人:深圳证券信息有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1