Home > Web Front-end > JS Tutorial > body text

Solution to ionic and angular pull-up loading problem

巴扎黑
Release: 2017-08-13 14:42:03
Original
1693 people have browsed it

This article mainly introduces how to solve the problem of ionic and angular pull-up loading. Friends who need it can refer to it

When it comes to ionic pull-up loading, it is the same as PC paging. It needs to be in html Add


<ion-infinite-scroll ng-if="hasmore" on-infinite="loadMore()" distance="10%"> 
</ion-infinite-scroll>
Copy after login

at the bottom of the data list. When the list is empty and ng-if is true, and the list is not filled, it will automatically load loadMore( );


<span style="font-size:18px;">      $scope.loadMore = function() { 
      Msdk.postJSON(&#39;/informNotice/queryNoticeInfo&#39;, { 
          pageIndex: $scope.newsList.pageIndex, 
          pageSize: $scope.newsList.pageSize, 
          informIds: $scope.newsList.informIds 
        }, 
        function(e) { 
          if(e.length != 0) { 
            //把每次请求到的数据都拼接起来 
            var a = $scope.notice; 
            $scope.notice = a.concat(e); 
            console.log($scope.notice); 
            //广播上个加载结束,有条件进行下个加载 
            $scope.$broadcast(&#39;scroll.infiniteScrollComplete&#39;);             $scope.newsList.pageIndex++;</span>
Copy after login


<span style="font-size:18px;">                        //如果请求到的数据小于pageSize,证明没数据可读</span> 

<span style="font-size:18px;"><span style="white-space:pre">            </span>//hasmore变为false,不会执行上拉加载 
            if(e.length < $scope.newsList.pageSize) { 
              $scope.hasmore = false; 
            } else {</span> 
[javascript] view plain copy
<span style="font-size:18px;"><span style="white-space:pre">              </span>//为true有条件进行下次上拉加载 
              $scope.hasmore = true; 
            } 
          } else { 
            $scope.hasmore = false; 
            $scope.$broadcast(&#39;scroll.infiniteScrollComplete&#39;); 
          } 
        }) 
    }</span>
Copy after login

The above is the detailed content of Solution to ionic and angular pull-up loading problem. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template