一种标签页加载方法、装置、设备及存储介质制造方法及图纸

技术编号:33460615 阅读:17 留言:0更新日期:2022-05-19 00:41
本申请公开了一种标签页加载方法、装置、设备及存储介质,该方法包括:获取标签目录并确定在所述标签目录中当前标签显示的当前标签页;渲染所述当前标签页和在当前标签预设相邻范围内的标签对应的标签页,并删除不在当前标签预设相邻范围内的标签对应的标签页;确定目标标签并监测目标标签是否满足预设渲染条件,如果是则将当前标签页切换为目标标签对应的目标标签页,以实现对当前目标标签页的加载,其中所述目标标签为基于所述当前标签,通过点击交互界面确定出的标签。通过本申请的技术方案,可以通过判断标签是否满足预设渲染条件,实现对标签页的加载,同时删除不在当前标签预设相邻范围内的标签对应的标签页,减少了内存消耗。内存消耗。内存消耗。

【技术实现步骤摘要】
一种标签页加载方法、装置、设备及存储介质


[0001]本专利技术涉及数据处理
,特别涉及一种标签页加载方法、装置、设备及存储介质。

技术介绍

[0002]移动应用的设计开发离不开对用户体验的关注,用户体验又表现在不同的方面,例如程序运行的流畅度、界面设计的美观度等。随着前端开发技术的愈发成熟,更好的页面体验效果显得尤为重要。页面中展示的内容越来越多,因此许多地方都会使用tabs(标签)页面展示,tabs页面可以在移动端不切屏的情况下展示其他内容;为了展示更多内容,而指引显示哪个tabs页面,则是通过tabs页面目录来导航并指示。
[0003]React

Native(简称RN)作为JavaScript(爪哇脚本,一种直译式脚本语言,简称JS)跨平台框架,同样应用在设计过程中。tabs页面目录在实际应用场景的设计过程中非常复杂,一方面,当前对tabs页面的开发可以实现在同屏中实现多个页面的展示,但是没有实现支持用户自定义配置展示和tabs页面局部加载禁用的提高性能的设计;另一方面,在React

Native框架开发中,tabs页面经常用于切换加载数据,当某个模块需要展示的数据比较多的时候,不能够一次性展示完全,一次性展示出来不仅给设备装置造成过重的压力和能源浪费,还造成了网络及服务器的负担。所以,现在的基本方案就是对模块数据进行分tabs页面加载,在最初的时候加载所有页面的数据,并且对所有的组件页面都进行渲染,只是隐藏起来,实现在点击tabs页面导航的时候,进行tabs页面的切换,但是在多页面的切换展示过程中,组件一次性展示渲染会造成设备性能的无用消耗。
[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]本申请中,首先获取标签目录,并确定在所述标签目录中当前标签显示的当前标签页;然后渲染所述当前标签页和在所述当前标签预设相邻范围内的标签对应的标签页,并删除不在所述当前标签预设相邻范围内的标签对应的标签页;确定目标标签,并监测所述目标标签是否满足预设渲染条件,如果是则将所述当前标签页切换为所述目标标签对应的目标标签页,并重新跳转至所述渲染所述当前标签页和在所述当前标签预设相邻范围内的标签对应的标签页,并删除不在所述当前标签预设相邻范围内的标签对应的标签页的步骤,以实现对当前所述目标标签页的加载,其中所述目标标签为基于所述当前标签,通过点击交互界面确定出的标签。可见,一方面,通过判断标签是否满足预设渲染条件,实现设置标签页面的局部加载禁用,完成对标签本文档来自技高网
...

【技术保护点】

【技术特征摘要】
1.一种标签页加载方法,其特征在于,包括:获取标签目录,并确定在所述标签目录中当前标签显示的当前标签页;渲染所述当前标签页和在所述当前标签预设相邻范围内的标签对应的标签页,并删除不在所述当前标签预设相邻范围内的标签对应的标签页;确定目标标签,并监测所述目标标签是否满足预设渲染条件,如果是则将所述当前标签页切换为所述目标标签对应的目标标签页,并重新跳转至所述渲染所述当前标签页和在所述当前标签预设相邻范围内的标签对应的标签页,并删除不在所述当前标签预设相邻范围内的标签对应的标签页的步骤,以实现对当前所述目标标签页的加载,其中所述目标标签为基于所述当前标签,通过点击交互界面确定出的标签。2.根据权利要求1所述的标签页加载方法,其特征在于,所述获取标签目录之前,还包括:利用预设组件对所述标签目录中的任意标签进行自主配置。3.根据权利要求2所述的标签页加载方法,其特征在于,所述利用预设组件对所述标签目录中的任意标签进行自主配置,包括:判断所述标签目录中的标签数量是否超过预设数量;若所述标签目录中的所述标签数量不超过预设数量,则禁止标签在所述交互界面中滚动,并基于所述交互界面的宽度根据所述标签数量将所述标签均匀划分;若所述标签目录中的所述标签数量超过预设数量,则启动标签在所述交互界面中的滚动功能,其中,所述标签的滚动距离为点击所述交互界面时,点击点至所述交互界面的中心点的距离。4.根据权利要求1所述的标签页加载方法,其特征在于,所述如果是则将所述当前标签页切换为所述目标标签对应的目标标签页,包括:如果所述目标标签满足所述预设渲染条件,则将所述当前标签切换至所述目标标签,并加载所述目标标签对应的目标标签页数据,然后利用所述目标标签页数据对与所述目标标签对应的目标标签页进行渲染。5.根据权利要求1所述的标签页加载方法,其特征在于,所述确定目标标签并监测所述目标标签是否满足预设渲染条件之后,还包括:如果所...

【专利技术属性】
技术研发人员:汪滔
申请(专利权)人:小马国炬玉溪科技有限公司
类型:发明
国别省市:

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

1