[發明專利]用于組件化搭載的微頁面分頁方法

有效

• 申請號: 202011566953.6
• 申請日: 2020-12-25
• 公開（公告）號: CN112540823B
• 公開（公告）日: 2023-05-23
• 發明（設計）人: 請求不公布姓名
• 申請（專利權）人: 杭州智聰網絡科技有限公司
• 主分類號: G06F9/451
• 分類號: G06F9/451;G06F8/38;G06F3/0485;G06F8/30
• 代理公司: 杭州華鼎知識產權代理事務所(普通合伙) 33217
• 代理人: 高任

本申請實施例提出了用于組件化搭載的微頁面分頁方法，包括用戶端向服務端發送微頁面加載請求，獲取服務端下發的頁面數據，對頁面數據進行空組件過濾，得到過濾后的頁面數據；從過濾后的頁面數據中獲取頁面編號為1的微頁面的第一頁數據，判斷第一頁數據是否為滿屏顯示內容；如果是滿屏顯示內容，則獲取頁面滾動高度數據，結合滿屏高度數據對頁面數據進行繼續加載處理；如果不是滿屏顯示內容，則判斷組件總數量是否已完全加載。通過對組件化搭建的微頁面進行本地分頁加載，將內容更快的展示給用戶，有效減少白屏時間，提升頁面渲染速度和用戶體驗。

技術領域

本申請屬于頁面加載領域，尤其提出了用于組件化搭載的微頁面分頁方法。

背景技術

組件化搭建的頁面各組件相對獨立，各自擁有內部處理邏輯，鑒于此服務端不做分頁數據請求，需要前端本地分頁處理數據顯示。現有市面上的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；

若判斷結果為是，則該流程結束；

若判斷結果為否，判斷當前是否已加載全部數據，當判定并未加載全部數據后繼續進行后續頁面加載。