【技術實現步驟摘要】
本申請涉及前端,尤其涉及一種數據的展示方法、裝置及電子設備。
技術介紹
1、隨著移動通信終端的普及率的迅速提高,移動通信終端(如智能手機)已經成為現代人的生活必需品。智能手機不僅具備呼叫與接聽電話的功能,而且還具備聊天的功能。
2、為了方便用戶之間能夠及時通信,目前應用或工具通常為用戶創建聊天窗口,以便于用戶基于該聊天窗口發送消息和查看歷史消息。其中,聊天窗口的形式為超文本標記語言(hyper?text?markup?language?5,h5)頁面或者小程序。
3、傳統聊天窗口查看歷史消息時,是在聊天窗口的頂部插入歷史消息記錄。此時,聊天窗口中記錄的歷史消息的增加了,但記錄的滾動條位置仍為插入歷史消息記錄前的位置。因此,在聊天窗口顯示頂部插入的歷史消息記錄時,需重新定位錨點,以使滾動條直接跳轉至歷史消息記錄所在位置,從而導致錨點發生變化,進而使得聊天窗口存在視覺上的抖動,影響用戶的閱讀體驗。同時,當消息記錄超過一定數量時,會導致聊天窗口卡頓甚至卡死,從而導致無法查看更多的消息記錄。
技術實現思路
1、本申請提供了一種數據的展示方法、裝置及電子設備,用以解決聊天窗口抖動以及卡頓的問題。具體實現方案如下:
2、第一方面,本申請提供了一種數據的展示方法,所述方法包括:
3、確定目標記錄,并修改窗口中的數據展示層對應的偏移屬性,得到目標偏移屬性;
4、基于所述目標偏移屬性,在所述數據展示層,翻轉所述目標記錄,得到展示數據,并將所
5、通過上述申請實施例,根據修改窗口中的數據展示層對應的偏移屬性后得到的目標偏移屬性,在數據展示層中,對確定的目標記錄進行翻轉,并將翻轉后得到的展示數據在窗口中的視口層進行展示,使得用戶可以直觀的在視口層瀏覽其所需的目標記錄。并且,通過對目標記錄的翻轉,使得在窗口中正向插入記錄時,是在窗口的底部插入記錄,從而使得窗口中的滾動條的錨點不會發生改變,進而解決了傳統方案由于在頂部插入聊天記錄造成的錨點變化所導致的窗口抖動問題,降低了對用戶閱讀體驗的影響。此外,通過修改偏移屬性,實現了窗口的虛擬滾動,從而基于虛擬滾動與數據展示層的翻轉的結合,只在數據展示層加載內存存儲的記錄中的部分記錄(即目標記錄)也可以實現內存存儲的記錄的查看,進而解決了查看大量歷史記錄時,造成的頁面卡頓問題。
6、在一種可能的實施方式中,所述確定目標記錄,并修改窗口中的數據展示層對應的偏移屬性,得到目標偏移屬性,包括:
7、監聽所述窗口中的滾動層的滾動條位置,并根據所述滾動條位置,確定滾動高度;
8、根據所述滾動高度,計算起始坐標與結束坐標,并修改所述窗口中的所述數據展示層對應的所述偏移屬性,得到所述目標偏移屬性;
9、基于所述起始坐標與所述結束坐標,確定所述目標記錄。
10、在一種可能的實施方式中,所述基于所述目標偏移屬性,在所述數據展示層,翻轉所述目標記錄,得到展示數據,包括:
11、基于所述目標偏移屬性,將所述目標記錄更新至所述數據展示層;
12、在所述數據展示層中,將所述目標記錄的整體列表翻轉第一預設角度,得到臨時展示數據;
13、將所述臨時展示數據中的單條展示項翻轉第二預設角度,得到所述展示數據。
14、在一種可能的實施方式中,在所述將所述展示數據在所述窗口中的視口層進行展示之前,還包括:
15、將所述展示數據上部的m1條記錄,以及所述展示數據下部的m2條記錄作為緩沖區;其中,所述m1、m2均是非負整數;
16、在所述視口層展示所述緩沖區。
17、第二方面,本申請還提供了一種數據的展示裝置,所述裝置包括:
18、修改模塊,用于確定目標記錄,并修改窗口中的數據展示層對應的偏移屬性,得到目標偏移屬性;
19、處理模塊,用于基于所述目標偏移屬性,在所述數據展示層,翻轉所述目標記錄,得到展示數據,并將所述展示數據在所述窗口中的視口層進行展示。
20、在一種可能的實施方式中,所述修改模塊,具體用于監聽所述窗口中的滾動層的滾動條位置,并根據所述滾動條位置,確定滾動高度;根據所述滾動高度,計算起始坐標與結束坐標,并修改所述窗口中的所述數據展示層對應的所述偏移屬性,得到所述目標偏移屬性;基于所述起始坐標與所述結束坐標,確定所述目標記錄。
21、在一種可能的實施方式中,所述處理模塊,具體用于基于所述目標偏移屬性,將所述目標記錄更新至所述數據展示層;在所述數據展示層中,將所述目標記錄的整體列表翻轉第一預設角度,得到臨時展示數據;將所述臨時展示數據中的單條展示項翻轉第二預設角度,得到所述展示數據。
22、在一種可能的實施方式中,所述處理模塊,具體用于將所述展示數據上部的m1條記錄,以及所述展示數據下部的m2條記錄作為緩沖區;其中,所述m1、m2均是非負整數;在所述視口層展示所述緩沖區。
23、第三方面,本申請提供了一種電子設備,包括:
24、存儲器,用于存放計算機程序;
25、處理器,用于執行所述存儲器上所存放的計算機程序時,實現上述的一種數據的展示方法步驟。
26、第四方面,本申請提供了一種計算機可讀存儲介質,計算機可讀存儲介質內存儲有計算機程序,計算機程序被處理器執行時實現上述的一種數據的展示方法步驟。
27、上述第二方面至第四方面中的各個方面以及各個方面可能達到的技術效果請參照上述針對第一方面或第一方面中的各種可能方案可以達到的技術效果說明,這里不再重復贅述。
本文檔來自技高網...【技術保護點】
1.一種數據的展示方法,其特征在于,包括:
2.如權利要求1所述的方法,其特征在于,所述確定目標記錄,并修改窗口中的數據展示層對應的偏移屬性,得到目標偏移屬性,包括:
3.如權利要求1所述的方法,其特征在于,所述基于所述目標偏移屬性,在所述數據展示層,翻轉所述目標記錄,得到展示數據,包括:
4.如權利要求1所述的方法,其特征在于,在所述將所述展示數據在所述窗口中的視口層進行展示之前,還包括:
5.一種數據的展示裝置,其特征在于,包括:
6.如權利要求5所述的裝置,其特征在于,所述修改模塊,具體用于監聽所述窗口中的滾動層的滾動條位置,并根據所述滾動條位置,確定滾動高度;
7.如權利要求5所述的裝置,其特征在于,所述處理模塊,具體用于基于所述目標偏移屬性,將所述目標記錄更新至所述數據展示層;
8.如權利要求5所述的裝置,其特征在于,所述處理模塊,具體用于將所述展示數據上部的M1條記錄,以及所述展示數據下部的M2條記錄作為緩沖區;其中,所述M1、M2均是非負整數;
9.一種電子設備,其特征在
10.一種計算機可讀存儲介質,其特征在于,所述計算機可讀存儲介質內存儲有計算機程序,所述計算機程序被處理器執行時實現權利要求1-4任一項所述的方法步驟。
...【技術特征摘要】
1.一種數據的展示方法,其特征在于,包括:
2.如權利要求1所述的方法,其特征在于,所述確定目標記錄,并修改窗口中的數據展示層對應的偏移屬性,得到目標偏移屬性,包括:
3.如權利要求1所述的方法,其特征在于,所述基于所述目標偏移屬性,在所述數據展示層,翻轉所述目標記錄,得到展示數據,包括:
4.如權利要求1所述的方法,其特征在于,在所述將所述展示數據在所述窗口中的視口層進行展示之前,還包括:
5.一種數據的展示裝置,其特征在于,包括:
6.如權利要求5所述的裝置,其特征在于,所述修改模塊,具體用于監聽所述窗口中的滾動層的...
【專利技術屬性】
技術研發人員:劉文龍,孫放,張世軒,王慶紅,馬睿寧,
申請(專利權)人:天翼安全科技有限公司,
類型:發明
國別省市:
還沒有人留言評論。發表了對其他瀏覽者有用的留言會獲得科技券。