[發明專利]Web端長列表渲染方法

有效

• 申請號: 202010166783.6
• 申請日: 2020-03-11
• 公開（公告）號: CN111381823B
• 公開（公告）日: 2022-02-18
• 發明（設計）人: 蘇云祥;祁家林
• 申請（專利權）人: 四川長虹電器股份有限公司
• 主分類號: G06F8/38
• 分類號: G06F8/38
• 代理公司: 四川省成都市天策商標專利事務所(有限合伙) 51213
• 代理人: 張秀敏

1.一種Web端長列表渲染方法，其特征在于，包括以下步驟：

步驟1、頁面布局：在根節點中設置固定長度列表，所述固定長度列表從上到下依次包括可視區域上方不可見內容beforeOffset，中間可視區域內容content，可視區域下方不可見內容afterOffse三頁的內容；進行頁面布局時，還包括設定用于撐起上下根節點的padding-top與padding-bottom；

步驟2、用戶設定需要渲染的數據數組data，視圖的高度viewHeight，和渲染數據所需的渲染函數，然后根據傳入的數據數組data的長度data.length和渲染后的每條數據所占DOM節點的高度itemHeight，計算出整個頁面的高度totalHeight，totalHeight＝data.length*itemHeight；

步驟3、計算出所述固定長度列表中每頁內容所需的數據的最少條數pageLength，即用viewHeight/data.length的值使用進一法保留整數；

步驟4、在所述固定長度列表的前后分別添加首部監聽節點和尾部監聽節點，再使用Intersection Observer對象為首部監聽節點和尾部監聽節點添加監聽事件，并在首尾添加空白不可見標記元素作為監聽元素，首先在創建監聽對象時傳入callback回調函數與options配置選項，其中options配置選項主要包括root，rootMargin，root表示視窗節點，不傳值表示瀏覽器窗口，rootMargin是對節點的延伸，再對上下margin設置固定高度，增加視圖觸發事件的區域范圍，然后分別添加首尾監聽函數到監聽對象中，當首部監聽元素監聽事件被觸發時開始進行下拉更新數據，相反的，當尾部監聽元素監聽事件被觸發時開始進行上滑更新數據；

所述的下拉更新數據具體包括：當向下滾動首部空白標記元素即將進入可視范圍觸發監聽事件時，將afterOffset中dom節點移出并更新為之前一頁的數據，然后插入到首部標記元素與beforeOffset之間，成為新的beforeOffset內容，同時更改padding-top減少一頁的高度，padding-bottom增加一頁的高度，如果padding-top為0則停止首部元素的監聽，如果padding-bottom大于0則啟動尾部元素的監聽；所述的上滑更新數據具體包括：當向上滾動尾部空白標記元素即將進入可視范圍觸發監聽事件時，將beforeOffset中dom節點移除并更新為后一頁的數據，如果剩余數據不足一頁，則只渲染部分的數據，并將padding-bottom改為0，否則padding-bottom減少一頁的高度，然后插入到尾部標記元素與afterOffset之間，成為新的afterOffset內容，然后設置padding-top增加一頁的高度，如果padding-top大于0則啟動首部元素的監聽，如果padding-bottom等于0則停止尾部元素的監聽。

2.根據權利要求1所述的Web端長列表渲染方法，其特征在于，在步驟1中，所述固定長度列表中每頁內容高度為最少數據渲染后的dom節點占滿一頁時的高度。

3.根據權利要求1所述的Web端長列表渲染方法，其特征在于，在步驟2中，如果數組data的數據量不足三頁，即data.length小于等于pageLength*3，則直接渲染出所有數據。

4.根據權利要求1所述的Web端長列表渲染方法，其特征在于，在步驟4中，所述首部監聽節點和尾部監聽節點的高度均為0。

5.根據權利要求1所述的Web端長列表渲染方法，其特征在于，對數據data進行監聽，具體包括：在對頁面進行布局時，同時使用startIndex與endIndex標記固定長度列表對應的數組數據的渲染范圍，在數據長度或內容變化時及時更新與重新初始化，根據之前標記的startIndex與endIndex，重新計算totalHeight，padding-top，padding-bottom，然后根據startIndex與endIndex中變化的數據項更新dom節點，因此整個頁面也完成了更新。