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

有效

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

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，則不進行任何處理。