mescroll和angularjs結(jié)合實(shí)現(xiàn)列表上拉刷新以及下拉加載以及搜索

image.png
//這段代碼表示獲取數(shù)據(jù) isUp為true表示上拉刷新 false表示下拉加載    
$scope.loadGasCompany = function(page, isUp){mui.ajax(ipPort + '/dc/queryData/load/gasCompany.do?', {
                data: {
                    pageSize: page.size,
                    pageNumber: page.num
                },
                dataType: 'json',
                type: 'post',
                async: false,
                contentType: "application/x-www-form-urlencoded; charset=utf-8",
                timeout: 30000, //超時(shí)時(shí)間設(shè)置為10秒;
                success: function(data) {
                    debugger;
                    //                  $(".loader-inner").hide();
                    if(page.num != 1) {
                        mescroll.endBySize(data.length, data[0].total);
                        $scope.gasCompanydatas = $scope.gasCompanydatas.concat(data);
                        $scope.$apply();} else {
                        mescroll.endSuccess();
                        mescroll.endBySize(data.length, data[0].total);
                        $scope.gasCompanydatas = data;
                        $scope.$apply();
                    }
                    
                    //$scope.waterCompanydatas.push(data);
                    console.log($scope.gasCompanydatas);
                    $scope.$apply();
                },
                error: function(xhr, type, errorThrown) {
                    //debugger;
                    $(".loader-inner").hide();
                    //異常處理;
                    console.log(type);
                }
            });
        }

           ````
     ````
//mescroll的配置
    var mescroll = new MeScroll("mescroll", {
            down: {
                auto: false,
                callback: downCallback
            },
            up: {
                page:{
                     num : 0,
                     size : 20, 
                     time : null 
                },
                auto: true,
                callback:upCallback,
                isBounce: true 
            }
        });
function downCallback(page){
            mescroll.resetUpScroll();
            //$scope.loadGasCompany({num:1,size:20}, false);
            mescroll.endSuccess();
        }
        
        
        function upCallback(page){
            debugger;
            //$scope.page.pageNumber++;
            $scope.loadGasCompany(page, false);
            $scope.$apply();
        }
     ````
//獲取全部數(shù)據(jù) 為了能夠頂部篩選用
$scope.loadAllData = function() {
            mui.ajax(ipPort + '/dc/queryData/load/gasCompany.do?', {
                data: {
                    pageSize: 0,
                    pageNumber: 0
                },
                dataType: 'json',
                type: 'post',
                contentType: "application/x-www-form-urlencoded; charset=utf-8",
                timeout: 30000, //超時(shí)時(shí)間設(shè)置為10秒;
                success: function(data) {
                    debugger;
                    $scope.totalData = data;
                    $scope.$watch('searchInput', function(n, o) {
                        if(n != ""){
                            $scope.gasCompanydatas = [];
                            for(var i = 0; i < $scope.totalData.length; i++) {
                            if($scope.totalData[i].companyName.indexOf(n) >= 0) {
                                $scope.gasCompanydatas.push($scope.totalData[i]);
                            }
                        }
                        }
                        
                    }, false);
                },
                error: function(xhr, type, errorThrown) {
                    //debugger;
                    $(".loader-inner").hide();
                    //異常處理;
                    console.log(type);
                }
            });
        }
        $scope.loadAllData();

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容