[發明專利]頁面滾動處理方法、裝置、終端以及存儲介質

在審

• 申請號: 202111166928.3
• 申請日: 2021-09-30
• 公開（公告）號: CN113918258A
• 公開（公告）日: 2022-01-11
• 發明（設計）人: 李杰
• 申請（專利權）人: 北京達佳互聯信息技術有限公司
• 主分類號: G06F9/451
• 分類號: G06F9/451;G06F3/0485;G06F3/0488;G06F3/04847;G06F3/04855;G06F3/04817
• 代理公司: 北京潤澤恒知識產權代理有限公司 11319
• 代理人: 李娜

本申請關于一種頁面滾動處理方法、裝置、終端以及存儲介質，涉及計算機技術領域。應用于運行有小程序的終端，所述方法包括：通過渲染層線程在頁面顯示頁面內容組件位于滾動視圖組件中的部分內容；通過渲染層線程執行第一滾動處理，直至滾動視圖組件沿滾動方向移動至頁面內容組件的邊界，第一滾動處理包括：獲取滾動視圖組件的設定偏移量，控制滾動視圖組件沿滾動方向移動設定偏移量，在頁面顯示頁面內容組件位于移動后的滾動視圖組件中的部分內容。本申請避免了實現過程中存在的邏輯層和渲染層之間的數據傳輸，減少了數據傳輸時長，降低了出現滾動卡頓的概率，提高了滾動顯示效果。

技術領域

本公開涉及計算機技術領域，尤其涉及頁面滾動處理方法、裝置、終端以及存儲介質。

背景技術

小程序是一種依賴于宿主程序的運行的程序，用戶可以通過在所安裝的宿主程序中添加各種各樣的小程序來體驗不同小程序所帶來的服務。目前小程序的運行環境包括渲染層和邏輯層，渲染層和邏輯層由兩個不同的線程管理。渲染層用于渲染頁面結構，邏輯層用于頁面的邏輯處理和數據請求等。渲染層和邏輯層分別由兩個線程管理，二者之間通過宿主程序的原生層進行通信。例如，宿主程序為微信客戶端，添加于微信上的小程序，其渲染層和邏輯層之間需要通過微信客戶端進行中轉通信。

目前實現頁面滾動處理方法為：將待滾動組件設置于Scroll-View組件(一種視圖容器)內，邏輯層線程通過定時器周期性調用setData方法改變Scroll-View組件的scrollTop值，并將改變后的scrollTop值傳輸至渲染層線程，渲染層線程將改變位置后的Scroll-View組件重新渲染顯示。這樣通過調整Scroll-View組件與待滾動組件的頂部之間的距離，使得Scroll-View組件顯示待滾動組件不同位置的內容，從而實現待滾動組件的滾動顯示效果。

但是，目前的滾動顯示方法的實現過程中會存在邏輯層和渲染層之間的數據傳輸，而二者之間需要通過宿主程序的原生層實現數據中轉。這就導致滾動顯示的實現過程中數據傳輸耗時較長，容易造成滾動卡頓，使得滾動顯示效果較差。

發明內容

本公開提供一種頁面滾動處理方法、裝置、終端以及存儲介質，以至少解決相關技術中滾動顯示效果較差的問題。本公開的技術方案如下：

根據本公開實施例的第一方面，提供一種頁面滾動處理方法，所述方法包括：

通過渲染層線程在頁面顯示頁面內容組件位于滾動視圖組件中的部分內容，所述頁面是基于所述滾動視圖組件以及與所述滾動視圖組件具有關聯層級關系的頁面內容組件生成，所述頁面內容組件在滾動方向上的長度大于所述滾動視圖組件在所述滾動方向上的長度；

通過所述渲染層線程執行第一滾動處理，直至所述滾動視圖組件沿所述滾動方向移動至所述頁面內容組件的邊界，所述第一滾動處理包括：

獲取所述滾動視圖組件的設定偏移量，

控制所述滾動視圖組件沿所述滾動方向移動所述設定偏移量，

在所述頁面顯示所述頁面內容組件位于移動后的滾動視圖組件中的部分內容。

在一種可能實現方式中，所述獲取所述滾動視圖組件的設定偏移量，包括：

獲取終端的當前時間、所述滾動視圖組件的總偏移量、滾動距離以及設定滾動時長，所述滾動距離為當前所述滾動視圖組件與所述邊界之間的距離，所述總偏移量為所述滾動視圖組件的當前位置相對所述滾動視圖組件的初始位置的總移動距離；

將所述當前時間、所述總偏移量、所述滾動距離以及所述設定滾動時長代入設定動畫緩動函數進行計算，得到所述設定偏移量。

在一種可能實現方式中，所述控制所述滾動視圖組件沿所述滾動方向移動所述設定偏移量，包括：