导航信息显示方法、装置、计算机设备及存储介质制造方法及图纸

技术编号:38861831 阅读:28 留言:0更新日期:2023-09-17 10:03
本申请属于数据处理技术领域,涉及一种导航信息显示方法、装置、计算机设备及存储介质。该导航信息显示方法通过获取导航栏的目标显示尺寸,以及获取导航栏所在显示区域的当前显示尺寸,并将目标显示尺寸与当前显示尺寸进行对比,此时,若目标显示尺寸大于当前显示尺寸,获取导航栏中各个导航链接的显示尺寸,并根据各个导航链接的显示尺寸确定待显示导航链接以及剩余导航链接,最后将剩余导航链接收缩于预设隐藏界面内,在监测到预设隐藏界面被触发时,通过悬浮窗口的方式显示剩余导航链接。本申请可以解决因显示宽度发生变化,导致导航栏组件内的导航链接可能会发生重叠或被截断的情况导致无法完全显示的问题。情况导致无法完全显示的问题。情况导致无法完全显示的问题。

【技术实现步骤摘要】
导航信息显示方法、装置、计算机设备及存储介质


[0001]本申请涉及数据处理
,尤其涉及一种导航信息显示方法、装置、计算机设备及存储介质。

技术介绍

[0002]目前,随着移动设备和显示设备的普及,web网页需要能够在不同移动设备或显示设备的屏幕尺寸中的浏览器下进行适应性展示。而web网页中一般都包括导航栏组件,该导航栏组件可以提供关键信息,用户点击后能访问到其对应的相关导航链接,所以导航栏组件对于web网页来说极其重要。但是,由于不同移动设备或显示设备的屏幕尺寸是多种多样的,且也能通过缩放浏览器的窗口来调节浏览器的显示宽度,使得导航栏的显示宽度也会随着变化,例如:当屏幕的显示宽度较小或浏览器的显示宽度变小时,导航栏的显示宽度也会随着变小,这样,导航栏组件内的导航链接可能会发生重叠或被截断的情况导致无法完全显示。

技术实现思路

[0003]本申请实施例的目的在于提出一种导航信息显示方法、装置、计算机设备及存储介质,以解决导航栏的显示宽度发生变化时,导航栏组件内的导航链接可能会发生重叠或被截断的情况导致无法完全显示的问题。<本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种导航信息显示方法,其特征在于,包括下述步骤:获取导航栏的目标显示尺寸;获取所述导航栏所在显示区域的当前显示尺寸,并将所述目标显示尺寸与所述当前显示尺寸进行对比;若所述目标显示尺寸大于所述当前显示尺寸,获取所述导航栏中各个导航链接的显示尺寸,并根据各个所述导航链接的显示尺寸确定待显示导航链接以及剩余导航链接,其中,所述显示区域内显示所述待显示导航链接;将所述剩余导航链接收缩于预设隐藏界面内,在监测到所述预设隐藏界面被触发时,通过悬浮窗口的方式显示所述剩余导航链接;以及若所述目标显示尺寸小于等于所述当前显示尺寸,所述显示区域内显示所述导航栏中的所有导航链接。2.根据权利要求1所述的导航信息显示方法,其特征在于,所述获取导航栏的目标显示尺寸的步骤包括:获取所述导航栏的文档对象模型;基于所述文档对象模型,确定所述导航栏中每一个导航链接所占据的宽度属性值,并将各个所述导航链接的所述宽度属性值进行累加计算,得到目标宽度属性值;以及以所述目标宽度属性值作为所述目标显示尺寸。3.根据权利要求1所述的导航信息显示方法,其特征在于,所述获取所述导航栏中各个导航链接的显示尺寸,并根据各个所述导航链接的显示尺寸确定待显示导航链接以及剩余导航链接的步骤包括:将各个所述导航链接按照预设的规则进行排序,得到排序结果;基于所述排序结果,对各个所述导航链接的显示尺寸进行依次累加计算,得到累加尺寸值;若所述累加尺寸值出现等于所述当前显示尺寸时,获取所述累加尺寸值对应的所述导航链接作为所述待显示导航链接,并将除所述待显示导航链接之外的所述导航链接作为所述剩余导航链接;若所述累加尺寸值第一次出现大于所述当前显示尺寸时,获取上一次累加的累加尺寸值对应的所述导航链接作为所述待显示导航链接,并将除所述待显示导航链接之外的所述导航链接作为所述剩余导航链接;以及若所述排序结果中的第一个所述导航链接的显示尺寸大于所述当前显示尺寸,则所述导航栏中的所有导航链接均作为所述剩余导航链接。4.根据权利要求1所述的导航信息显示方法,其特征在于,所述将所述剩余导航链接收缩于预设隐藏界面内的步骤之后,所述导航信息显示方法还包括:通过监听函数addEventListener监听预设行为事件;以及在检测到所述预设行为事件对应的行为为有效行为时,重新执行所述获取所述导航栏所在显示区域的当前显示尺寸,并将所述目标显示尺寸与所述当前显示尺寸进行对比的步骤。5.根据权利要求4所述的导航信息显示方法,其特征在于,在所述预设行为事件为所述显示区域对应的当前显示尺寸发生变化时,所述检测到所述预设行为事件对应的行为为有
效行为的步骤,包括:通过监听函数addEventListener监听到所...

【专利技术属性】
技术研发人员:黎广鑫林群贺张玉成孙帅李雅堂
申请(专利权)人:深圳复临科技有限公司
类型:发明
国别省市:

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

1