在項(xiàng)目中,要使用ion-list 類似Android 中的ListView 組件.當(dāng)然也要實(shí)現(xiàn)下拉刷新和,上拉加載更多.
首先來(lái)看看布局
在外部使用的是ion-content
因?yàn)槭褂胕on-refresher (下拉刷新)和ion-infinite-scroll (加載更多)
需要把把以上控件都包裹在ion-content ,否則會(huì)出現(xiàn)問(wèn)題
再來(lái)看看對(duì)應(yīng)的JS
首先,需要定義上拉刷新和下拉加載的回調(diào)函數(shù)
在回調(diào)函數(shù)里面進(jìn)行網(wǎng)絡(luò)請(qǐng)求,數(shù)據(jù)重新載入之后需要
一定要執(zhí)行以下兩個(gè)函數(shù),通知組件停止加載動(dòng)畫
加載更多完成執(zhí)行: $scope.$broadcast('scroll.infiniteScrollComplete');
下拉刷新完成執(zhí)行:
$scope.$broadcast('scroll.refreshComplete');
使用過(guò)程大概就這樣,但是在其中遇到了2個(gè)問(wèn)題.
1.頁(yè)面數(shù)據(jù)空白,無(wú)法顯示任何數(shù)據(jù),經(jīng)過(guò)調(diào)試,數(shù)據(jù)是正確的
問(wèn)題原因是ion-content 里面除了 以上三個(gè)組件,不要添加任何div ,div 如果有css 會(huì)影響到ion-content內(nèi)部的css 布局等
2.列表中的第一個(gè)Item 部分區(qū)域被遮擋,無(wú)法顯示
開始猜測(cè)是ion-refresher 的放置區(qū)域有問(wèn)題,換了放置的位置,也試著加了很多屬性經(jīng)過(guò)調(diào)試也不行
開始的時(shí)候,只能在手機(jī)調(diào)試,因?yàn)閿?shù)據(jù)是從Native 過(guò)來(lái),沒(méi)辦法,把數(shù)據(jù)復(fù)制出來(lái)
在JS 加載完成的時(shí)候,自動(dòng)賦值上去,這樣就可以在Chrome調(diào)試了.使用Chrome 調(diào)試工具發(fā)現(xiàn)ion-content 的css 布局如下
如圖所示,布局是absolute的,top0,絕對(duì)定位,找到問(wèn)題所在了
在ion-content 加一個(gè)Marin 解決問(wèn)題
3.加載更多之后會(huì)出現(xiàn)一個(gè)空白的ITEM
開始以為是使用控件不規(guī)范造成的,然后調(diào)試數(shù)據(jù)
這里第一頁(yè)數(shù)據(jù)是10條,按照每頁(yè)10條數(shù)據(jù)的情況來(lái)說(shuō),還可以上拉加載更多
這里執(zhí)行了上拉加載更多,但是這里后臺(tái)返回的數(shù)據(jù)是[ ],就是沒(méi)有數(shù)據(jù)了.
我這里使用的是JavaScript的push 方法?難道又是push 的問(wèn)題
經(jīng)過(guò)調(diào)試,getRealData(result.DATA.dataList)返回的是一個(gè)空數(shù)組,就是[]
寫個(gè)demo 試試,
var array=[1,2,3,4];
array.push([]);
console.log(array);
結(jié)果是1,2,3,4,
意思就是4后面有個(gè)空
馬上把push換成concat 再打印
結(jié)果是1,2,3,4
........真是坑,已經(jīng)在Push 函數(shù)上面遇到過(guò)兩次坑了.
最后把push 換成 concat ,問(wèn)題解決
