TW201918854A

TW201918854A - 視圖捲動方法、裝置以及電子設備

Info

Publication number: TW201918854A
Application number: TW107130314A
Authority: TW
Inventors: 田亮
Original assignee: 香港商阿里巴巴集團服務有限公司
Priority date: 2017-10-31
Filing date: 2018-08-30
Publication date: 2019-05-16
Also published as: WO2019085580A1; CN107977150A

Abstract

本說明書實施例揭示了一種視圖捲動方法、裝置以及電子設備，當攜帶有支援HTML5的瀏覽器的終端設備接收到視圖捲動操作後，根據基於原生捲動組件定義的捲動區域，判斷該視圖捲動操作是否滑動到了捲動區域的邊界線；若判斷結果為是，保存基於原生捲動組件定義的回彈區域的原點座標；根據用戶進一步的視圖捲動操作，基於預定的回彈區域繼續滑動；當用戶釋放視圖捲動操作，回彈區域帶動捲動區域還原到標記位置。

Description

視圖捲動方法、裝置以及電子設備

本說明書有關於電腦技術領域，尤其有關於一種視圖捲動方法、裝置以及電子設備。

隨著網際網路技術的發展，支援HTML5(Hypertext Markup Language 5.0，超文字傳輸協定第5版)的頁面(如：網頁、應用頁面等)中，往往會載入很多資訊，例如：圖片、文字等等，但由於終端設備的螢幕尺寸有限，故透過螢幕目前顯示介面無法同時清晰地顯示出頁面中的所有內容。因此，用戶可透過捲動操作的方式，瀏覽頁面中的所有內容。　　在現有技術中，由於基於HTML5的瀏覽器中的視圖捲動組件並不是很齊全，不能夠支援所有移動終端實現視圖捲動以及拖拉回彈的動畫效果。因此，移動終端的視圖捲動通常是借助於iscroll等第三方視圖捲動組件實現的。具體來說，是透過iscroll，完全攔截用戶捲動、拖放等操作，並使用CSS(Cascading Style Sheets，層疊樣式表)定位移動的方式模擬基於HTML5的網頁視圖捲動效果。　　基於現有技術，需要能夠更好的實現視圖捲動的方案。

本說明書實施例提供一種視圖捲動方法、裝置以及電子設備，用於解決以下技術問題：需要能夠更好的實現視圖捲動的方案。　　為解決上述技術問題，本說明書實施例是這樣實現的：　　本說明書實施例提供的一種視圖捲動方法，包括：　　接收視圖捲動操作，基於原生捲動組件捲動預設的捲動區域；　　當所述捲動區域邊界線捲動到與可視區域邊界線對齊時，獲取預設的回彈區域的標記位置；其中，所述捲動區域邊界線基於預設的捲動區域包含的視圖內容確定的；　　基於所述視圖捲動操作對所述回彈區域實現的渲染效果，根據所述回彈區域對應的所述標記位置，還原所述回彈區域；　　其中，所述捲動區域和所述回彈區域基於所述原生捲動組件預設得到。　　本說明書實施例提供的一種視圖捲動裝置，包括：　　接收模組，接收視圖捲動操作，基於原生捲動組件捲動預設的捲動區域；　　標記模組，在當所述捲動區域邊界線捲動到與可視區域邊界線對齊時，獲取預設的回彈區域的標記位置；其中，所述捲動區域邊界線基於預設的捲動區域包含的視圖內容確定的；　　回彈模組，基於所述視圖捲動操作對所述回彈區域實現的渲染效果，根據所述回彈區域對應的所述標記位置，還原所述回彈區域；　　其中，所述捲動區域和所述回彈區域基於所述原生捲動組件預設得到。　　本說明書實施例提供的一種電子設備，包括：　　至少一個處理器；以及，　　與所述至少一個處理器通訊連接的記憶體；其中，　　所述記憶體儲存有可被所述至少一個處理器執行的指令，所述指令被所述至少一個處理器執行，以使所述至少一個處理器能夠：　　接收視圖捲動操作，基於原生捲動組件捲動預設的捲動區域；　　當所述捲動區域邊界線捲動到與可視區域邊界線對齊時，獲取預設的回彈區域的標記位置；其中，所述捲動區域邊界線基於預設的捲動區域包含的視圖內容確定的；　　基於所述視圖捲動操作對所述回彈區域實現的渲染效果，根據所述回彈區域對應的所述標記位置，還原所述回彈區域；　　其中，所述捲動區域和所述回彈區域基於所述原生捲動組件預設得到。　　本說明書實施例採用的上述至少一個技術方案能夠達到以下有益效果：根據支援HTML5的瀏覽器攜帶的原生scroll view捲動組件預設回彈區域和捲動區域；利用原生scroll view捲動組件實現視圖捲動操作，不需要依賴第三方視圖捲動組件或外掛程式對用戶的捲動操作進行攔截，可以有效提升視圖捲動的性能，具有更好的流暢捲動的體驗；進一步地，基於原生scroll view捲動組件，利用預設的CSS3動畫渲染方式，使得回彈區域實現預設的回彈效果，可以滿足用戶使用移動終端時的視圖下拉和視圖回彈的動畫體驗。

