在Ionic App上实现pullToRefresh的最佳方式

时间:2016-10-20 05:42:32

标签: angularjs ionic-framework pull-to-refresh

我正在使用ion-refresher指令在我的App中实现pull to refresh。到目前为止,我能够在invidicual控制器和相应的HTML上实现它

我需要为我的所有屏幕实现它。如果我的屏幕有一组需要调用的不同的promise函数。我想避免为每个屏幕编写相同的代码。

有没有办法将doRefresh附加到根范围并实施指令,以便我可以避免在我的代码中重复和发送垃圾邮件。

任何建议都会有用

1 个答案:

答案 0 :(得分:1)

要在应用程序的每个页面中进行离子复习并在一个地方使用刷新功能,您需要在 app.js 文件中编写函数:

.run(function($ionicPlatform, $rootScope, $http) {
  $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 && window.cordova.plugins.Keyboard) {
      cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
      cordova.plugins.Keyboard.disableScroll(true);

    }
    if (window.StatusBar) {
      // org.apache.cordova.statusbar required
      StatusBar.styleDefault();
    }

    $rootScope.doRefresh = function(page) {
      $http.get('PATH OF API')
       .success(function(newItems) {
          console.log("success "+page);
       })
       .finally(function() {
         // Stop the ion-refresher from spinning
         $rootScope.$broadcast('scroll.refreshComplete');
       });
    };

  });
})

之后说你的应用程序中有3个页面叫做1)仪表板2)聊天3)帐户然后你需要在每个模板文件中写下面提到的指令:

<ion-refresher
    pulling-text="Pull to refresh..."
    on-refresh="doRefresh('dash')">
  </ion-refresher>
  <ion-list>
    <ion-item class="item-remove-animate item-avatar item-icon-right" ng-repeat="chat in chats" type="item-text-wrap" href="#/tab/chats/{{chat.id}}">
      <img ng-src="{{chat.face}}">
      <h2>{{chat.name}}</h2>
      <p>{{chat.lastText}}</p>
      <i class="icon ion-chevron-right icon-accessory"></i>

      <ion-option-button class="button-assertive" ng-click="remove(chat)">
        Delete
      </ion-option-button>
    </ion-item>
  </ion-list>

此处 doRefresh(&#39; dash&#39;)是带有参数的函数,该参数具有当前屏幕名称(此处为破折号用于仪表板)。同样适用于其他页面。

现在在app.js文件中的dorefresh()函数内部,您可以根据函数中传递的参数放置条件,并根据promise函数调用。

希望你能找到正确答案。