需求
双击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();
}
}
}
})();
网友评论