為了使本技術領域的人員更佳地理解本說明書中的技術方案，下面將結合本說明書實施例中的圖式，對本說明書實施例中的技術方案進行清楚、完整地描述，顯然，所描述的實施例僅僅是本發明的一部分實施例，而不是全部的實施例。基於本說明書實施例，本領域普通技術人員在沒有作出創造性勞動前提下所獲得的所有其他實施例，都應當屬於本發明保護的範圍。　　圖1為本說明書的方案在一種實際應用情況下涉及的顯示介面佈局的示意圖。該顯示介面佈局包括捲動區域、回彈區域、可視區域、不可視區域。移動終端設備接收到用戶的視圖捲動操作後，捲動區域及其對應的顯示介面發生捲動；該視圖捲動操作透過支持HTML5的瀏覽器攜帶的scroll view原生捲動組件實現。　　在圖1所示的介面中，能夠透過顯示介面顯示的部分被稱作可視區域。網頁內容中不能夠直接顯示給用戶的，需要透過捲動操作顯示給用戶的部分稱作不可視區域。捲動區域根據視圖內容來確定的，用來標記視圖捲動操作時頁面內容捲動的距離，以及判斷頁面是否捲動到頂部或者底部邊界。回彈區域可認為是用於實現預定的回彈渲染效果的區域。　　需要說明的是，在進行捲動操作的過程中，原生scroll view捲動組件無法直接透過介面直接確定顯示內容的捲動距離，那麼，透過定義的上述捲動區域，則可根據捲動區域的捲動距離確定顯示內容的捲動距離。當捲動區域的邊界線與可視區域的邊界線對齊時，如果用戶繼續進行視圖捲動操作，則回彈區域將攜帶捲動區域一起繼續捲動；如果用戶釋放視圖捲動操作，回彈區域攜帶捲動區域回彈到與可視區域邊界線對齊的位置，該回彈動畫採用CSS3動畫回彈。　　本實施例技術方案可應用於手機、平板電腦等支持HTML5的移動終端設備，為了更佳地進行舉例說明技術方案，下面的各個實施例中將手機作為一種實際應用情況進行說明。　　基於該整體架構，下面對本說明書的方案進行詳細說明。　　本說明書實施例提供了一種視圖捲動方法，該方法的流程示意圖如圖2所示。　　圖2為本說明書實施例提供的一種視圖捲動方法的流程示意圖，該方法具體可以包括以下步驟：　　步驟S202：接收視圖捲動操作，基於原生捲動組件捲動預設的捲動區域。　　在實際應用中，如果網頁等頁面的內容比較多時，通常無法將所有的內容透過終端螢幕的目前顯示介面完全展現給用戶，尤其是螢幕較小的移動終端設備。因此，需要採用視圖捲動的方式將網頁內容依次顯示給用戶。　　原生捲動組件，通常可認為是HTML所能支援的捲動組件。例如，可以是基於支援HTML5的瀏覽器攜帶的scroll view捲動組件。進一步地，在本說明書的一個或者多個實施例中，接收視圖捲動操作，基於原生捲動組件捲動預設的捲動區域，具體可以包括：接收視圖捲動操作對應的捲動距離，基於支援HTML5的瀏覽器攜帶的scroll view捲動組件，捲動所述預設的捲動區域；其中，所述捲動區域用於確定實現捲動操作的視圖範圍。　　例如，在支援HTML5的瀏覽器應用於移動終端的情況下，如圖3a所示，為視圖未發生捲動時，網頁頂部邊界與可視區域頂部邊界是對齊的；當採用基於HTML5的瀏覽器攜帶的原生scroll view捲動組件實現視圖捲動操作，視圖發生捲動後(如圖3b所示)，原來顯示在可視區域的“第一標題”捲動到頂部的不可視區域，原來位於底部的不可視區域的“第四標題”顯示在可視區域中。由於原生scroll view捲動組件具有更好的相容性，捲動運行流程，能夠有效提升用戶體驗。　　步驟S204：當所述捲動區域邊界線捲動到與可視區域邊界線對齊時，獲取預設的回彈區域的標記位置；其中，所述捲動區域邊界線基於預設的捲動區域包含的視圖內容確定的。　　例如，當用戶透過支持HTML5的瀏覽器瀏覽到網頁的頂部或底部(當然，也可以包括網頁的左右邊界線)時，也就是捲動區域的邊界線與可視區域的邊界線對齊時，根據預設動畫方式，捲動區域邊界線可以繼續捲動越出可視區域。為了能夠返回到目前的位置，所以需要保存預設的回彈區域的目前標記位置。　　需要說明的是，在本發明實施例中所說的越出可以理解為捲動區域的邊界線越過可視區域的邊界線，進入到可視區域的可視範圍內。　　這裡所說的標記位置，可以是捲動區域的頂部或底部邊界線與回彈區域頂部或底部邊界線對齊時的標記位置，並且該標記位置可以是一個標記作用的點或者一條標記作用的線。例如，假設以可視區域的左上角座標作為回彈區域的原點位置，當捲動區域頂部邊界線與可視區域的頂部邊界線對齊時，保存回彈區域的原點位置(即，標記位置)。　　步驟S206：基於所述視圖捲動操作對所述回彈區域實現的渲染效果，根據所述回彈區域對應的所述標記位置，還原所述回彈區域。　　在實際應用中，渲染效果可以有多種，具體可根據用戶需求將渲染效果設定為尺寸縮放、位置調整、模糊化、設定透明度等等。回彈區域用於輔助實現預設的渲染效果。例如，當回彈區域的位置或尺寸發生變化後，根據預設的渲染效果，使得回彈區域的下拉和回彈過程可以呈現類似橡皮筋回彈的效果。　　該回彈區域的範圍大小是可以根據實際需要進行定義的，一般來說，回彈區域定義範圍不大於捲動區域的範圍，但是不小於可視區域的範圍。　　基於上述步驟，根據支援HTML5的瀏覽器攜帶的原生scroll view捲動組件預設回彈區域和捲動區域，那麼，利用原生scroll view捲動組件實現視圖捲動操作，不需要依賴第三方視圖捲動組件或外掛程式對用戶的捲動操作進行攔截，可以有效提升視圖捲動的性能，具有更好的流暢捲動的體驗；進一步地，基於原生scroll view捲動組件，並利用預設的CSS3動畫渲染方式，使得回彈區域實現預設的回彈效果，可以滿足用戶在使用移動終端時的視圖下拉和視圖回彈的動畫體驗。　　在本說明書的一個或者多個實施例中，當所述捲動區域邊界線捲動到與可視區域邊界線對齊時，獲取預設的回彈區域的標記位置，具體可以包括：基於所述預設的捲動區域包含的視圖內容，確定所述捲動區域的邊界線；當所述捲動區域的邊界線與所述可視區域邊界線或者所述回彈區域邊界線對齊時，獲取並保存所述回彈區域的標記位置；其中，所述回彈區域用於確定實現回彈效果的視圖範圍。　　如前文所述，可知捲動區域的範圍是根據視圖內容確定的，具體來說，例如可以根據完全顯示視圖內容時所需的圖元數來確定對應的捲動區域的高度，進而可以根據捲動區域的高度確定其頂部和底部邊界線的位置以及捲動過的圖元數(即，捲動距離)。　　當捲動區域的邊界線與可視區域的邊界線對齊時，保存預設的回彈區域的標記位置，該標記位置可以作為回彈時的參考位置。　　回彈區域除了可以用來確定回彈的標記位置外，還可以用於確定實現回彈效果的視圖範圍。例如，假設預設的回彈區域的範圍與可視區域的範圍大小相同，根據回彈區域與捲動區域之間的位置關係，當捲動區域捲動到頂部邊界時，如圖4所示，用於實現回彈效果的視圖為目前可視區域對應的視圖頂部到可視區域底部的部分；同理，當捲動區域捲動到底部邊界時，如圖6所示，用於實現回彈效果的視圖為目前可視區域對應的視圖底部到可視區域頂部的部分；上述兩種情況下回彈區域分別對應不同的視圖內容。因此，在實際應用中，用於實現回彈效果的視圖內容是根據回彈區域與捲動區域的位置關係來確定的。　　在本說明書的一個或者多個實施例中，基於所述視圖捲動操作對所述回彈區域實現的渲染效果，具體可以包括：基於預設的渲染方式，根據所述視圖捲動操作調整所述回彈區域的位置和/或尺寸。　　如前文所述，預設的渲染方式可以包括：尺寸縮放、位置調整、模糊化、設定透明度等。在實際應用中，還可以同時使用多種渲染方式，如：在實現位置調整(即，位移)的同時，也將回彈區域對應的視圖透明度調整為50%透明。在實際應用中用戶可以根據自己的需求進行選擇，這裡所列舉的渲染方式只是進行舉例說明，並不作為對本申請的限制。　　在本說明書的一個或者多個實施例中，所述預設的渲染方式包括預設的CSS3動畫方式；　　基於所述視圖捲動操作對所述回彈區域實現的渲染效果，根據所述回彈區域對應的所述標記位置還原所述回彈區域，具體可以包括：　　當所述預設的渲染方式實現的效果為調整所述回彈區域的位置時，根據結束所述視圖捲動操作，或者所述回彈區域的移動距離達到預設的偏移量，所述回彈區域按照所述預設的CSS3動畫方式還原；　　當所述預設的渲染方式實現的效果為調整所述回彈區域的尺寸時，根據結束所述視圖捲動操作，或者所述回彈區域的尺寸放大倍數達到預設的放大閾值，所述回彈區域按照所述預設的CSS3動畫方式還原；　　根據所述捲動區域與所述回彈區域之間的對應關係，所述回彈區域帶動所述捲動區域還原到所述標記位置；　　其中，所述標記位置包括：所述回彈區域的原點位置、基準線位置。　　需要說明的是，在實際應用中，通常回彈區域與捲動區域之間具有繼承關係，具體來說，捲動區域能夠繼承回彈區域的資料資訊，該資料資訊例如可以包括：標記位置或者座標資訊等等。　　為了便於理解，下面以預設的渲染方式為調整回彈區域位置為例進行說明，圖4為本說明書實施例提供的一種頂部邊界線對齊的示意圖，圖5為對應於圖4的一種頂部邊界線下拉的示意圖；圖6為本說明書實施例提供的一種底部邊界線對齊的示意圖，圖7為對應於圖6的一種底部邊界線下拉的示意圖。當捲動區域的邊界線捲動到與可視區域的邊界線對齊的位置後，若該回彈區域繼續基於預設CSS3動畫進行滑動，如圖5和圖7所示，由於回彈區域與捲動區域之間存在繼承關係，回彈區域進行滑動的同時，會攜帶捲動區域一起進行滑動。當回彈區域根據保存的標記位置進行回彈還原時，捲動區域再根據繼承的回彈區域的標記位置進行還原，還原到如圖4和圖6所示的狀態。這樣，呈現給用戶的效果是一直在對捲動區域對應的視圖內容進行捲動操作和回彈操作，能夠提升用戶視覺體驗效果。　　在實際應用中，回彈區域進行回彈的條件可有多種。在一種實施例中，當用戶發現已經滑動到所瀏覽網頁的邊界線(即，捲動區域邊界線)後，用戶會主動釋放該視圖捲動操作，根據預設的CSS3動畫方式，回彈區域攜帶捲動區域一起恢復到原來保存的標記位置。　　在另一種實施例中，假設設定了釋放回彈區域的偏移量，當用戶持續滑動回彈區域超過該設定的偏移量值後，回彈區域會自動攜帶捲動區域一起還原到標記位置。　　需要說明的是，標記位置通常可以是回彈區域的某一個點，如左上角座標點；當然，也可以將回彈區域的頂部邊界線或者底部邊界線作為基準線的位置，同樣可以起到標記位置的作用。　　在本說明書的一個或者多個實施例中，當所述捲動區域邊界線未捲動越出所述可視區域邊界線時，所述回彈區域相對於所述可視區域不發生移動，所述捲動區域相對於所述回彈區域和所述可視區域發生移動。　　在實際應用中，捲動區域通常大於可視區域和回彈區域，回彈區域通常與可視區域大小相同。在進行視圖捲動操作時，如果還沒有捲動到捲動區域的頂部、底部等邊界線，則只有捲動區域根據用戶的視圖捲動操作進行捲動，回彈區域與可視區域不發生移動。如果捲動到捲動區域的邊界線後，保存回彈區域的標記位置，並且根據目前捲動區域與回彈區域之間的對應關係(如，繼承關係)，回彈區域攜帶捲動區域一起繼續捲動，此時，回彈區域相對於捲動區域不發生移動，回彈區域相對於可視區域發生移動。　　根據以上所述實施例可知，基於支持HTML5的瀏覽器攜帶的原生scroll view捲動組件預設回彈區域和捲動區域；利用原生scroll view捲動組件實現視圖捲動操作，不需要依賴第三方視圖捲動組件或外掛程式對用戶的捲動操作進行攔截，可以有效提升視圖捲動的性能，具有更好的流暢捲動的體驗；進一步地，基於原生scroll view捲動組件，利用預設的CSS3動畫渲染方式，使得回彈區域實現預設的回彈效果，可以滿足用戶使用移動終端時的視圖下拉和視圖回彈的動畫體驗。　　基於同樣的思路，本說明書實施例還提供一種視圖捲動裝置，如圖8所示，包括：　　接收模組801，接收視圖捲動操作，基於原生捲動組件捲動預設的捲動區域；　　標記模組802，在當所述捲動區域邊界線捲動到與可視區域邊界線對齊時，獲取預設的回彈區域的標記位置；其中，所述捲動區域邊界線基於預設的捲動區域包含的視圖內容確定的；　　回彈模組803，基於所述視圖捲動操作對所述回彈區域實現的渲染效果，根據所述回彈區域對應的所述標記位置，還原所述回彈區域；　　其中，所述捲動區域和所述回彈區域基於所述原生捲動組件預設得到。　　在本說明書的一個或者多個實施例中，所述原生捲動組件包括scroll view捲動組件；　　接收模組801，接收視圖捲動操作，基於原生捲動組件捲動預設的捲動區域，具體包括：　　接收模組801，接收視圖捲動操作對應的捲動距離，基於支援HTML5的瀏覽器攜帶的scroll view捲動組件，捲動所述預設的捲動區域；　　其中，所述捲動區域用於確定實現捲動操作的視圖範圍。　　在本說明書的一個或者多個實施例中，標記模組802，在當所述捲動區域邊界線捲動到與可視區域邊界線對齊時，獲取預設的回彈區域的標記位置，具體包括：　　基於所述預設的捲動區域包含的視圖內容，確定所述捲動區域的邊界線；　　標記模組802，在當所述捲動區域的邊界線與所述可視區域邊界線或者所述回彈區域邊界線對齊時，獲取並保存所述回彈區域的標記位置；　　其中，所述回彈區域用於確定實現回彈效果的視圖範圍。　　在本說明書的一個或者多個實施例中，所述裝置還包括渲染模組804，基於所述視圖捲動操作對所述回彈區域實現的渲染效果，具體包括：　　基於預設的渲染方式，所述渲染模組804根據所述視圖捲動操作調整所述回彈區域的位置和/或尺寸。　　在本說明書的一個或者多個實施例中，所述預設的渲染方式為預設的CSS3動畫方式；　　回彈模組803，基於所述視圖捲動操作對所述回彈區域實現的渲染效果，根據所述回彈區域對應的所述標記位置還原所述回彈區域，具體包括：　　當所述預設的渲染方式實現的效果為調整所述回彈區域的位置時，根據結束所述視圖捲動操作，或者所述回彈區域的移動距離達到預設的偏移量，所述回彈區域按照所述預設的CSS3動畫方式還原；　　當所述預設的渲染方式實現的效果為調整所述回彈區域的尺寸時，根據結束所述視圖捲動操作，或者所述回彈區域的尺寸放大倍數達到預設的放大閾值，所述回彈區域按照所述預設的CSS3動畫方式還原；　　根據所述捲動區域與所述回彈區域之間的對應關係，所述回彈區域帶動所述捲動區域還原到所述標記位置；　　其中，所述標記位置包括：所述回彈區域的原點位置、基準線位置。　　在本說明書的一個或者多個實施例中，所述裝置還包括：　　當所述捲動區域邊界線未捲動越出所述可視區域邊界線時，所述回彈區域相對於所述可視區域不發生移動，所述捲動區域相對於所述回彈區域和所述可視區域發生移動。　　根據支援HTML5的瀏覽器攜帶的原生scroll view捲動組件預設回彈區域和捲動區域；利用原生scroll view捲動組件實現視圖捲動操作，不需要依賴第三方視圖捲動組件或外掛程式對用戶的捲動操作進行攔截，可以有效提升視圖捲動的性能，具有更好的流暢捲動的體驗；進一步地，基於原生scroll view捲動組件，利用預設的CSS3動畫方式，使得回彈區域實現預設的回彈效果，可以滿足用戶使用移動終端時的視圖下拉和視圖回彈的動畫體驗。　　基於同樣的思路，本說明書實施例還提供一種電子設備，包括：　　至少一個處理器；以及，　　與所述至少一個處理器通信連接的記憶體；其中，　　所述記憶體儲存有可被所述至少一個處理器執行的指令，所述指令被所述至少一個處理器執行，以使所述至少一個處理器能夠：　　接收視圖捲動操作，基於原生捲動組件捲動預設的捲動區域；　　當所述捲動區域邊界線捲動到與可視區域邊界線對齊時，獲取預設的回彈區域的標記位置；其中，所述捲動區域邊界線基於預設的捲動區域包含的視圖內容確定的；　　基於所述視圖捲動操作對所述回彈區域實現的渲染效果，根據所述回彈區域對應的所述標記位置，還原所述回彈區域；　　其中，所述捲動區域和所述回彈區域基於所述原生捲動組件預設得到。　　上述對本說明書的特定實施例進行了描述。其它實施例在所附申請專利範圍的範圍內。在一些情況下，在申請專利範圍中記載的動作或步驟可以按照不同於實施例中的順序來執行並且仍然可以實現期望的結果。另外，在圖式中描繪的過程不一定要求示出的特定順序或者連續順序才能實現期望的結果。在某些實施方式中，多工處理和並行處理也是可以的或者可能是有利的。　　本說明書中的各個實施例均採用漸進的方式描述，各個實施例之間相同相似的部分互相參見即可，每個實施例重點說明的都是與其他實施例的不同之處。尤其，對於裝置、電子設備、非易失性電腦儲存媒體實施例而言，由於其基本相似於方法實施例，所以描述的比較簡單，相關之處參見方法實施例的部分說明即可。　　本說明書實施例提供的裝置、電子設備、非易失性電腦儲存媒體與方法是對應的，因此，裝置、電子設備、非易失性電腦儲存媒體也具有與對應方法類似的有益技術效果，由於上面已經對方法的有益技術效果進行了詳細說明，因此，這裡不再贅述對應裝置、電子設備、非易失性電腦儲存媒體的有益技術效果。　　在20世紀90年代，對於一個技術的改進可以很明顯地區分是硬體上的改進(例如，對二極體、電晶體、開關等電路結構的改進)還是軟體上的改進(對於方法流程的改進)。然而，隨著技術的發展，當今的很多方法流程的改進已經可以視為硬體電路結構的直接改進。設計人員幾乎都透過將改進的方法流程程式設計到硬體電路中來得到相應的硬體電路結構。因此，不能說一個方法流程的改進就不能用硬體實體模組來實現。例如，可程式設計邏輯裝置(Programmable Logic Device，PLD)(例如現場可程式設計閘陣列(Field Programmable Gate Array，FPGA))就是這樣一種積體電路，其邏輯功能由用戶對裝置程式設計來確定。由設計人員自行程式設計來把一個數位系統“整合”在一片PLD上，而不需要請晶片製造廠商來設計和製作專用的積體電路晶片。而且，如今，取代手工地製作積體電路晶片，這種程式設計也多半改用“邏輯編譯器(logic compiler)”軟體來實現，它與程式開發撰寫時所用的軟體編譯器相類似，而要編譯之前的原始代碼也得用特定的程式設計語言來撰寫，此稱之為硬體描述語言(Hardware Description Language，HDL)，而HDL也並非僅有一種，而是有許多種，如ABEL(Advanced Boolean Expression Language)、AHDL(Altera Hardware Description Language)、Confluence、CUPL(Cornell University Programming Language)、HDCal、JHDL(Java Hardware Description Language)、Lava、Lola、MyHDL、PALASM、RHDL(Ruby Hardware Description Language)等，目前最普遍使用的是VHDL(Very-High-Speed Integrated Circuit Hardware Description Language)與Verilog。本領域技術人員也應該清楚，只需要將方法流程用上述幾種硬體描述語言稍作邏輯程式設計並程式設計到積體電路中，就可以很容易得到實現該邏輯方法流程的硬體電路。　　控制器可以按任何適當的方式來實現，例如，控制器可以採取例如微處理器或處理器以及儲存可由該(微)處理器執行的電腦可讀程式碼(例如軟體或韌體)的電腦可讀媒體、邏輯閘、開關、專用積體電路(Application Specific Integrated Circuit，ASIC)、可程式設計邏輯控制器和嵌入微控制器的形式，控制器的例子包括但不限於以下微控制器：ARC 625D、Atmel AT91SAM、Microchip PIC18F26K20以及Silicone Labs C8051F320，記憶體控制器還可以被實現為記憶體的控制邏輯的一部分。本領域技術人員也知道，除了以純電腦可讀程式碼方式實現控制器以外，完全可以透過將方法步驟進行邏輯程式設計來使得控制器以邏輯閘、開關、專用積體電路、可程式設計邏輯控制器和嵌入微控制器等的形式來實現相同功能。因此這種控制器可以被認為是一種硬體部件，而對其內包括的用於實現各種功能的裝置也可以視為硬體部件內的結構。或者甚至，可以將用於實現各種功能的裝置視為既可以是實現方法的軟體模組又可以是硬體部件內的結構。　　上述實施例闡明的系統、裝置、模組或單元，具體可以由電腦晶片或實體實現，或者由具有某種功能的產品來實現。一種典型的實現設備為電腦。具體地，電腦例如可以為個人電腦、膝上型電腦、蜂窩電話、相機電話、智慧型電話、個人數位助理、媒體播放機、導航設備、電子郵件設備、遊戲控制台、平板電腦、可穿戴設備或者這些設備中的任何設備的組合。　　為了描述的方便，描述以上裝置時以功能分為各種單元分別描述。當然，在實施本說明書的一個或多個實施例時可以把各單元的功能在同一個或多個軟體和/或硬體中實現。　　本領域內的技術人員應明白，本說明書實施例可提供為方法、系統、或電腦程式產品。因此，本說明書實施例可採用完全硬體實施例、完全軟體實施例、或結合軟體和硬體方面的實施例的形式。而且，本說明書實施例可採用在一個或多個其中包含有電腦可用程式碼的電腦可用儲存媒體(包括但不限於磁碟記憶體、CD-ROM、光學記憶體等)上實施的電腦程式產品的形式。　　本說明書是參照根據本說明書實施例的方法、設備(系統)、和電腦程式產品的流程圖和/或方塊圖來描述的。應理解可由電腦程式指令實現流程圖和/或方塊圖中的每一流程和/或方塊、以及流程圖和/或方塊圖中的流程和/或方塊的結合。可提供這些電腦程式指令到通用電腦、專用電腦、嵌入式處理機或其他可程式設計資料處理設備的處理器以產生一個機器，使得透過電腦或其他可程式設計資料處理設備的處理器執行的指令產生用於實現在流程圖一個流程或多個流程和/或方塊圖一個方塊或多個方塊中指定的功能的裝置。　　這些電腦程式指令也可儲存在能引導電腦或其他可程式設計資料處理設備以特定方式工作的電腦可讀記憶體中，使得儲存在該電腦可讀記憶體中的指令產生包括指令裝置的製造品，該指令裝置實現在流程圖一個流程或多個流程和/或方塊圖一個方塊或多個方塊中指定的功能。　　這些電腦程式指令也可裝載到電腦或其他可程式設計資料處理設備上，使得在電腦或其他可程式設計設備上執行一系列操作步驟以產生電腦實現的處理，從而在電腦或其他可程式設計設備上執行的指令提供用於實現在流程圖一個流程或多個流程和/或方塊圖一個方框或多個方框中指定的功能的步驟。　　在一個典型的配置中，計算設備包括一個或多個處理器(CPU)、輸入/輸出介面、網路介面和記憶體。　　記憶體可能包括電腦可讀媒體中的非永久性記憶體，隨機存取記憶體(RAM)和/或非易失性記憶體等形式，如唯讀記憶體(ROM)或快閃記憶體(flash RAM)。記憶體是電腦可讀媒體的示例。　　電腦可讀媒體包括永久性和非永久性、可移動和非可移動媒體可以由任何方法或技術來實現資訊儲存。資訊可以是電腦可讀指令、資料結構、程式的模組或其他資料。電腦的儲存媒體的例子包括，但不限於相變記憶體(PRAM)、靜態隨機存取記憶體(SRAM)、動態隨機存取記憶體(DRAM)、其他類型的隨機存取記憶體(RAM)、唯讀記憶體(ROM)、電可擦除可程式設計唯讀記憶體(EEPROM)、快閃記憶體或其他記憶體技術、唯讀光碟唯讀記憶體(CD-ROM)、數位多功能光碟(DVD)或其他光學儲存、磁盒式磁帶，磁帶磁磁片儲存或其他磁性儲存設備或任何其他非傳輸媒體，可用於儲存可以被計算設備訪問的資訊。按照本文中的界定，電腦可讀媒體不包括暫態電腦可讀媒體(transitory media)，如調變的資料信號和載波。　　還需要說明的是，術語“包括”、“包含”或者其任何其他變體意在涵蓋非排他性的包含，從而使得包括一系列要素的過程、方法、商品或者設備不僅包括那些要素，而且還包括沒有明確列出的其他要素，或者是還包括為這種過程、方法、商品或者設備所固有的要素。在沒有更多限制的情況下，由語句“包括一個……”限定的要素，並不排除在包括所述要素的過程、方法、商品或者設備中還存在另外的相同要素。　　本說明書可以在由電腦執行的電腦可執行指令的一般上下文中描述，例如程式模組。一般地，程式模組包括執行特定任務或實現特定抽象資料類型的常式、程式、物件、元件、資料結構等等。也可以在分散式運算環境中實踐說明書，在這些分散式運算環境中，由透過通訊網路而被連接的遠端處理設備來執行任務。在分散式運算環境中，程式模組可以位於包括儲存設備在內的本地和遠端電腦儲存媒體中。　　本說明書中的各個實施例均採用漸進的方式來描述，各個實施例之間相同相似的部分互相參見即可，每個實施例重點說明的都是與其他實施例的不同之處。尤其，對於系統實施例而言，由於其基本相似於方法實施例，所以描述的比較簡單，相關之處參見方法實施例的部分說明即可。　　以上所述僅為本說明書實施例而已，並不用於限制本發明。對於本領域技術人員來說，本發明可以有各種更改和變化。凡在本發明的精神和原理之內所作的任何修改、等同替換、改進等，均應包含在本發明的申請專利範圍之內。

