[發明專利]一種基于AngularJS框架的大數據列表實現方法

有效

• 申請號: 202310849000.8
• 申請日: 2023-07-12
• 公開（公告）號: CN116578299B
• 公開（公告）日: 2023-09-08
• 發明（設計）人: 徐文勇;田紅偉;魏偉寧
• 申請（專利權）人: 成都數默科技有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38;G06F9/451;G06F3/04855
• 代理公司: 成都天嘉專利事務所(普通合伙) 51211
• 代理人: 彭思雨

1.一種基于AngularJS框架的大數據列表實現方法，其特征在于，所述大數據列表由可視區域、虛擬容器以及渲染區域組成，渲染區域包括上預渲染區域、實際渲染區域和下預渲染區域，所述大數據列表實現方法具體包括以下步驟：

設置可視區域高度；

獲取大數據列表數組，計算出虛擬容器的高度并通過JavaScript設置虛擬容器的高度；

計算實際渲染區域內渲染的數據項的數量，以及計算整個渲染區域的高度；

編寫HTML文件，將實際渲染區域內渲染的數據項的數量以及渲染區域中第一條數據的索引這兩個參數綁定至HTML文件中，用于實現大數據列表的更新；

監聽用戶觸發的滾動條滾動操作，隨著滾動事件的觸發，獲取scrollTop的值，實時計算渲染區域中第一條數據的索引的值，根據scrollTop的值以及渲染區域中第一條數據的索引的值判斷是否需要對大數據列表進行更新；

基于AngularJS雙向綁定特性，將HTML文件中綁定的參數進行更新，并設置渲染區域的定位高度，最終完成大數據列表的更新；

所述獲取scrollTop的值，實時計算渲染區域中第一條數據的索引的值為采用scrollTop的值除以每一條數據項高度取整后，并減去上預渲染區域內渲染的數據項的數量獲得；

所述根據scrollTop的值以及渲染區域中第一條數據的索引的值判斷是否需要對大數據列表進行更新，包括：

當scrollTop的值小于實際渲染區域的高度時，無需進行渲染區域的更新；

當scrollTop的值大于實際渲染區域的高度時，并且可視區域底部距離渲染區域的底部距離不足三分之一的下預渲染區域的高度時，則需要對渲染區域進行更新，包括渲染區域數據項的更新和渲染區域位置的更新；

當渲染區域中第一條數據的索引的值大于大數據列表數組全部數據項的數量減去實際渲染區域內數據項數量×3的值，則不再需要對渲染區域進行更新，并且也不再更新渲染區域中第一條數據的索引。

2.根據權利要求1所述的一種基于AngularJS框架的大數據列表實現方法，其特征在于，所述獲取大數據列表數組，計算出虛擬容器的高度，包括：

設定每一條數據項的高度相等，那么虛擬容器的高度等于大數據列表數組全部數據項的數量乘以每一條數據項的高度。

3.根據權利要求1所述的一種基于AngularJS框架的大數據列表實現方法，其特征在于，所述實際渲染區域的最小高度大于可視區域高度。

4.根據權利要求3所述的一種基于AngularJS框架的大數據列表實現方法，其特征在于，所述計算實際渲染區域內渲染的數據項的數量為采用可視區域高度/每一條數據項高度的值，并向上取整獲得。

5.根據權利要求4所述的一種基于AngularJS框架的大數據列表實現方法，其特征在于，所述計算整個渲染區域的高度，包括：

設定上預渲染區域和下預渲染區域內，包括的預渲染的數據項的數量與實際渲染區域內渲染的數據項的數量相同，那么整個渲染區域的高度為實際渲染區域內渲染的數據項的數量×每一條數據項高度×3。

6.根據權利要求1所述的一種基于AngularJS框架的大數據列表實現方法，其特征在于，編寫HTML文件時，大數據列表部分使用ng-repeat循環列表，并且使用內置過濾器limitTo。

7.根據權利要求1所述的一種基于AngularJS框架的大數據列表實現方法，其特征在于，所述渲染區域的定位高度等于渲染區域中第一條數據的索引的值×每一條數據項高度。

8.根據權利要求1所述的一種基于AngularJS框架的大數據列表實現方法，其特征在于，監聽用戶觸發的滾動條滾動操作時，設置100ms內僅觸發一次事件。