better-scroll：angularJs中用better-scroll封装一个滚动的指令
注：ionic自带的ion-scrll,在添加了一个长按复制的类样式后，会导致滚动白屏的问题。因为长按复制的类阻碍了ionic的滑动监听事件。所以选择用better-scroll来代替ionic的滚动效果。
import BScroll from 'better-scroll';
// @ngInject
function ikScroll($timeout, $compile) {
function initPullDown(bScroll, $scope, $element) {
// 是否开启回弹
let isRebounding = false;
const initTop = -60;
const initDown = {
top: `${initTop}px`,
before: true,
isFlip: false,
};
const $pullDown = angular.element(`
<div class="ik-scroll-pull-down" ng-style="{top:down.top}">
<div class="ik-scroll-pull-down-icon" ng-if="down.before">
<i class="icon ion-android-arrow-down" ng-class="{flip:down.isFlip}"></i>
</div>
<div class="ik-scroll-pull-down-loading" ng-if="!down.before">
<ion-spinner icon="ios"></ion-spinner>
</div>
</div>
`);
$element.append($compile($pullDown)($scope));
$scope.down = _.assign({}, initDown);
bScroll.on('pullingDown', () => {
$scope.$apply(() => {
$scope.down.before = false;
});
$scope.onPullDown().then(() => {
isRebounding = true;
bScroll.finishPullDown();
$timeout(() => {
$scope.down = _.assign({}, initDown);
isRebounding = false;
bScroll.refresh();
}, bScroll.options.bounceTime);
});
});
bScroll.on('scroll', (pos) => {
$scope.$apply(() => {
if ($scope.down.before) {
$scope.down.top = `${Math.min(pos.y + initTop, 0)}px`;
}
if (pos.y >= 60) {
$scope.down.isFlip = true;
}
if (isRebounding) {
$scope.down.top = `${0 - (60 - pos.y)}px`;
}
});
});
}
function initPullUp(bScroll, $scope, $content) {
const $pullUp = angular.element(`
<div class="ik-scroll-pull-up">
<div class="ik-scroll-pull-up-text" ng-style="{display:up.textDisplay}">{{up.text}}</div>
<div class="ik-scroll-pull-up-loading" ng-if="up.loading">
<ion-spinner icon="ios"></ion-spinner>
</div>
</div>
`);
$content.append($compile($pullUp)($scope));
$scope.up = {
loading: false,
text: '加载更多',
textDisplay: 'block',
};
$scope.up.text = $scope.moreData ? '加载更多' : '没有更多数据了~';
bScroll.on('pullingUp', () => {
const result = $scope.onPullUp();
$scope.$apply(() => {
$scope.up.loading = true;
$scope.up.textDisplay = 'none';
if (!result) {
$scope.up.loading = false;
$scope.up.text = '没有更多数据了~';
$scope.up.textDisplay = 'block';
bScroll.finishPullUp();
} else {
result.then(() => {
$timeout(() => {
$scope.up.loading = false;
$scope.up.text = '加载更多';
$scope.up.textDisplay = 'block';
bScroll.finishPullUp();
bScroll.refresh();
});
});
}
});
});
}
return {
restrict: 'E',
scope: {
onPullDown: '&',
onPullUp: '&',
moreData: '='
},
compile: ($element) => {
$element.addClass('ik-scroll');
const $content = angular.element('<div class="ik-scroll-content"></div>');
$content.append($element.contents());
$element.append($content);
return ($scope, $element, $attrs) => {
const opts = {
scrollbar: { fade: true },
preventDefaultException: {className:/(^|\s)long-tap--copy(\s|$)/},
};
// 是否开启下拉刷新
if ($attrs.onPullDown) {
opts.pullDownRefresh = { threshold: 60, stop: 60 };
}
// 是否开启上拉加载
if ($attrs.onPullUp) {
opts.pullUpLoad = { threshold: 60 };
}
$timeout(() => {
const bScroll = new BScroll($element[0], opts);
if ($attrs.onPullDown) {
initPullDown(bScroll, $scope, $element);
}
if ($attrs.onPullUp) {
initPullUp(bScroll, $scope, $content);
}
});
};
},
};
}
export default ikScroll;
