阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      Ionic 下拉刷新

      ionic 下拉刷新

      在加载新数据的时候,我们需要实现下拉刷新效果,代码如下:

      实例

      HTML 代码

      <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>
      

      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.axihe.com/try/demo_source/item.json')  //注意改为自己本站的地址,不然会有跨域问题
                  .success(function(newItems) {
                      $scope.items = newItems;
                  })
                  .finally(function() {
                      $scope.$broadcast('scroll.refreshComplete');
                  });
          };
      }])
      

      item.json 文件数据:

      [
          {
              "name":"菜鸟教程"
          },
          {
              "name":"www.axihe.com"
          }
      ]
      
      目录
      目录