angularjs实现了上拉加载和下拉刷新数据的功能

虽然在AngularJS 1.x版本中封装了上拉加载和下拉刷新数据的功能，但还是有人不清楚。其实一开始我也没看懂，所以。现在记录下我所理解的，这样可以少走弯路。

现在，从：开始，我们先来谈谈下拉刷新。原则是每下拉一次就返回服务器请求新数据。通常，这个刷新函数的响应数据(即服务器返回的json数据)将包含

Rowsofpage' : 3，' currentpage' : 1，' totalpages' : 10，' totalrows' : 40，' rowofpage ' :10，' min rownumber' : 1，' maxrownumber' : 3。因此，我们只需要在下拉和刷新时将请求参数设置为currentpage:1和rowsofpage336010。也就是说，要将当前页面始终设置为1，一页应该显示多少行。然后将返回的数据保存在数组中。其实这个函数基本完成了，但是为了严谨起见，我们最好判断一下这个数组的长度是否小于总数。在这个判断中，判断这个数组的长度是否等于0。如果有，没有数据。在我这边，我将直接为下拉刷新的执行代码赋值。

$ scope.hasMore=false//$ scope . DataNull=false；//没有数据提示$作用域。SName=“你目前没有待办事项”；$ scope . do _ reviewer=function(){ $ scope . current page=1；$ scope . Bitems=[]；ajax.post(reqUrl，{ 'rowsOfPage': rowsOfPage，' current page ' : $ scope . current page }，function(listdata，success){ if(success){ $ scope . bitems=list data . datas | |[]；$ scope . has more=($ scope . Bitems . length list data . totalRows)；if($ scope . Bitems . length==0){ $ scope . DataNull=true；} else { $ scope.dataNull=false} } else { $ scope.hasMore=false} $scope。$ broadcast(' scroll . refresh complete ')；});在页面上，只需调用ion-reference pulling-text='下拉刷新.'on-refresh=' do _ refresh()'/ion-refresh，其中$ scope。$ broadcast('滚动。刷新完成’)；其功能是请求数据刷新页面。

接下来是上拉负载数据功能。这样会比下拉刷新麻烦一点，但是什么都懂就可以了。了解上拉加载原理：要求的currentPage参数值为累加。1.通过push方法将请求的数据循环添加到现有数据的数组中。这是理想的数据，我们通常要判断这个数据是不是在开发的时候加载的。我先上下编码，然后解释应该更好理解：

/* *上拉加载，批量加载服务器剩余数据*/$ scope . do _ infinite=function(){ if(！$scope.hasMore) { $scope。$ broadcast(' scroll . infinismecrollcomplete ')；返回；}//如果当前页数大于或等于总页数，则没有要重新加载的数据。$ scope . CurrentPage=1；ajax.post(reqUrl，{ 'rowsOfPage': rowsOfPage，' current page ' : $ scope . current page }，函数(listdata，成功){ if(success){//window . debug alert(' length ' list data . datas . length ' yeshu ' $ scope . current page)；$ scope . current page=list data . current page；for(var I=0；I list data . datas . length；I){ $ scope . bitems . push(list data . datas[I])；} $ scope . has more=($ scope . Bitems . length list data . totalRows)；} else { $ scope.hasMore=false} $scope。$ broadcast(' scroll . infinismecrollcomplete ')；});其中hasmore是判断是否有更多数据的布尔值。然后，请求参数currentPage的值用。使用for循环将返回的数据推入现有数据的数组中，然后判断当前数组长度(即本地获取的总块数)是否等于请求返回的总块数的属性值。如果该布尔值为真，则仍有数据。与上述$ scope相同。$ broadcast('滚动。infinity roll complete’)；它还会刷新页面数据。添加离子-无限-滚动ng-if=' has more ' on-无限=' do _ infinite()'立即-检查=' false '/离子-无限-滚动到页面。

注意：在html页面中，下拉刷新的功能应该放在离子列表中

,

上拉负载置于离子列表下

你不会看错的。

以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。