S202‧‧‧方法步驟

S204‧‧‧方法步驟

S206‧‧‧方法步驟

801‧‧‧接收模組

802‧‧‧標記模組

803‧‧‧回彈模組

804‧‧‧渲染模組

為了更清楚地說明本說明書實施例或現有技術中的技術方案，下面將對實施例或現有技術描述中所需要使用的圖式作簡單地介紹，顯而易見地，下面描述中的圖式僅僅是本說明書中記載的一些實施例，對於本領域普通技術人員來講，在不付出創造性勞動性的前提下，還可以根據這些圖式獲得其他的圖式。　　圖1為本說明書的方案在一種實際應用情況下涉及的顯示介面佈局示意圖；　　圖2為本說明書實施例提供的一種視圖捲動方法的流程示意圖；　　圖3a、3b為本說明書實施例提供的一種移動終端應用情況的示意圖；　　圖4為本說明書實施例提供的一種頂部邊界線對齊的示意圖；　　圖5為本說明書實施例提供的一種頂部邊界線下拉的示意圖；　　圖6為本說明書實施例提供的一種底部邊界線對齊的示意圖；　　圖7為本說明書實施例提供的一種底部邊界線下拉的示意圖；　　圖8為本說明書實施例提供的一種視圖捲動裝置的結構示意圖。

