CN112540823B - 用于组件化搭载的微页面分页方法 - Google Patents
用于组件化搭载的微页面分页方法 Download PDFInfo
- Publication number
- CN112540823B CN112540823B CN202011566953.6A CN202011566953A CN112540823B CN 112540823 B CN112540823 B CN 112540823B CN 202011566953 A CN202011566953 A CN 202011566953A CN 112540823 B CN112540823 B CN 112540823B
- Authority
- CN
- China
- Prior art keywords
- page
- data
- micro
- content
- page data
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
Images
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/451—Execution arrangements for user interfaces
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F3/00—Input arrangements for transferring data to be processed into a form capable of being handled by the computer; Output arrangements for transferring data from processing unit to output unit, e.g. interface arrangements
- G06F3/01—Input arrangements or combined input and output arrangements for interaction between user and computer
- G06F3/048—Interaction techniques based on graphical user interfaces [GUI]
- G06F3/0484—Interaction techniques based on graphical user interfaces [GUI] for the control of specific functions or operations, e.g. selecting or manipulating an object, an image or a displayed text element, setting a parameter value or selecting a range
- G06F3/0485—Scrolling or panning
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/31—Programming languages or programming paradigms
- G06F8/315—Object-oriented languages
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Computing Systems (AREA)
- Information Transfer Between Computers (AREA)
Abstract
本申请实施例提出了用于组件化搭载的微页面分页方法,包括用户端向服务端发送微页面加载请求,获取服务端下发的页面数据,对页面数据进行空组件过滤,得到过滤后的页面数据;从过滤后的页面数据中获取页面编号为1的微页面的第一页数据,判断第一页数据是否为满屏显示内容;如果是满屏显示内容,则获取页面滚动高度数据,结合满屏高度数据对页面数据进行继续加载处理;如果不是满屏显示内容,则判断组件总数量是否已完全加载。通过对组件化搭建的微页面进行本地分页加载,将内容更快的展示给用户,有效减少白屏时间,提升页面渲染速度和用户体验。
Description
技术领域
本申请属于页面加载领域,尤其提出了用于组件化搭载的微页面分页方法。
背景技术
组件化搭建的页面各组件相对独立,各自拥有内部处理逻辑,鉴于此服务端不做分页数据请求,需要前端本地分页处理数据显示。现有市面上的H5分页加载方案,大多属于前端分页请求服务端获取数据进行页面渲染,并无针对该类组件化页面的有效方案。
发明内容
本申请实施例提出了用于组件化搭载的微页面分页方法,对组件化搭建的微页面进行本地分页加载,将内容更快的展示给用户,有效减少白屏时间,提升页面渲染速度和用户体验。
具体的,本申请实施例提出的用于组件化搭载的微页面分页方法,所述方法包括:
用户端向服务端发送微页面加载请求,获取服务端下发的页面数据,对页面数据进行空组件过滤,得到过滤后的页面数据;
从过滤后的页面数据中获取页面编号为1的微页面的第一页数据,判断第一页数据是否为满屏显示内容;
如果是满屏显示内容,则获取页面滚动高度数据,结合满屏高度数据对页面数据进行继续加载处理;
如果不是满屏显示内容,则判断组件总数量是否已完全加载。
可选的,所述用户端向服务端发送微页面加载请求,获取服务端下发的页面数据,对页面数据进行空组件过滤,得到过滤后的页面数据包括:
当存在包含组件的微页面加载请求时,用户端经ajax接口向服务端发送微页面加载请求,接收到服务端基于接收到的页面加载请求下发JSON字符串的页面数据data;
通过JSON.parse函数对页面数据data进行解析得到pageData;
通过filterAvailableComponets函数对空组件进行过滤得到过滤后的页面数据filterPageData,基于过滤后的页面数据filterPageData得到总组件数totalNum,其中总组件数totalNum=filterPageData.length;
输出过滤后的页面数据filterPageData。
可选的,所述从过滤后的页面数据中获取页面编号为1的微页面的第一页数据,判断第一页数据是否为满屏显示内容,包括:
调用getPaginalData函数获取pageNo为1第一页数据;
在第一页数据加载完成后,通过checkPageHeight函数进行高度对比,判断该页内容是否为满屏显示内容。
可选的,所述通过checkPageHeight函数进行高度对比,判断该页内容是否为满屏显示内容,包括:
记录当前加载内容高度为contentHeight,满屏显示内容的高度clientHeight,判断contentHeight是否大于clientHeight;
若判断结果为是,则该流程结束;
若判断结果为否,判断当前是否已加载全部数据,当判定并未加载全部数据后继续进行后续页面加载。
可选的,所述判断contentHeight是否大于clientHeight,包括:
构建clientHeight=document.documentElement.clientHeight||
document.body.clientHeight;
如果contentHeight大于clientHeight,则流程结束。
可选的,所述判断当前是否已加载全部数据,包括:
当pageSize*pageNo>=totalNum时,表明页面数据已全部加载,分页加载整个流程结束。
可选的,所述如果是满屏显示内容,则获取页面滚动高度数据,结合满屏高度数据对页面数据进行继续加载处理,包括:
监听页面滚动事件,window.addEventListener;
获取当前页面滚动高度scrollTop,判断滚动操作是否触发页面滚动到底事件;
如果触发页面滚动到底事件,则针对下一页面编号对应的显示数据进行微页面数据加载处理。
可选的,所述判断滚动操作是否触发页面滚动到底事件,包括:
判断当前滚动距离scrollTop是否大于clientHeight;
若判断为true,则针对下一页面编号对应的显示数据进行微页面数据加载处理;
若判断为false,则不进行任何处理。
可选的,所述方法包括:
如已完全加载,则终止微页面处理流程;
如未完全加载,则获取另一页面编号对应的显示数据继续进行微组件加载。
有益效果:
对组件化搭建的微页面进行本地分页加载,将内容更快的展示给用户,有效减少白屏时间,提升页面渲染速度和用户体验。
附图说明
为了更清楚地说明本申请的技术方案,下面将对实施例描述中所需要使用的附图作简单地介绍,显而易见地,下面描述中的附图仅仅是本申请的一些实施例,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他的附图。
图1为本申请实施例提出的用于组件化搭载的微页面分页方法的流程示意图;
图2为本申请实施例提出的用于组件化搭载的微页面分页方法的部分流程示意图详情。
具体实施方式
为使本申请的结构和优点更加清楚,下面将结合附图对本申请的结构作进一步地描述。
具体的,本申请实施例提出的用于组件化搭载的微页面分页方法,如图1所示,所述方法包括:
11、用户端向服务端发送微页面加载请求,获取服务端下发的页面数据,对页面数据进行空组件过滤,得到过滤后的页面数据;
12、从过滤后的页面数据中获取页面编号为1的微页面的第一页数据,判断第一页数据是否为满屏显示内容;
13、如果是满屏显示内容,则获取页面滚动高度数据,结合满屏高度数据对页面数据进行继续加载处理;
14、如果不是满屏显示内容,则判断组件总数量是否已完全加载。
在实施中,本申请实施例提出的微页面分页方法,技术本质是在一个页面完成分页加载。主要思想在于checkPageHeight函数判断该第一页数据是否撑满屏幕,若没有则继续加载下一页面编号对应的显示数据直到满屏;另外在满屏后继续判断滑屏操作是不是会导致新页面的加载。
需要明确的是,本申请实施例中提出技术方案所涉及的分页加载技术的’分页’不是’分页面‘而是把一串长数据做切割,分页码加载对应的数据。
例如,在网络环境良好的情况下,加载1000条数据可能需要1分钟,但是通过分页处理(设定20条数据为一页)后,只需要300ms就能展示数据。所有的分页加载都是在同一个页面完成的,不存在页面跳转。本申请涉及到的下一页等‘页’的字眼,都是表示页码,对应字段为pageNo,每页加载多少条数据,对应字段为pageSize,pageNo为1即为第一页;pageNo++即为页码+1,表示下一页。
在用户端实现的效果为用户加载页面的时间会缩短,持续浏览页面的内容会更加顺畅;而且负荷要求低,意味着对处理数据的硬件设备的条件要求也会越低,应用的范围相对会越广。
可选的,所述用户端向服务端发送微页面加载请求,获取服务端下发的页面数据,对页面数据进行空组件过滤,得到过滤后的页面数据包括:
在实施中,获取页面数据以及对页面数据的过滤具体包括:
当存在包含组件的微页面加载请求时,用户端经ajax接口向服务端发送微页面加载请求,接收到服务端基于接收到的页面加载请求下发JSON字符串的页面数据data;
通过JSON.parse函数对页面数据data进行解析得到pageData;
通过filterAvailableComponets函数对空组件进行过滤得到过滤后的页面数据filterPageData,基于过滤后的页面数据filterPageData得到总组件数totalNum,其中总组件数totalNum=filterPageData.length;
输出过滤后的页面数据filterPageData。
可选的,所述从过滤后的页面数据中获取页面编号为1的微页面的第一页数据,判断第一页数据是否为满屏显示内容,包括:
调用getPaginalData函数获取pageNo为1第一页数据;
在第一页数据加载完成后,,判断该页内容是否为满屏显示内容。
在实施中,针对过滤后的页面数据是否为满屏显示内容,还需要调用checkPageHeight函数进行高度对比,来实现是否需要进行分页显示,具体判断过程为:
记录当前加载内容高度为contentHeight,满屏显示内容的高度clientHeight,判断contentHeight是否大于clientHeight;
若判断结果为是,则该流程结束;
若判断结果为否,判断当前是否已加载全部数据,当判定并未加载全部数据后继续进行后续页面加载。
其中构建clientHeight=document.documentElement.clientHeight||
document.body.clientHeight,如果contentHeight大于clientHeight,则流程结束。
进一步,判断当前是否已加载全部数据的步骤包括:
当pageSize*pageNo>=totalNum时,表明页面数据已全部加载,分页加载整个流程结束。
可选的,所述如果是满屏显示内容,则获取页面滚动高度数据,结合满屏高度数据对页面数据进行继续加载处理,包括:
监听页面滚动事件,window.addEventListener;
获取当前页面滚动高度scrollTop,判断滚动操作是否触发页面滚动到底事件;
如果触发页面滚动到底事件,则针对下一页面编号对应的显示数据进行微页面数据加载处理。
在实施中,在完成当前页的加载显示后,需要进一步判断用户端的划屏操作是否触发页面滚动以及页面切换操作,具体判断过程为:
判断当前滚动距离scrollTop是否大于clientHeight;
若判断为true,则针对下一页面编号对应的显示数据进行微页面数据加载处理;
若判断为false,则不进行任何处理。
如已完全加载,则终止微页面处理流程;
如未完全加载,则获取另一页面编号对应的显示数据继续进行微组件加载。
具体的,本申请实施例提出的微页面分页方法,如图2所示,详细流程如下:
步骤1,前端通过ajax接口请求获取服务端页面数据data(JSON字符串)。
步骤2,通过JSON.parse(data)解析得到pageData(数据类型是Array)。
步骤3,通过filterAvailableComponets()过滤空(无效)组件,得到filterPageData,并得到总组件数:totalNum=filterPageData.length。
步骤4,完成页面数据初始化处理,输出filterPageData。
步骤5,进入分页加载处理流程,调用getPaginalData(pageNo,pageSize),首先获取第一页数据,pageNo为1。
步骤6,获取分页数据sliceData(pageNo,pageSize)。
步骤7,该页加载完成,通过checkPageHeight()判断该页内容是否满屏。
7.1记录当前加载内容高度为contentHeight,一屏高度clientHeight=document.documentElement.clientHeight||document.body.clientHeight,判断contentHeight>=clientHeight。
7.2若步骤7.1中判断为true,则该流程结束,转而执行步骤8。
7.3若步骤7.1中判断为false,判断当前是否已加载全部数据,即每页组件数pageSize、当前页码数pageNo的乘积和总组件数totalNum的大小比较:pageSize*pageNo>=totalNum,若为true,则流程结束;若为false,则pageNo++,继续获取下一页数据,继续步骤6。
步骤8,步骤7流程结束,即为第一屏加载结束。
步骤9,监听页面滚动事件,window.addEventListener(‘scroll’,onScroll)。
步骤10,进入onScroll处理流程。
步骤11,获取当前页面滚动高度。
scrollTop=parseInt(document.documentElement.scrollTop
||document.body.scrollTop,10)。
步骤12,判断滚动是否触底。
12.1判断当前滚动距离scrollTop>=clientHeight?。
12.2若12.1中判断为true,则进入步骤13。
12.3若12.2中判断为false,则不处理。
步骤13,pageNo++,继续步骤6。
步骤14,当pageSize*pageNo>=totalNum时,表明页面数据已全部加载,分页加载整个流程结束。
以上所述仅为本申请的实施例,并不用以限制本申请,凡在本申请的精神和原则之内,所作的任何修改、等同替换、改进等,均应包含在本申请的保护范围之内。
Claims (6)
1.用于组件化搭载的微页面分页方法,其特征在于,所述方法包括:
用户端向服务端发送微页面加载请求,获取服务端下发的页面数据,对页面数据进行空组件过滤,得到过滤后的页面数据;
从过滤后的页面数据中获取页面编号为1的微页面的第一页数据,判断第一页数据是否为满屏显示内容;
如果是满屏显示内容,则获取页面滚动高度数据,结合满屏高度数据对页面数据进行继续加载处理;
如果不是满屏显示内容,则判断组件总数量是否已完全加载;
所述用户端向服务端发送微页面加载请求,获取服务端下发的页面数据,对页面数据进行空组件过滤,得到过滤后的页面数据包括:
当存在包含组件的微页面加载请求时,用户端经ajax接口向服务端发送微页面加载请求,接收到服务端基于接收到的页面加载请求下发JSON字符串的页面数据data;
通过JSON.parse函数对页面数据data进行解析得到pageData;
通过filterAvailableComponets函数对空组件进行过滤得到过滤后的页面数据filterPageData,基于过滤后的页面数据filterPageData得到总组件数totalNum,其中总组件数totalNum=filterPageData.length;
输出过滤后的页面数据filterPageData;
所述如果是满屏显示内容,则获取页面滚动高度数据,结合满屏高度数据对页面数据进行继续加载处理,包括:
监听页面滚动事件,window.addEventListener;
获取当前页面滚动高度scrollTop,判断滚动操作是否触发页面滚动到底事件;
如果触发页面滚动到底事件,则针对下一页面编号对应的显示数据进行微页面数据加载处理;
所述方法包括:
如已完全加载,则终止微页面处理流程;
如未完全加载,则获取另一页面编号对应的显示数据继续进行微组件加载。
2.根据权利要求1所述的用于组件化搭载的微页面分页方法,其特征在于,所述从过滤后的页面数据中获取页面编号为1的微页面的第一页数据,判断第一页数据是否为满屏显示内容,包括:
调用getPaginalData函数获取pageNo为1第一页数据;
在第一页数据加载完成后,通过checkPageHeight函数进行高度对比,判断该页内容是否为满屏显示内容。
3.根据权利要求2所述的用于组件化搭载的微页面分页方法,其特征在于,所述通过checkPageHeight函数进行高度对比,判断该页内容是否为满屏显示内容,包括:
记录当前加载内容高度为contentHeight,满屏显示内容的高度clientHeight,判断contentHeight是否大于clientHeight;
若判断结果为是,则流程结束;
若判断结果为否,判断当前是否已加载全部数据,当判定并未加载全部数据后继续进行后续页面加载。
4.根据权利要求3所述的用于组件化搭载的微页面分页方法,其特征在于,所述判断contentHeight是否大于clientHeight,包括:
构建clientHeight=document.documentElement.clientHeight||
document.body.clientHeight;
如果contentHeight大于clientHeight,则流程结束。
5.根据权利要求3所述的用于组件化搭载的微页面分页方法,其特征在于,所述判断当前是否已加载全部数据,包括:
当pageSize*pageNo>=totalNum时,表明页面数据已全部加载,分页加载整个流程结束。
6.根据权利要求1所述的用于组件化搭载的微页面分页方法,其特征在于,所述判断滚动操作是否触发页面滚动到底事件,包括:
判断当前滚动距离scrollTop是否大于clientHeight;
若判断为true,则针对下一页面编号对应的显示数据进行微页面数据加载处理;
若判断为false,则不进行任何处理。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011566953.6A CN112540823B (zh) | 2020-12-25 | 2020-12-25 | 用于组件化搭载的微页面分页方法 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202011566953.6A CN112540823B (zh) | 2020-12-25 | 2020-12-25 | 用于组件化搭载的微页面分页方法 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN112540823A CN112540823A (zh) | 2021-03-23 |
CN112540823B true CN112540823B (zh) | 2023-05-23 |
Family
ID=75017482
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202011566953.6A Active CN112540823B (zh) | 2020-12-25 | 2020-12-25 | 用于组件化搭载的微页面分页方法 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN112540823B (zh) |
Families Citing this family (1)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN113254016A (zh) * | 2021-05-21 | 2021-08-13 | 四川金熊猫新媒体有限公司 | 界面生成方法、界面信息处理方法、设备及存储介质 |
Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN105608102A (zh) * | 2015-10-12 | 2016-05-25 | 网易传媒科技(北京)有限公司 | 一种页面加载方法和设备 |
CN106547754A (zh) * | 2015-09-17 | 2017-03-29 | 中兴通讯股份有限公司 | 一种在分页模型中动态加载数据的方法及装置 |
CN106919639A (zh) * | 2016-08-22 | 2017-07-04 | 阿里巴巴集团控股有限公司 | 一种数据加载的处理方法及装置 |
CN111580810A (zh) * | 2020-03-30 | 2020-08-25 | 深圳市麦谷科技有限公司 | 一种实现主动分页的方法、装置、移动终端及存储介质 |
Family Cites Families (2)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
US11320981B2 (en) * | 2018-01-16 | 2022-05-03 | Citrix Systems, Inc | Friendly finite scrolling for theme data pagination |
CN111428164A (zh) * | 2020-03-27 | 2020-07-17 | 五八有限公司 | 页面显示方法、装置、移动终端、电子设备及存储介质 |
-
2020
- 2020-12-25 CN CN202011566953.6A patent/CN112540823B/zh active Active
Patent Citations (4)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
CN106547754A (zh) * | 2015-09-17 | 2017-03-29 | 中兴通讯股份有限公司 | 一种在分页模型中动态加载数据的方法及装置 |
CN105608102A (zh) * | 2015-10-12 | 2016-05-25 | 网易传媒科技(北京)有限公司 | 一种页面加载方法和设备 |
CN106919639A (zh) * | 2016-08-22 | 2017-07-04 | 阿里巴巴集团控股有限公司 | 一种数据加载的处理方法及装置 |
CN111580810A (zh) * | 2020-03-30 | 2020-08-25 | 深圳市麦谷科技有限公司 | 一种实现主动分页的方法、装置、移动终端及存储介质 |
Also Published As
Publication number | Publication date |
---|---|
CN112540823A (zh) | 2021-03-23 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
US9619275B2 (en) | Data processing method, apparatus and mobile terminal | |
CN102779167B (zh) | 在移动终端中显示网页的方法及系统 | |
US20150213042A1 (en) | Search term obtaining method and server, and search term recommendation system | |
CN103870553B (zh) | 一种输入资源推送方法及系统 | |
US8957912B2 (en) | Displaying items in an application window | |
CN105930527B (zh) | 搜索方法及装置 | |
CN103164519A (zh) | 调整工具栏色调的方法及装置 | |
CN109684008B (zh) | 卡片渲染方法、装置、终端及计算机可读存储介质 | |
CN112540823B (zh) | 用于组件化搭载的微页面分页方法 | |
CN106547454A (zh) | 显示方法及装置 | |
CN107526499B (zh) | 消息处理方法及装置 | |
CN107633426A (zh) | 基于环境数据的广告信息植入方法及系统 | |
US10775966B2 (en) | Customizable autocomplete option | |
CN111241402A (zh) | 一种信息推送方法、装置、电子设备及可读存储介质 | |
US10311031B2 (en) | Method, apparatus, and storage medium for removing redundant information from terminal | |
CN111915378A (zh) | 用户属性预测方法、装置、计算机设备及存储介质 | |
CN101782915A (zh) | 一种聚合内容rss订阅方法和装置 | |
CN105761107A (zh) | 互联网产品中获取目标新增用户的方法及装置 | |
CN105243133B (zh) | 一种搜索记录显示方法及电子设备 | |
CN112131840A (zh) | 页面处理方法、装置、存储介质和处理器 | |
CN113076480A (zh) | 页面推荐方法、装置、电子设备及介质 | |
CN105243132A (zh) | 一种搜索记录控制方法及电子设备 | |
EP2732428A2 (en) | Ensuring variety in a feed | |
CN110837951A (zh) | 业务渠道的排序方法及装置和电子设备 | |
CN107045529A (zh) | 网络内容获取方法、装置及服务终端 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |