美文网首页让前端飞
ionic自动触发下拉刷新

ionic自动触发下拉刷新

作者: jerryst | 来源:发表于2018-11-30 15:12 被阅读0次

    需求

    双击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();
            }
        }
      }
    })();
    

    相关文章

      网友评论

        本文标题:ionic自动触发下拉刷新

        本文链接:https://www.haomeiwen.com/subject/dhshcqtx.html