[發明專利]頁面展示方法、裝置及電子終端

有效

• 申請號: 201810000758.3
• 申請日: 2018-01-02
• 公開（公告）號: CN108073438B
• 公開（公告）日: 2020-05-12
• 發明（設計）人: 黃誠;陳少杰;張文明
• 申請（專利權）人: 武漢斗魚網絡科技有限公司
• 主分類號: G06F9/451
• 分類號: G06F9/451;G06F8/38
• 代理公司: 北京超凡志成知識產權代理事務所(普通合伙) 11371
• 代理人: 金相允

1.一種頁面展示方法，其特征在于，應用于電子終端，所述電子終端包括基于React的網格布局組件，所述網格布局組件用于展示包括至少一個面板的面板頁面，所述方法包括：

響應對面板頁面中目標面板的預設操作，將所述目標面板在所述預設操作被執行后的目標位置信息和目標尺寸信息傳遞給所述網格布局組件；其中，所述預設操作包括拖曳操作或縮放操作；

所述網格布局組件根據所述目標位置信息和所述目標尺寸信息計算得到所述面板頁面的目標布局信息；

根據所述目標布局信息對所述面板頁面的狀態進行更新，使所述網格布局組件對所述面板頁面進行重新繪制，從而按照所述目標布局信息對所述面板頁面中的各個面板進行展示；

其中，所述網格布局組件根據所述目標位置信息和所述目標尺寸信息計算得到所述面板頁面的目標布局信息，包括：

將所述目標位置信息和所述目標尺寸信息保存到所述目標布局信息中，針對所述面板頁面中除所述目標面板之外的每個面板，根據該面板的位置信息、尺寸信息及所述目標位置信息和目標尺寸信息，判斷該面板和所述目標面板是否存在重疊區域，若不存在重疊區域，則將該面板的位置信息和尺寸信息保存到所述目標布局信息中，若存在重疊區域，則對該面板的位置信息和/或尺寸信息進行調整，直至該面板與所述目標面板不存在重疊區域，再將該面板當前的位置信息和尺寸信息保存到所述目標布局信息中；

所述電子終端與服務器通信連接，所述方法還包括：

所述網格布局組件接收所述服務器發送的面板頁面，并遍歷所述面板頁面中的每個面板，判斷該面板中是否存在位置信息和尺寸信息；

當該面板中存在位置信息和尺寸信息時，根據該位置信息和尺寸信息展示該面板；

當該面板中不存在位置信息和尺寸信息時，按照默認的位置信息和尺寸信息展示該面板，并依次加載每個面板，遍歷完每個面板，展示所述面板頁面。

2.根據權利要求1所述的方法，其特征在于，所述網格布局組件為響應式網格布局組件。

3.根據權利要求2所述的方法，其特征在于，所述電子終端中預存有與不同像素大小對應的布局信息；所述方法還包括：

在檢測到所述面板頁面所在界面的尺寸發生改變后，獲取所述界面改變后的尺寸；

查找與所述改變后的尺寸對應的布局信息，并根據該布局信息重新繪制所述面板頁面。

4.一種頁面展示裝置，其特征在于，應用于電子終端，所述電子終端包括基于React的網格布局組件，所述網格布局組件用于展示包括至少一個面板的面板頁面，所述裝置包括：

操作響應模塊，用于響應對面板頁面中目標面板的預設操作，將所述目標面板在所述預設操作被執行后的目標位置信息和目標尺寸信息傳遞給所述網格布局組件；其中，所述預設操作包括拖曳操作或縮放操作；

布局信息計算模塊，用于控制所述網格布局組件將所述目標位置信息和所述目標尺寸信息保存到目標布局信息中，針對所述面板頁面中除所述目標面板之外的每個面板，根據該面板的位置信息、尺寸信息及所述目標位置信息和目標尺寸信息，判斷該面板和所述目標面板是否存在重疊區域，若不存在重疊區域，則將該面板的位置信息和尺寸信息保存到所述目標布局信息中，若存在重疊區域，則對該面板的位置信息進行調整，直至該面板與所述目標面板不存在重疊區域，再將該面板當前的位置信息和尺寸信息保存到所述目標布局信息中；

所述電子終端與服務器通信連接，布局信息計算模塊，還用于控制所述網格布局組件接收所述服務器發送的面板頁面，并遍歷所述面板頁面中的每個面板，判斷該面板中是否存在位置信息和尺寸信息；

當該面板中存在位置信息和尺寸信息時，根據該位置信息和尺寸信息展示該面板；

當該面板中不存在位置信息和尺寸信息時，按照默認的位置信息和尺寸信息展示該面板，并依次加載每個面板，遍歷完每個面板，展示所述面板頁面；

展示模塊，用于根據所述目標布局信息對所述面板頁面的狀態進行更新，使所述網格布局組件對所述面板頁面進行重新繪制，從而按照所述目標布局信息對所述面板頁面中的各個面板進行展示。

5.一種計算機可讀存儲介質，其上存儲有計算機程序，其特征在于，所述計算機程序被執行時實現權利要求1-3任意一項所述的方法。