在實際案例中我們經(jīng)常需要展示一些數(shù)據(jù)螟碎,而這些數(shù)據(jù)都是存放在后臺的數(shù)據(jù)庫之中的而且可能數(shù)量龐大,在前臺的界面中一下子全都展示出來肯定是不現(xiàn)實的芥玉,另外一次性讓后臺傳輸如此多的數(shù)據(jù)到前臺也會有很大的延遲曙搬,使用戶體驗較差好港。因此辞色,我們就需要采取一種分頁的方式來少量多次的獲取數(shù)據(jù)骨宠,這樣用戶每次操作之后都能很快得到反饋,同時前臺也不用存放很多數(shù)據(jù)造成案例卡頓相满,今天就來說說如何實現(xiàn)這種分頁效果层亿。
1.組件結構
Demo中的結構比較簡單,頁面下放置了一個列作為案例主體雳灵,列內(nèi)添加了一個分頁組件棕所,還有一個for容器用于循環(huán)創(chuàng)建每頁顯示的圖片闸盔,而循環(huán)創(chuàng)建的數(shù)據(jù)來源就是對象數(shù)組分頁數(shù)據(jù)悯辙。
2.分頁組件
分頁組件是ivx中的一個拓展組件,主要應用場景就是分頁顯示數(shù)據(jù)啦迎吵,當然我們也可以使用各個基礎功能去做一個自定義樣式的分頁模塊躲撰。不過今天就只介紹一下分頁組件的屬性和用法。
數(shù)據(jù)總條數(shù)和每頁數(shù)據(jù)條數(shù)可以算出分頁組件一個有多少個分頁击费,demo中這里已經(jīng)設置了一共10條數(shù)據(jù)并且每頁顯示3張圖片拢蛋。顯示按鈕數(shù)量對應的是中間有幾個頁號按鈕。
當顯示的是第一頁時蔫巩,首頁和上一頁的按鈕會隱藏谆棱,同理,在顯示最后一頁時下一頁和尾頁也會隱藏圆仔。
如果開啟精簡模式首頁贡翘,尾頁雪隧,上一頁和下一頁的按鈕就都會隱藏掉。
3實現(xiàn)分頁獲取數(shù)據(jù)的邏輯
首先是前臺初始化的時候,先調(diào)用了輸出分頁數(shù)據(jù)服務再芋,并且調(diào)用的時候傳給服務的page參數(shù)等于1。而服務中讓數(shù)據(jù)庫輸出的行數(shù)是從(page-1)*3+1到page*3,代入page=1,經(jīng)過計算即1到3行嫌松。
所以,打開案例后直接呈現(xiàn)效果的如下圖所示奕污。
這里也說一下這兩個動作吧萎羔,他們的作用就是在服務返回數(shù)據(jù)庫的輸出結果前顯示一個這樣的加載框,當前臺拿到服務的返回結果就讓加載框隱藏碳默。如果想讓案例更完美這樣的小細節(jié)也是必不可少的外驱。
然后就是案例運行中我們選擇了某一個頁面后,依舊是調(diào)用輸出分頁數(shù)據(jù)服務腻窒,并設置page參數(shù)等于分頁組件的“當前頁碼”昵宇,這個變量是在分頁組件的“當前頁改變”事件下拋出的。儿子。比如我們點擊了頁號2瓦哎,“當前頁碼”等于2,即服務中page=2柔逼,數(shù)據(jù)庫依舊按公式輸出(page-1)*3+1到page*3行蒋譬,代入計算可得是第4到第6行,按照我們對數(shù)據(jù)庫三行算一頁的劃分這正好是第二頁的數(shù)據(jù)愉适。我們把這三行數(shù)據(jù)傳給前臺的分頁數(shù)據(jù)對象數(shù)組犯助,for循環(huán)容器就按照這三行數(shù)據(jù)創(chuàng)建出三個圖片組件顯示出來。
4.動態(tài)頁號
在這個demo中分頁組件已經(jīng)設置好了一共10條數(shù)據(jù)维咸,然后每頁數(shù)據(jù)條數(shù)為3剂买,則一共會有4個分頁,但是在實際案例中數(shù)據(jù)庫中的數(shù)據(jù)可能會隨著案例運行增加或者減少癌蓖,我們很難預先知道實際的數(shù)據(jù)總條數(shù)是多少瞬哼。另外,雖然服務中有統(tǒng)計數(shù)據(jù)庫數(shù)目的功能租副,但是數(shù)據(jù)量龐大的話我們也不可能每一次都去統(tǒng)計數(shù)據(jù)庫的數(shù)據(jù)總量坐慰,這是很耗費時間和設備資源的。所以下面就來說說如何實現(xiàn)動態(tài)頁號用僧。
當前结胀,列表數(shù)據(jù)數(shù)據(jù)庫中有16條數(shù)據(jù),這里不要看最后一條數(shù)據(jù)的數(shù)據(jù)ID是16就判定有16條數(shù)據(jù)责循,每條數(shù)據(jù)ID都是唯一的糟港,你把數(shù)據(jù)ID為1的數(shù)據(jù)刪除再添加一條新的數(shù)據(jù),新的數(shù)據(jù)的ID會是2沼死,所以實際數(shù)目其實小于等于最后一行數(shù)據(jù)的ID着逐。
在后臺再添加一個數(shù)據(jù)庫并給它添加一個字段數(shù)據(jù)總量,然后在第一行數(shù)據(jù)的該字段下輸入16,點擊保存耸别。
在后臺添加一個對象數(shù)組和數(shù)值變量健芭,先將分頁數(shù)據(jù)輸出后保存到對象數(shù)組中,然后獲取到數(shù)據(jù)庫中存放的數(shù)據(jù)總量秀姐,最后一起作為服務的返回參數(shù)慈迈。
找到前臺調(diào)用輸出分頁數(shù)據(jù)服務的兩個地方,在回調(diào)里將分頁組件的數(shù)據(jù)總量屬性的值設置為服務返回的結果省有。
最后要保證的就是數(shù)據(jù)總量數(shù)據(jù)庫中存放的值一直是等于列表數(shù)據(jù)中的數(shù)據(jù)總條數(shù)的痒留。如果列表數(shù)據(jù)數(shù)據(jù)庫中的數(shù)據(jù)條數(shù)是變化的,那么就會有提交數(shù)據(jù)和刪除數(shù)據(jù)的兩個服務,蠢沿。在提交服務中伸头,提交后我們就要將數(shù)據(jù)總量數(shù)據(jù)庫中的數(shù)據(jù)總量加1,在刪除服務中舷蟀,刪除數(shù)據(jù)后我們就將其減1恤磷,也就是加(-1)。(總之就是所有對列表數(shù)據(jù)有增刪時都要知會數(shù)據(jù)總量數(shù)據(jù)庫一聲兒啦)
總結
分頁獲取數(shù)據(jù)實現(xiàn)的難點一個在于動態(tài)野宜,這取決于案例中各部分邏輯的計算公式的設計扫步,一個在于對邊界的處理,必須考慮到各種情況匈子。這要求我們在制作案例時必須要邏輯縝密河胎,考慮全面,只有開發(fā)者把案例使用的全部狀況都考慮清楚才能確保用戶在使用時不會出現(xiàn)各種“意料之外的狀況”虎敦,這一直(還將永遠游岳?)都是開發(fā)者們所努力的方向吧。