ionic访问界面自动刷新

最新推荐文章于 2019-05-11 21:12:59 发布

原创最新推荐文章于 2019-05-11 21:12:59 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ionic

本文介绍了如何在Ionic应用中实现下拉刷新功能。通过自定义服务来触发刷新，并利用$scope监听状态改变执行刷新操作。同时展示了如何配置ion-refresher指令以实现页面刷新逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.触发刷新服务servie (触发on-refresh)

  module.service('utilities', function() {
    this.triggerScrollViewPullToRefresh = function (scrollView) {
      scrollView.__publish(
        scrollView.__scrollLeft, -scrollView.__refreshHeight,
        scrollView.__zoomLevel, true);

      var d = new Date();

      scrollView.refreshStartTime = d.getTime();

      scrollView.__refreshActive = true;
      scrollView.__refreshHidden = false;
      if (scrollView.__refreshShow) {
        scrollView.__refreshShow();
      }
      if (scrollView.__refreshActivate) {
        scrollView.__refreshActivate();
      }
      if (scrollView.__refreshStart) {
        scrollView.__refreshStart();
      }
    }
  });

2.页面跳转监听变化，执行函数

$scope.$on('$stateChangeSuccess', $scope.someFunc);

    $scope.someFunc = function() {
      // scrollerHandle should be the delegate-handle set on the scrollview
      $scope.scrollDelegate = $ionicScrollDelegate.$getByHandle('scrollerHandle');
      utilities.triggerScrollViewPullToRefresh($scope.scrollDelegate.getScrollView());
    };

3.页面指令

  <ion-content delegate-handle="scrollerHandle" overflow-scroll="false" has-bouncing="true">
    <ion-refresher on-refresh="search(searchName)" pulling-text="下拉刷新">
    </ion-refresher>
  </ion-content>

然后自动刷新动作通过search函数执行相应的刷新逻辑。