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>

<ion-spinner icon="ios"></ion-spinner>

</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(`

<ion-spinner icon="ios"></ion-spinner>

</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封装一个滚动的指令相关推荐

vue-cli3 实现封装一个滚动公告栏组件（数据大屏可用）
注意组件名等可自行更改,仅作参考用预览图思路总共10条数据,在界面中显示5条,每3秒滚动一次,每次向下滚动一条通过两个盒子,外层定高盒子设置溢出部分隐藏内部定高盒子每次都通过marginT ...
05【JS 高级】-【PC端网页特效】元素偏移量 offset 系列，元素可视区 client 系列，元素滚动 scroll 系列，动画函数封装，常见网页特效案例
04[JS 高级]-[PC端网页特效] 学习内容: 元素偏移量 offset 系列, 元素可视区 client 系列, 元素滚动 scroll 系列, 动画函数封装, 常见网页特效案例 1. 元素偏移 ...
One Page Scroll – 实现苹果风格的单页滚动效果
单页滚动网站已经被广泛使用了有一段时间了,它们对于快速提供信息是很有用的.One Page Scroll 是一个 jQuery 插件,简化了创建此类网站的步骤,只需创建 HTML 结构,进行简单设置, ...
linux用户在哪个文件夹,LINUX中用命令成功建立一个用户后信息会记录在哪个文件中...
LINUX中用命令成功建立一个用户后信息会记录在哪个文件中发布时间:2007-07-28 10:14:57来源:红联作者:MPiops 增加用户帐号后新建用户的命令十分简单,在命令行下使用 use ...
react封装一个类似安卓的toast控件message
项目中经常会用到类似安卓的toast的控件.封装一个这样的组件是每个项目必须的事情. import React from 'react'; import ReactDOM from 'react-do ...
封装一个类搞定90%安卓客户端与服务器端交互
本实例封装了一个处理安卓客户端与服务器端交互的几个方法,对于中文乱码问题本实例也找到了解决方案.本例可以处理的场景如下: 1.与服务器端交互json数据. 2.Get方式与服务器端交互数据. 3.Po ...
基于iview 封装一个vue 表格分页组件
iview 是一个支持中大型项目的后台管理系统ui组件库,相对于一个后台管理系统的表格来说分页十分常见的 iview是一个基于vue的ui组件库,其中的iview-admin是一个已经为我们搭好的后天 ...
函数模板案例_利用函数模板封装一个排序的函数，可以对不同数据类型数组进行排序排序规则从大到小，排序算法为选择排序分别利用char数组和int数组进行测试
案例描述: 利用函数模板封装一个排序的函数,可以对不同数据类型数组进行排序排序规则从大到小,排序算法为选择排序分别利用char数组和int数组进行测试 #include <iostream& ...
指针||指针和数组||指针和函数||指针、数组、函数案例描述：封装一个函数，利用冒泡排序，实现对整型数组的升序排序
指针指针的基本概念指针的作用: 可以通过指针间接访问内存内存编号是从0开始记录的,一般用十六进制数字表示可以利用指针变量保存地址指针变量的定义和使用指针变量定义语法: 数据类型 * 变量名 ...

better-scroll：angularJs中用better-scroll封装一个滚动的指令

better-scroll：angularJs中用better-scroll封装一个滚动的指令相关推荐

最新文章

热门文章