[发明专利]一种索引页面展示方法及装置

说明书

本申请提供了索引页面展示方法及装置，该方法获取以结构化数组存储的索引数据，遍历结构化数组中的索引数据，创建对应的DOM结构，并将索引数据与DOM结构中相应的DOM节点进行绑定得到索引数据列表相对应的DOM树。最后利用DOM树渲染得到索引列表页面。该方案是基于结构化数组动态创建DOM树，并基于动态创建的DOM树中的DOM节点进行操作，整个过程不依赖于任何前端开发框架，因此该方案能够兼容不同的前端开发框架，例如，该索引列表能够被不同的前端开发框架所调用和展示。进一步，利用该方案不需要针对不同的前端开发框架开发相应的索引列表组件，因此，减轻了索引列表的开发工作量。

技术领域

本发明属于计算机技术领域，尤其涉及一种索引页面展示方法及装置。

背景技术

随着互联网技术的发展，前端开发技术被广泛应用。前端开发技术是指在创建Web页面或APP等前端界面的过程中，通过HTML、CSS及JavaScript以及衍生出的技术、框架、解决方案，实现互联网产品的用户界面交互。

但是，前端开发框架中的很多模块在内部实现层面重合，使用和调用层面则完全不兼容。例如，基于前端开发框架Vue.js实现的索引列表组件，其依赖于Vue.js底层框架实现，其它前端开发框架无法调用和使用该索引列表组件，因此，这种基于某一种前端开发框架开发的索引列表组件兼容性差。

发明内容

有鉴于此，本申请的目的在于提供一种索引页面展示方法，以解决传统的索引列表组件依赖于前端开发框架无法兼容其他前端开发框架的技术问题，其公开的技术方案如下：

第一方面，本申请提供了一种索引页面展示方法，包括：

获取存储有索引数据列表的结构化数组，所述结构化数组中的一个数据对象对应一个索引对象；

遍历所述结构化数组中的索引数据，创建索引数据列表对应的文档对象模型(Document Object Model，DOM)树；

利用所述DOM树渲染得到索引列表页面。

在一种可能的实现方式中，所述遍历所述结构化数组中的索引数据，创建索引数据列表对应的DOM树，包括：

遍历所述结构化数组中每个索引数据，所述索引数据包括索引元素名称、所述索引元素名称所对应的索引导航名称及所述索引元素名称所对应的搜索项；

若所述结构化数组中相邻的两个索引数据所包含的索引导航名称相同，则为所述两个索引数据创建索引数据栏位的DOM节点，以及，计算并存储该索引数据栏位距离页面顶部的距离；

若所述结构化数组中相邻的两个索引数据所包含的索引导航名称不同，则在相邻的两个索引数据所对应的DOM节点之间动态添加索引名称栏位对应的DOM节点，以及，计算并存储该索引名称栏位距离页面顶部的距离；

为所述结构化数组中的全部索引数据均创建相应的DOM节点得到所述索引数据列表对应的DOM树。

在另一种可能的实现方式中，所述方法还包括：

获取搜索内容；

遍历所述索引数据列表对应的DOM树，得到搜索项与所述搜索内容相匹配的DOM节点，并利用与所述搜索内容相匹配的DOM节点渲染索引列表页面。

在另一种可能的实现方式中，所述方法还包括：

监听页面滚动事件，并获得页面滚动的距离；

利用所述页面滚动的距离和所述DOM树中各个索引数据栏位的距离属性，确定出目标索引导航名称；

高亮显示所述目标索引导航名称。