ionic 上啦加载和下刷新

最新推荐文章于 2020-07-12 17:12:07 发布

原创最新推荐文章于 2020-07-12 17:12:07 发布 · 234 阅读

CC 4.0 BY-SA版权

本文介绍如何使用Ionic框架实现移动端Web应用的下拉刷新和上拉加载更多功能。通过AngularJS与Ionic结合的方式，实现了数据的动态加载，并展示了具体的HTML结构和JavaScript代码。

<!DOCTYPE html>
<html>

   <head>
       <meta charset="utf-8" />
       <title></title>
       
       <script src="js/ionic.bundle.min.js" type="text/javascript" charset="utf-8"></script>
       <link rel="stylesheet" type="text/css" href="js/ionic.css" />
   </head>
   
   <body ng-app="my" ng-controller="mycon">
       
       <ion-header-bar class="bar-positive">
           <h1 class="title">头部</h1>
       </ion-header-bar>

       
       <ion-content>
           
           <ion-refresher pulling-text="下拉" on-refresh="dsa()">
           </ion-refresher>
           
           <ion-infinite-scroll on-infinite="loadMore()" distance="50%" immediate-check="false"> </ion-infinite-scroll>
           
           <ul class="list">
               <li class="item" ng-repeat="n in names">{{n}}</li>
           </ul>

       </ion-content>
   </body>
   
   <script type="text/javascript">
       //变量
       iii = 0
       mon = angular.module("my", ["ionic"])
       mon.controller("mycon", function($scope, $http) {
           gg = ["asd", "asdas", "dsadsa"]
           $scope.names = gg
           //下拉刷新事件
           $scope.dsa = function() {
               $http.get("js.json").then(function(sad) {
                   ff = sad.data
                   dd = []
                   for(var fd in ff) {

                       f = ff[fd].name
                       dd.push(f);
                   }
                   $scope.names = dd
                   $scope.$broadcast('scroll.refreshComplete')
               }, function(sad) {

               })

           }
           //上啦加载事件
           $scope.loadMore = function() {

               $http.get("js.json").then(function(ew) {
                   ff = ew.data
                   for(var fd in ff) {
                       f = ff[fd].name
                       $scope.names.push(f + iii);
                       iii++;
                   }

                   $scope.$broadcast('scroll.infiniteScrollComplete');
               })
           }
       })
   </script>

</html>