让前端飞

ionic自动触发下拉刷新

2018-11-30  本文已影响0人  jerryst

需求

双击ionic底部导航栏,相应页面出现下拉刷新效果

html

<ion-content delegate-handle="scrollerHandle" overflow-scroll="false" >
    <ion-refresher on-refresh="vm.refresh()"></ion-refresher>

注:overflow-scroll="false" 必加,否则android失效

controller

//开始刷新:模拟手动下拉
autoRefresh.triggerScrollViewPullToRefresh('scrollerHandle');

service

/* 
 * zhangyafei 2018.11.29
 * 自动触发下拉刷新
 * 实例:autoRefresh.triggerScrollViewPullToRefresh('scrollerHandle');
 * 
 * */

(function(){
  angular.module('app.services')
  .service('autoRefresh', autoRefresh);
  autoRefresh.$inject = ['$ionicScrollDelegate'];
  
  function autoRefresh($ionicScrollDelegate) {
    this.triggerScrollViewPullToRefresh = function (scrollerHandle) {
        var scrollView = $ionicScrollDelegate.$getByHandle(scrollerHandle).getScrollView();
        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();
        }
    }
  }
})();
上一篇下一篇

猜你喜欢

热点阅读