(19)中华 人民共和国 国家知识产权局 (12)发明 专利申请 (10)申请公布号 (43)申请公布日 (21)申请 号 202210062578.4 (22)申请日 2022.01.19 (71)申请人 创优数字科技 （广东） 有限公司 地址 516000 广东省广州市海珠区新港东 路2429号首层自编01 1房(仅限办公) (72)发明人 何济宁　 (74)专利代理 机构 北京集佳知识产权代理有限 公司 11227 代理人 许庆胜 (51)Int.Cl. G06Q 30/06(2012.01) G06F 9/451(2018.01) G06F 9/445(2018.01) G06F 3/0481(2022.01) G06F 3/04855(2022.01) (54)发明名称 一种商品展示的瀑布流式加载方法、 装置、 设备和介质 (57)摘要 本发明公开了一种商品展示的瀑布流式加 载方法、 装置、 设备和介质， 应用于移动终端内包 括至少两个视图容器的小程序， 方法包括： 从各 个视图容器中获取最后加载初始商品数据所处 的像素区域； 计算多个像素区域之间的像素差 值； 若接收到加载指令， 从商品数据库获取多个 更新商品数据； 根据像素差值与预设像素阈值的 比较结果更新加载起点容器， 并基于更新后的加 载起点容器加载更新商品数据至各个视图容器 并渲染， 生成目标展示页面进行展示， 同时更新 初始商品数据， 跳转执行从各个视图容器获取最 后的初始商品数据所处的像素区域， 通过像素差 值更新加载起点容器平衡各个视图容器内的商 品数据的显示规格， 从而提高了小程序页面展示 的灵活度和流畅度。 权利要求书2页 说明书12页 附图5页 CN 114399365 A 2022.04.26 CN 114399365 A 1.一种商品展示的瀑布流式加载方法， 其特征在于， 应用于移动终端内的小程序， 所述 小程序包括至少两个视图容器， 所述方法包括： 从各个所述视图容器中获取最后加载的初始商品数据所处的像素区域； 计算多个所述像素区域之间的像素差值； 当接收到加载指令时， 从预设的商品数据库获取多个更新商品数据； 根据所述像素差值与 预设像素阈值的比较结果更新预设的加载起点容器， 并基于更新 后的加载起 点容器加载 所述更新商品数据至各个所述视图容器； 当所述更新商品数据被加载完成后， 渲染全部所述视 图容器， 生成目标展示页面进行 展示； 将所述初始商品数据 更新为所述更新商 品数据， 跳转执行所述从各个所述视图容器中 获取最后加载的初始商品数据所处的像素区域的步骤。 2.根据权利要求1所述的方法， 其特征在于， 所述小程序还包括可视区域， 所述计算多 个所述像素区域之间的像素差值的步骤， 包括： 提取各个所述像素区域对应的初始像素位置； 从多个所述初始像素位置中选取距离所述可视区域的底端最远的初始像素位置作为 第一目标像素位置； 从多个所述初始像素位置中选取距离所述可视区域的底端最近的初始像素位置作为 第二目标像素位置； 计算所述第一目标像素位置和第二目标像素位置之间的差值作为多个所述像素区域 之间的像素差值。 3.根据权利要求2所述的方法， 其特征在于， 所述根据所述像素差值与 预设像素阈值的 比较结果更新预设的加载起点容器， 并基于更新后的加载起点容器加载所述更新商品数据 至各个所述视图容器的步骤， 包括： 比较所述像素差值与预设像素阈值； 若所述像素差值大于或等于所述像素阈值， 则将预设的加载起点容器更新为所述第 一 目标像素位置所处的视图容器； 从更新后的加载起 点容器开始 依次加载 所述更新商品数据至各个所述视图容器。 4.根据权利要求3所述的方法， 其特征在于， 所述根据所述像素差值与 预设像素阈值的 比较结果更新预设的加载起点容器， 并基于更新后的加载起点容器加载所述更新商品数据 至各个所述视图容器的步骤， 还 包括： 若所述像素差值小于所述像素阈值， 则将当前的加载起点容器确定为更新后的加载起 点容器。 5.根据权利要求1所述的方法， 其特征在于， 在所述从各个所述视图容器中获取最后加 载的初始商品数据所处的像素区域的步骤之前， 所述方法还 包括： 当接收到首页打开指令时， 从预设的商品数据库获取多个初始商品数据； 基于预设的加载起 点容器将所述初始商品数据加载至各个所述视图容器； 渲染全部所述视图容器， 生成初始展示页面进行展示。 6.根据权利要求1 ‑5任一项所述的方法， 其特征在于， 所述小程序还包括瀑布流容器， 所述方法还 包括：权　利　要　求　书 1/2 页 2 CN 114399365 A 2通过所述瀑布流 容器实时监听所述小程序内的滚动条对应的滚动条位置； 当所述滚动条位置处于预设的更新阈值位置时， 发送滚动更新指令至所述商品数据 库； 通过所述瀑布流容器接收所述商品数据库响应所述滚动更新指令返回的滚动商品数 据， 并将所述滚动商品数据确定为 新的更新商品数据； 跳转执行所述根据所述像素差值与预设像素阈值的比较结果更新预设的加载起点容 器， 并基于更新后的加载起 点容器加载 所述更新商品数据至各个所述视图容器的步骤。 7.根据权利要求2所述的方法， 其特 征在于， 所述方法还 包括： 实时获取 所述更新商品数据的像素尺寸； 若所述像素尺寸大于所述可视区域的尺寸， 则逐行加载所述更新商 品数据对应的像素 至所述视图容器； 若所述像素尺寸小于或等于所述可视区域的尺寸， 则将所述更新商 品数据对应的全部 像素加载至所述视图容器。 8.一种商品展示的瀑布流式加载装置， 其特征在于， 应用于移动终端内的小程序， 所述 小程序包括至少两个视图容器， 所述装置包括： 像素区域获取模块， 用于从各个所述视图容器中获取最后加载的初始商 品数据所处的 像素区域； 像素差值计算模块， 用于计算多个所述像素区域之间的像素差值； 更新商品数据获取模块， 用于当接收到加载指令时， 从预设的商品数据库获取多个更 新商品数据； 数据加载模块， 用于根据所述像素差值与 预设像素阈值的比较结果更新预设的加载起 点容器， 并基于更新后的加载起 点容器加载 所述更新商品数据至各个所述视图容器； 页面渲染与展示模块， 用于当所述更新商品数据被加载完成后， 渲染全部所述视 图容 器， 生成目标展示页面进行展示； 循环更新模块， 用于将所述初始商品数据更新为所述更新商品数据， 跳转执行所述从 各个所述视图容器中获取最后加载的初始商品数据所处的像素区域的步骤。 9.一种电子设备， 其特征在于， 包括存储器及处理器， 所述存储器中储存有计算机程 序， 所述计算机程序被所述处理器执行时， 使得所述处理器执行如权利要求 1‑7任一项所述 的商品展示的瀑布流式加载 方法的步骤。 10.一种计算机可读存储介质， 其上存储有计算机程序， 其特征在于， 所述计算机程序 被执行时实现如权利要求1 ‑7任一项所述的商品展示的瀑布流式加载 方法。权　利　要　求　书 2/2 页 3 CN 114399365 A 3