首先下拉刷新的代码是这样的，标红的地方为关键代码
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>菜鸟教程(runoob.com)</title> <link href="http://www.runoob.com/static/ionic/css/ionic.min.css" rel="stylesheet"> <script src="http://www.runoob.com/static/ionic/js/ionic.bundle.min.js"></script> <script type="text/javascript"> angular.module('starter', ['ionic']) .run(function($ionicPlatform) { $ionicPlatform.ready(function() { // Hide the accessory bar by default (remove this to show the accessory bar above the keyboard // for form inputs) if(window.cordova && window.cordova.plugins.Keyboard) { cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true); } if(window.StatusBar) { StatusBar.styleDefault(); } }); }) .controller( 'actionsheetCtl',['$scope','$timeout' ,'$http',function($scope,$timeout,$http){ $scope.items=[ { "name":"HTML5" }, { "name":"JavaScript" }, { "name":"Css3" } ]; $scope.doRefresh = function() { $http.get('http://www.runoob.com/try/demo_source/item.json') //注意改为自己本站的地址，不然会有跨域问题 .success(function(newItems) { $scope.items = newItems; }) .finally(function() { $scope.$broadcast('scroll.refreshComplete'); }); }; }]) </script> </head> <body ng-app="starter" ng-controller="actionsheetCtl" > <ion-pane> <ion-content > <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher> <ion-list> <ion-item ng-repeat="item in items" ng-bind="item.name"></ion-item> </ion-list> </ion-content> </ion-pane> </body> </html>
默认打开页面是这样的
/****************页面载入方法************************/ $http.get(findUrl+'?class=goods&name='+name+'&page=1') //注意改为自己本站的地址，不然会有跨域问题 .success(function(newItems) { $scope.items = newItems.content; }) .finally(function() { $scope.$broadcast('scroll.refreshComplete'); });
<ion-list> <div class="content ionic-pseudo card" ng-repeat="item in items" >
上拉加载更多可以模仿下拉刷新写
首先在</ion-list>下及</ion-content>上（不一定非得是</ion-list>，这里是放在列表最下方的意思）上放置代码
。。。。。 </ion-list> <ion-infinite-scroll ng-if="!noMorePage" immediate-check="false" on-infinite="loadMore()" distance="1%" ></ion-infinite-scroll> </ion-content> </body> </html>
immediate-check="false"是实验了很多次后来加上的，具体见：http://feifei.im/archives/276
然后是js代码部分
$scope.currentPage=1;//定义下拉加载分页的初始值 $scope.loadMore=function(){ var start = $scope.start; var goods = $scope.goods; var now_city = $scope.now_city; $scope.currentPage += 1;//每当滚动到底部，页码累计加1 $http.get(findUrl+'?class=goods&start='+start+'&goods='+goods+'&now_city='+now_city+'&page='+$scope.currentPage) //注意改为自己本站的地址，不然会有跨域问题 .success(function(newItems) { for (var i=0;i<newItems.content.length;i++){//newItems.content.length，当前json的数量 $scope.items.push(newItems.content[i]);//一个一个取出来，推送到原来的items里 } if (newItems.content.length < 10) {//当json的数量小于10（已经确定了一页为10条数据），说明页面到底了 $scope.noMorePage=true;//禁止滚动触发时间 } $scope.$broadcast('scroll.infiniteScrollComplete'); }) };
$scope.currentPage这个值会一直跑，一直累计加1，当你刷新页面后，这就会是个bug，所以，在下拉刷新代码里添加了
$scope.currentPage=1; $scope.noMorePage=false;
还原代码
<html > <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>app</title> <link href="css/ionic.min.css" rel="stylesheet"> <script src="js/ionic.bundle.min.js"></script> <script src="js/config.js"></script> <script type="text/javascript"> var app = angular.module( 'starter', ['ionic'] ).config( [ '$compileProvider', function( $compileProvider ) { $compileProvider.aHrefSanitizationWhitelist(/^s*(https?|ftp|mailto|tel|file|sms):/); // Angular before v1.2 uses $compileProvider.urlSanitizationWhitelist(...) }]) .controller( 'actionsheetCtl',['$scope','$location','$timeout' ,'$http',function($scope,$location,$timeout,$http){ //$scope.PageIndex = 1; $scope.currentPage=1; //$scope.noMorePage=false; $scope.domain = url; var name = $location.search().name; /****************页面载入方法************************/ $http.get(findUrl+'?class=goods&name='+name+'&page=1') //注意改为自己本站的地址，不然会有跨域问题 .success(function(newItems) { $scope.items = newItems.content; }) .finally(function() { $scope.$broadcast('scroll.refreshComplete'); }); /****************刷新方法************************/ $scope.doRefresh = function() { //alert($scope.currentPage); $scope.currentPage=1; $scope.noMorePage=false; //console.log($scope.PageIndex); var start = $scope.start; var goods = $scope.goods; var now_city = $scope.now_city; $http.get(findUrl+'?class=goods&start='+start+'&goods='+goods+'&now_city='+now_city+'&name='+name+'&page=1') //注意改为自己本站的地址，不然会有跨域问题 .success(function(newItems) { $scope.items = newItems.content; }) .finally(function() { $scope.$broadcast('scroll.refreshComplete'); }); }; /* function a(){ var i = 2; function b(){ //alert(i++); var page = i++; return page; } return b; } var c = a(); */ /****************加载方法************************/ $scope.loadMore=function(){ var start = $scope.start; var goods = $scope.goods; var now_city = $scope.now_city; //var p = c(); //$scope.PageIndex++; $scope.currentPage += 1; //console.log($scope.currentPage); $http.get(findUrl+'?class=goods&start='+start+'&goods='+goods+'&now_city='+now_city+'&page='+$scope.currentPage) //注意改为自己本站的地址，不然会有跨域问题 .success(function(newItems) { //$scope.items.push(newItems.content); //console.log($scope.items); //var objs =[{a:1},{a:2}]; //angular.forEach(newItems.content, function(data,index,array){ //data等价于array[index] console.log(newItems.content.length); for (var i=0;i<newItems.content.length;i++) { $scope.items.push(newItems.content[i]); } if (newItems.content.length < 10) { $scope.noMorePage=true; } //}); $scope.$broadcast('scroll.infiniteScrollComplete'); }) //$scope.havaMore=false; }; }]) </script> <style> body,input,h2{ font-family:Microsoft YaHei; } .icon{ color: #808080; list-style-type: none; font-size: 2em; } .price{ border-radius: 5px; background: red; color: white; font-size: 0.9em; padding-top:0.2em; } a{ text-decoration:none; color:black; } </style> </head> <body ng-app="starter" > <ion-content ng-controller="actionsheetCtl" > <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher> <div class="row"> <div class="col col-25"> <div class="col-demo"> <div class="item item-input "> <input type="text" placeholder="地址" ng-model="start"> </div> </div> </div> <!-- <div class="col col-10"> <center><li class="ion-arrow-swap icon" style="margin-top: 40%;" ></li></center> </div>--> <div class="col col-25"> <div class="col-demo"> <div class="item item-input "> <input type="text" placeholder="产品" ng-model="goods" > </div> </div> </div> <div class="col col-30"> <label class="item item-input item-select"> <div class="input-label"> 种类 </div> <select ng-model="now_city"> <option value ="">全部</option> <option value ="蔬菜">蔬菜</option> <option value ="果品">果品</option> <option value="粮油">粮油</option> <option value="水产品">水产品</option> <option value="畜产品">畜产品</option> </select> </label> </div> <button class="ion-search icon button button-icon" ng-click="doRefresh()"></button> </div> <ion-list> <div class="content ionic-pseudo card" ng-repeat="item in items" > <div class="list list-inset"> <div class="item item-thumbnail-left"> <img src="{{domain}}/upload/{{item.pic}}.png"> <div class="row"> <div class="col"> <h2>{{item.goods}}</h2></div> <div class="col"> <div class="price"><center>￥{{item.price}}</center></div> </div> </div> <h2 >发布日期：{{item.date}}</h2> <h2 >供货地址：{{item.start}}</h2> </div> <div class="item"> <div class="row"> <div class="col"> <center style="color:#F0AB4B">发布人：{{item.name}}</center></div> <div class="col"> <center style="color:#97D152">种类：{{item.now_city}}</center></div> </div> </div> <div class="item"> <div class="row" > <div class="col" style="border-right:1px solid #F0EFF1"> <center> <h2 style="color:#0779FF; font-weight:bold;"><a href="tel:{{item.phone1}}">给TA打电话</a></h2> </center> </div> <div class="col"> <center> <h2 style="color:#0779FF; font-weight:bold;"><a ng-href="sms:{{item.phone1}}">给TA发短信</a></h2> </center> </div> </div> </div> </div> </div> </ion-list> <ion-infinite-scroll ng-if="!noMorePage" immediate-check="false" on-infinite="loadMore()" distance="1%" ></ion-infinite-scroll> </ion-content> </body> </html>
改版2（修复查询bug）
<html > <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width"> <title>app</title> <link href="css/ionic.min.css" rel="stylesheet"> <script src="js/ionic.bundle.min.js"></script> <script src="js/config.js"></script> <script type="text/javascript"> var app = angular.module( 'starter', ['ionic'] ).config( [ '$compileProvider', function( $compileProvider ) { $compileProvider.aHrefSanitizationWhitelist(/^s*(https?|ftp|mailto|tel|file|sms):/); // Angular before v1.2 uses $compileProvider.urlSanitizationWhitelist(...) }]) .controller( 'actionsheetCtl',['$scope','$location','$timeout' ,'$http',function($scope,$location,$timeout,$http){ //$scope.PageIndex = 1; $scope.currentPage=1; //$scope.noMorePage=false; $scope.domain = url; var name = $location.search().name; /****************页面载入方法************************/ $http.get(findUrl+'?class=goods&name='+name+'&page=1') //注意改为自己本站的地址，不然会有跨域问题 .success(function(newItems) { $scope.items = newItems.content; }) /****************刷新方法************************/ $scope.doRefresh = function() { //alert($scope.currentPage); $scope.currentPage=1; $scope.noMorePage=false; //console.log($scope.PageIndex); var start = $scope.start; var goods = $scope.goods; var now_city = $scope.now_city; $http.get(findUrl+'?class=goods&start='+start+'&goods='+goods+'&now_city='+now_city+'&name='+name+'&page=1') //注意改为自己本站的地址，不然会有跨域问题 .success(function(newItems) { $scope.items = newItems.content; }) $scope.$broadcast('scroll.refreshComplete'); }; /* function a(){ var i = 2; function b(){ //alert(i++); var page = i++; return page; } return b; } var c = a(); */ /*************查询方法*************/ $scope.doSearch = function() { var start = $scope.start; var goods = $scope.goods; var now_city = $scope.now_city; $scope.currentPage=1; $scope.noMorePage=false; //alert(start); $http.get(findUrl+'?class=goods&start='+start+'&goods='+goods+'&now_city='+now_city+'&name='+name+'&page=1') .success(function(newItems) { console.log(newItems.content); //newItems.content; $scope.items = newItems.content; }) //$scope.$broadcast('scroll.infiniteScrollComplete'); }; /****************加载方法************************/ $scope.loadMore=function(){ var start = $scope.start; var goods = $scope.goods; var now_city = $scope.now_city; //var p = c(); //$scope.PageIndex++; $scope.currentPage += 1; //console.log($scope.currentPage); $http.get(findUrl+'?class=goods&start='+start+'&goods='+goods+'&now_city='+now_city+'&name='+name+'&page='+$scope.currentPage) //注意改为自己本站的地址，不然会有跨域问题 .success(function(newItems) { //$scope.items.push(newItems.content); //console.log($scope.items); //var objs =[{a:1},{a:2}]; //angular.forEach(newItems.content, function(data,index,array){ //data等价于array[index] //console.log(newItems.content); if ( newItems.content == null){ $scope.noMorePage=true; } var length = newItems.content.length; for (var i=0;i<length;i++) { $scope.items.push(newItems.content[i]); } if (newItems.content.length < 10) { $scope.noMorePage=true; } //}); $scope.$broadcast('scroll.infiniteScrollComplete'); }) //$scope.havaMore=false; }; }]) </script> <style> body,input,h2{ font-family:Microsoft YaHei; } .icon{ color: #808080; list-style-type: none; font-size: 2em; } .price{ border-radius: 5px; background: red; color: white; font-size: 0.9em; padding-top:0.2em; } a{ text-decoration:none; color:black; } </style> </head> <body ng-app="starter" > <ion-content ng-controller="actionsheetCtl" > <ion-refresher pulling-text="下拉刷新" on-refresh="doRefresh()"></ion-refresher> <div class="row"> <div class="col col-25"> <div class="col-demo"> <div class="item item-input "> <input type="text" placeholder="地址" ng-model="start"> </div> </div> </div> <!-- <div class="col col-10"> <center><li class="ion-arrow-swap icon" style="margin-top: 40%;" ></li></center> </div>--> <div class="col col-25"> <div class="col-demo"> <div class="item item-input "> <input type="text" placeholder="产品" ng-model="goods" > </div> </div> </div> <div class="col col-30"> <label class="item item-input item-select"> <div class="input-label"> 种类 </div> <select ng-model="now_city"> <option value ="">全部</option> <option value ="蔬菜">蔬菜</option> <option value ="果品">果品</option> <option value="粮油">粮油</option> <option value="水产品">水产品</option> <option value="畜产品">畜产品</option> </select> </label> </div> <button class="ion-search icon button button-icon" ng-click="doSearch()"></button> </div> <ion-list> <div class="content ionic-pseudo card" ng-repeat="item in items" > <div class="list list-inset"> <div class="item item-thumbnail-left"> <img src="{{domain}}/upload/{{item.pic}}.png"> <div class="row"> <div class="col"> <h2>{{item.goods}}</h2></div> <div class="col"> <div class="price"><center>￥{{item.price}}</center></div> </div> </div> <h2 >发布日期：{{item.date}}</h2> <h2 >供货地址：{{item.start}}</h2> </div> <div class="item"> <div class="row"> <div class="col"> <center style="color:#F0AB4B">发布人：{{item.name}}</center></div> <div class="col"> <center style="color:#97D152">种类：{{item.now_city}}</center></div> </div> </div> <div class="item"> <div class="row" > <div class="col" style="border-right:1px solid #F0EFF1"> <center> <h2 style="color:#0779FF; font-weight:bold;"><a href="tel:{{item.phone1}}">给TA打电话</a></h2> </center> </div> <div class="col"> <center> <h2 style="color:#0779FF; font-weight:bold;"><a ng-href="sms:{{item.phone1}}">给TA发短信</a></h2> </center> </div> </div> </div> </div> </div> </ion-list> <ion-infinite-scroll ng-if="!noMorePage" immediate-check="false" on-infinite="loadMore()" distance="1%" ></ion-infinite-scroll> </ion-content> </body> </html>