[發明專利]一種商品展示的瀑布流式加載方法、裝置、設備和介質

在審

• 申請號: 202210062578.4
• 申請日: 2022-01-19
• 公開（公告）號: CN114399365A
• 公開（公告）日: 2022-04-26
• 發明（設計）人: 何濟寧
• 申請（專利權）人: 創優數字科技（廣東）有限公司
• 主分類號: G06Q30/06
• 分類號: G06Q30/06;G06F9/451;G06F9/445;G06F3/0481;G06F3/04855
• 代理公司: 北京集佳知識產權代理有限公司 11227
• 代理人: 許慶勝

本發明公開了一種商品展示的瀑布流式加載方法、裝置、設備和介質，應用于移動終端內包括至少兩個視圖容器的小程序，方法包括：從各個視圖容器中獲取最后加載初始商品數據所處的像素區域；計算多個像素區域之間的像素差值；若接收到加載指令，從商品數據庫獲取多個更新商品數據；根據像素差值與預設像素閾值的比較結果更新加載起點容器，并基于更新后的加載起點容器加載更新商品數據至各個視圖容器并渲染，生成目標展示頁面進行展示，同時更新初始商品數據，跳轉執行從各個視圖容器獲取最后的初始商品數據所處的像素區域，通過像素差值更新加載起點容器平衡各個視圖容器內的商品數據的顯示規格，從而提高了小程序頁面展示的靈活度和流暢度。

技術領域

本發明涉及數據加載技術領域，尤其涉及一種商品展示的瀑布流式加載方法、裝置、設備和介質。

背景技術

隨著互聯網技術的不斷發展，微信小程序作為一種不需要下載安裝即可使用的應用，得到了各行各業的廣泛關注，希望通過微信強大的社交能力進行商品廣告的傳播，進而提供豐富的商品展示。

而在商品展示的過程中，商品布局經常會面臨展示上的困擾，例如部分商品的標題、促銷標簽、圖片尺寸或內容之間的差異，容易影響頁面美觀和用戶體驗。

為此，現有技術中通過采用瀑布流的方式實現對商品圖片的加載和呈現。但現有的瀑布流商品展示方案，在商品圖片規格過大或促銷信息較多的情況下無法兼容展示，導致小程序的商品展示容易出現大規模空白，影響商品展示的靈活度和流暢度。

發明內容

本發明提供了一種商品展示的瀑布流式加載方法、裝置、設備和介質，解決了現有小程序的瀑布流商品展示方案難以兼容展示不同規格的商品圖片，導致小程序的商品展示容易出現大規模空白，影響商品展示的靈活度和流暢度的技術問題。

本發明第一方面提供的一種商品展示的瀑布流式加載方法，應用于移動終端內的小程序，所述小程序包括至少兩個視圖容器，所述方法包括：

從各個所述視圖容器中獲取最后加載的初始商品數據所處的像素區域；

計算多個所述像素區域之間的像素差值；

當接收到加載指令時，從預設的商品數據庫獲取多個更新商品數據；

根據所述像素差值與預設像素閾值的比較結果更新預設的加載起點容器，并基于更新后的加載起點容器加載所述更新商品數據至各個所述視圖容器；

當所述更新商品數據被加載完成后，渲染全部所述視圖容器，生成目標展示頁面進行展示；

將所述初始商品數據更新為所述更新商品數據，跳轉執行所述從各個所述視圖容器中獲取最后加載的初始商品數據所處的像素區域的步驟。

可選地，所述小程序還包括可視區域，所述計算多個所述像素區域之間的像素差值的步驟，包括：

提取各個所述像素區域對應的初始像素位置；

從多個所述初始像素位置中選取距離所述可視區域的底端最遠的初始像素位置作為第一目標像素位置；

從多個所述初始像素位置中選取距離所述可視區域的底端最近的初始像素位置作為第二目標像素位置；

計算所述第一目標像素位置和第二目標像素位置之間的差值作為多個所述像素區域之間的像素差值。

可選地，所述根據所述像素差值與預設像素閾值的比較結果更新預設的加載起點容器，并基于更新后的加載起點容器加載所述更新商品數據至各個所述視圖容器的步驟，包括：

比較所述像素差值與預設像素閾值；

若所述像素差值大于或等于所述像素閾值，則將預設的加載起點容器更新為所述第一目標像素位置所處的視圖容器；