注：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;

?

轉載于:https://www.cnblogs.com/JJoan/p/10056272.html

總結

以上是生活随笔為你收集整理的better-scroll：angularJs中用better-scroll封装一个滚动的指令的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。