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

有效

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

本發明實施例提供一種頁面展示方法、裝置及電子終端，方法及裝置應用于電子終端。電子終端包括基于React的網格布局組件，該網格布局組件用于展示包括至少一個面板的面板頁面。電子終端響應對面板頁面中目標面板的預設操作，將目標面板在預設操作被執行后的目標位置信息和目標尺寸信息傳遞給網格布局組件。網格布局組件根據目標位置信息和目標尺寸信息計算得到面板頁面的目標布局信息。根據目標布局信息對面板頁面的狀態進行更新，使網格布局組件對面板頁面進行重新繪制，從而按照目標布局信息對面板頁面中的各個面板進行展示。

技術領域

本發明涉及計算機技術領域，具體而言，涉及一種頁面展示方法、裝置及電子終端。

背景技術

目前，通常是根據設計人員提供的設計圖進行編程才能實現具有多個面板的網頁布局。這種開發方式較為復雜，一旦需要調整布局則需要重新進行編程。無法根據用戶需求，隨時調整網頁中各個面板的布局，用戶體驗差。

發明內容

有鑒于此，本發明的目的在于提供一種頁面展示方法、裝置及電子終端，以改善上述問題。

為了達到上述目的，本發明實施例提供一種頁面展示方法，應用于電子終端，所述電子終端包括基于React的網格布局組件，所述網格布局組件用于展示包括至少一個面板的面板頁面，所述方法包括：

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

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

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

可選地，所述網格布局組件根據所述目標位置信息和所述目標尺寸信息計算得到所述網格布局組件的目標布局信息，包括：

所述網格布局組件將所述目標位置信息和所述目標尺寸信息保存到所述目標布局信息中；

針對所述面板頁面中除所述目標面板之外的每個面板，根據該面板的位置信息、尺寸信息及所述目標位置信息和目標尺寸信息，判斷該面板和所述目標面板是否存在重疊區域；

若不存在重疊區域，則將該面板的位置信息和尺寸信息保存到所述目標布局信息中；

若存在重疊區域，則對該面板的位置信息進行調整，直至該面板與所述目標面板不存在重疊區域，再將該面板當前的位置信息和尺寸信息保存到所述目標布局信息中。

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

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

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

當該面板中不存在位置信息和尺寸信息時，按照默認的位置信息和尺寸信息展示該面板。

可選地，所述網格布局組件為響應式網格布局組件。

可選地，所述電子終端中預存有與不同像素大小對應的布局信息；所述方法還包括：

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

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

可選地，所述預設操作包括拖曳操作或縮放操作。