Claims

一種視圖捲動方法，包括：　　接收視圖捲動操作，基於原生捲動組件捲動預設的捲動區域；　　當該捲動區域邊界線捲動到與可視區域邊界線對齊時，獲取預設的回彈區域的標記位置；其中，該捲動區域邊界線基於預設的捲動區域包含的視圖內容確定的；以及　　基於該視圖捲動操作對該回彈區域實現的渲染效果，根據該回彈區域對應的該標記位置，還原該回彈區域，　　其中，該捲動區域和該回彈區域基於該原生捲動組件預設得到。
如申請專利範圍第1項所述的方法，該原生捲動組件包括捲動視圖捲動組件；　　接收視圖捲動操作，基於原生捲動組件捲動預設的捲動區域，具體包括：　　接收視圖捲動操作對應的捲動距離，基於支援HTML5的瀏覽器攜帶的捲動視圖捲動組件，捲動該預設的捲動區域，　　其中，該捲動區域用於確定實現捲動操作的視圖範圍。
如申請專利範圍第1項所述的方法，當該捲動區域邊界線捲動到與可視區域邊界線對齊時，獲取預設的回彈區域的標記位置，具體包括：　　基於該預設的捲動區域包含的視圖內容，確定該捲動區域的邊界線；以及　　當該捲動區域的邊界線與該可視區域邊界線或者該回彈區域邊界線對齊時，獲取並保存該回彈區域的標記位置，　　其中，該回彈區域用於確定實現回彈效果的視圖範圍。
如申請專利範圍第1項所述的方法，基於該視圖捲動操作對該回彈區域實現的渲染效果，具體包括：　　基於預設的渲染方式，根據該視圖捲動操作調整該回彈區域的位置和/或尺寸。
如申請專利範圍第4項所述的方法，該預設的渲染方式為預設的CSS3動畫方式；　　基於該視圖捲動操作對該回彈區域實現的渲染效果，根據該回彈區域對應的該標記位置還原該回彈區域，具體包括：　　當該預設的渲染方式實現的效果為調整該回彈區域的位置時，根據結束該視圖捲動操作，或者該回彈區域的移動距離達到預設的偏移量，該回彈區域按照該預設的CSS3動畫方式還原；　　當該預設的渲染方式實現的效果為調整該回彈區域的尺寸時，根據結束該視圖捲動操作，或者該回彈區域的尺寸放大倍數達到預設的放大閾值，該回彈區域按照該預設的CSS3動畫方式還原；以及　　根據該捲動區域與該回彈區域之間的對應關係，該回彈區域帶動該捲動區域還原到該標記位置，　　其中，該標記位置包括：該回彈區域的原點位置、基準線位置。
如申請專利範圍第3項所述的方法，該方法還包括：　　當該捲動區域邊界線未捲動越出該可視區域邊界線時，該回彈區域相對於該可視區域不發生移動，該捲動區域相對於該回彈區域和該可視區域發生移動。
一種視圖捲動裝置，包括：　　接收模組，接收視圖捲動操作，基於原生捲動組件捲動預設的捲動區域；　　標記模組，在當該捲動區域邊界線捲動到與可視區域邊界線對齊時，獲取預設的回彈區域的標記位置；其中，該捲動區域邊界線基於預設的捲動區域包含的視圖內容確定的；以及　　回彈模組，基於該視圖捲動操作對該回彈區域實現的渲染效果，根據該回彈區域對應的該標記位置，還原該回彈區域，　　其中，該捲動區域和該回彈區域基於該原生捲動組件預設得到。
如申請專利範圍第7項所述的裝置，該原生捲動組件包括捲動視圖捲動組件；　　接收模組，接收視圖捲動操作，基於原生捲動組件捲動預設的捲動區域，具體包括：　　接收模組，接收視圖捲動操作對應的捲動距離，基於支援HTML5的瀏覽器攜帶的捲動視圖捲動組件，捲動該預設的捲動區域，其中，該捲動區域用於確定實現捲動操作的視圖範圍。
如申請專利範圍第7項所述的裝置，該標記模組，在當該捲動區域邊界線捲動到與可視區域邊界線對齊時，獲取預設的回彈區域的標記位置，具體包括：　　基於該預設的捲動區域包含的視圖內容，確定該捲動區域的邊界線；以及　　該標記模組，在當該捲動區域的邊界線與該可視區域邊界線或者該回彈區域邊界線對齊時，該標記模組獲取並保存該回彈區域的標記位置，　　其中，該回彈區域用於確定實現回彈效果的視圖範圍。
如申請專利範圍第7項所述的裝置，該裝置還包括渲染模組，基於該視圖捲動操作對該回彈區域實現的渲染效果，具體包括：　　基於預設的渲染方式，該渲染模組根據該視圖捲動操作調整該回彈區域的位置和/或尺寸。
如申請專利範圍第10項所述的裝置，該預設的渲染方式為預設的CSS3動畫方式；　　回彈模組，基於該視圖捲動操作對該回彈區域實現的渲染效果，根據該回彈區域對應的該標記位置還原該回彈區域，具體包括：　　當該預設的渲染方式實現的效果為調整該回彈區域的位置時，該回彈模組，根據結束該視圖捲動操作，或者該回彈區域的移動距離達到預設的偏移量，該回彈區域按照該預設的CSS3動畫方式還原；　　當該預設的渲染方式實現的效果為調整該回彈區域的尺寸時，該回彈模組，根據結束該視圖捲動操作，或者該回彈區域的尺寸放大倍數達到預設的放大閾值，該回彈區域按照該預設的CSS3動畫方式還原；以及　　根據該捲動區域與該回彈區域之間的對應關係，該回彈區域帶動該捲動區域還原到該標記位置，　　其中，該標記位置包括：該回彈區域的原點位置、基準線位置。
如申請專利範圍第9項所述的裝置，該裝置還包括：　　當該捲動區域邊界線未捲動越出該可視區域邊界線時，該回彈區域相對於該可視區域不發生移動，該捲動區域相對於該回彈區域和該可視區域發生移動。
一種電子設備，包括：　　至少一個處理器；以及　　與該至少一個處理器通訊連接的記憶體，其中，　　該記憶體儲存有可被該至少一個處理器執行的指令，該指令被該至少一個處理器執行，以使該至少一個處理器能夠：　　接收視圖捲動操作，基於原生捲動組件捲動預設的捲動區域；　　當該捲動區域邊界線捲動到與可視區域邊界線對齊時，獲取預設的回彈區域的標記位置；其中，該捲動區域邊界線基於預設的捲動區域包含的視圖內容確定的；以及　　基於該視圖捲動操作對該回彈區域實現的渲染效果，根據該回彈區域對應的該標記位置，還原該回彈區域，　　其中，該捲動區域和該回彈區域基於該原生捲動組件預設得到。