怎樣給移動(dòng)APP頁面添加商品滾動(dòng)刷新功能？

更新時(shí)間:2022-04-13 來源:黑馬程序員瀏覽量:

滾動(dòng)刷新在移動(dòng)App中的應(yīng)用十分廣泛，例如實(shí)現(xiàn)商品列表時(shí)，由于移動(dòng)App頁面大小有限，不能一次性將所有商品全部展示，這時(shí)，如果想瀏覽更多商品，可以通過滾動(dòng)刷新的方式來加載數(shù)據(jù)，當(dāng)沒有更多商品時(shí)，對(duì)用戶做出提示沒有更多商品。

ionic中提供了ion-infinite-scroll指令用于滾動(dòng)刷新功能，該功能適用于瀑布流式(無限數(shù)據(jù)查詢)頁面，示例代碼如下所示。

<ion-infinite-scrollon-infinite="loadMore()" distance="1%">
    ...
</ion-infinite-scroll>

使用ion-infinite-scroll指令時(shí)，當(dāng)容器滾動(dòng)到或接近頁面底部會(huì)觸發(fā)獲取數(shù)據(jù)的事件on-infinite，事件處理函數(shù)完成新內(nèi)容數(shù)據(jù)的加載后，需要調(diào)用scroll.infiniteScrollComplete事件廣播來通知頁面更新滾動(dòng)視圖，該事件的功能類似于在AngularJS中$scope.$apply()臟數(shù)據(jù)檢查，作用是通知頁面中所有組件數(shù)據(jù)已經(jīng)加載完成，可以更新到頁面。

ion-infinite-scroll指令組件中提供的屬性和事件如表10-4所示。

接下來通過一個(gè)案例來演示ion-infinite-scroll的使用方法，如demo10-4.html所示。

demo10-4.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
            <metaname="viewport" content="initial-scale=1,   maximum-scale=1, user-scalable=no, width=device-width">
                <title>
                    滾動(dòng)刷新:ion-infinite-scroll
                </title>
                <link href="lib/ionic/css/ionic.css" rel="stylesheet">
                    <script src="lib/ionic/js/ionic.bundle.min.js">
                    </script>
                </link>
            </metaname="viewport">
        </meta>
    </head>
    <body ng-app="starter">
        <ion-header-bar class="bar-positive">
            <h4>
                這里是頭部
            </h4>
        </ion-header-bar>
        <ion-content ng-controller="myCtrl">
            <ul class="list">
                <li class="item" ng-repeat="item in items">
                    {{item}}
                </li>
                <li class="item" ng-if="!moreDataCanBeLoaded()">
                    沒有更多數(shù)據(jù)嘍
                </li>
            </ul>
            <ion-infinite-scroll distance="1%" ng-if="moreDataCanBeLoaded()" on-infinite="loadMore()">
            </ion-infinite-scroll>
        </ion-content>
        <ion-footer-bar class="bar-positive">
            <h4>
                這里是底部
            </h4>
        </ion-footer-bar>
    </body>
    <script>
        //定義控制器
angular.module("starter",["ionic"]).controller("myCtrl",function($scope,$timeout){
//初始化加載更多數(shù)據(jù)的次數(shù)
$scope.loadTimes=1;
//定義判斷是否可以加載更多數(shù)據(jù)的函數(shù)33$scope.moreDataCanBeLoaded=function(){
return $scope.loadTimes>0;
}
//初始化數(shù)據(jù)
$scope.items=[];
for(var i=1;i<=20;i++){
$scope.items.push("第"+i+"條數(shù)據(jù)");
}
//頁面滾動(dòng)到底部需要調(diào)用的方法
$scope.loadMore = function() {
//定義定時(shí)器，延時(shí)加載可以看到加載圖標(biāo)效果
$timeout(function () {
$scope.loadTimes=$scope.loadTimes-1;
//加載完畢通知容器更新滾動(dòng)視圖（收起圖標(biāo)）
$scope.$broadcast('scroll.infiniteScrollComplete');
}, 1000);
}
});
    </script>
</html>

上述代碼中，使用模擬延時(shí)加載數(shù)據(jù)的效果，來演示ion-infinite-scroll組件的使用方法，ion-infinite-scroll組件必須嵌套在ion-content中。

第31行定義的loadTimes屬性代表加載次數(shù)，第37~40行用于定義初始化數(shù)據(jù)。本案例定義了20條數(shù)據(jù)，共加載兩次，每次加載10條數(shù)據(jù)。

第42行定義loadMore()函數(shù)，在第19行為該函數(shù)綁定on-infinite事件，當(dāng)頁面滾動(dòng)到底部時(shí)，調(diào)用loadMore()函數(shù)，在loadMore()函數(shù)中添加定時(shí)器是為了實(shí)現(xiàn)延時(shí)加載，看到加載圖標(biāo)的效果。

使用Chrome瀏覽器訪問demo10-4.html，頁面默認(rèn)加載了10條數(shù)據(jù)如圖10-6所示。