AnglarJs之下拉刷新
程序员文章站
2024-03-22 22:43:40
...
简介
下拉刷新,是目前手机网站刷新数据的一种常用方式,本文主要讲解AnglarJs集成,下拉刷新功能
实现
页面
<div id="container" class="scroller" >
<div class="loading" align="center" style="margin-bottom: 2%;width: 100%;margin-top: -15%;">
下拉刷新数据
</div>
<!--内容写在这里-->
</div>
- controller中下拉刷新功能使用
app.controller('indexCtrl', ['$scope','refreshService', function ($scope,refreshService) {
$scope.slide = new refreshService({container:'#container',next: function (e) {
//松手之后执行逻辑,ajax请求数据,数据返回后隐藏加载中提示
var that = this;
$scope.loading();
setTimeout(function () {
that.back.call();
},200);
}});
- 封装下拉刷新RefreshService.js
/**
* Created by FANQIBU on 2018/1/11.
*/
define(["jquery", "app"], function($, app) {
app.service("refreshService", [ function() {
var slide = function (option) {
var defaults={
container:'',
next:function(){}
};
var start,
end,
length,
isLock = false,//是否锁定整个操作
isCanDo = false,//是否移动滑块
isTouchPad = (/hp-tablet/gi).test(navigator.appVersion),
hasTouch = 'ontouchstart' in window && !isTouchPad;
var obj = document.querySelector(option.container);
var loading=obj.firstElementChild;
var offset=loading.clientHeight;
var objparent = obj.parentElement;
/*操作方法*/
var fn =
{
//移动容器
translate: function (diff) {
obj.style.webkitTransform='translate3d(0,'+diff+'px,0)';
obj.style.transform='translate3d(0,'+diff+'px,0)';
},
//设置效果时间
setTransition: function (time) {
obj.style.webkitTransition='all '+time+'s';
obj.style.transition='all '+time+'s';
},
//返回到初始位置
back: function () {
fn.translate(0 - offset);
//标识操作完成
isLock = false;
},
addEvent:function(element,event_name,event_fn){
if (element.addEventListener) {
element.addEventListener(event_name, event_fn, false);
} else if (element.attachEvent) {
element.attachEvent('on' + event_name, event_fn);
} else {
element['on' + event_name] = event_fn;
}
}
};
fn.translate(0-offset);
fn.addEvent(obj,'touchstart',start);
fn.addEvent(obj,'touchmove',move);
fn.addEvent(obj,'touchend',end);
fn.addEvent(obj,'mousedown',start)
fn.addEvent(obj,'mousemove',move)
fn.addEvent(obj,'mouseup',end)
//滑动开始
function start(e) {
var even = typeof event == "undefined" ? e : event;
if(even != undefined && even.touches != undefined && even.touches.length >0){
if(even.touches[0].pageY<650){
if (objparent.scrollTop <= 0 && !isLock) {
var even = typeof event == "undefined" ? e : event;
//标识操作进行中
isLock = true;
isCanDo = true;
//保存当前鼠标Y坐标
start = hasTouch ? even.touches[0].pageY : even.pageY;
//消除滑块动画时间
fn.setTransition(0);
loading.innerHTML='下拉刷新数据';
}
}
}
return false;
}
//滑动中
function move(e) {
if (objparent.scrollTop <= 0 && isCanDo) {
var even = typeof event == "undefined" ? e : event;
//保存当前鼠标Y坐标
end = hasTouch ? even.touches[0].pageY : even.pageY;
if (start < end) {
even.preventDefault();
//消除滑块动画时间
fn.setTransition(0);
//移动滑块
if((end-start-offset)/2<=150) {
length=(end - start - offset) / 2;
fn.translate(length);
}
else {
length+=0.3;
fn.translate(length);
}
}
}
}
//滑动结束
function end(e) {
if (isCanDo) {
isCanDo = false;
//判断滑动距离是否大于等于指定值
if (end - start >= offset) {
//设置滑块回弹时间
fn.setTransition(1);
//保留提示部分
fn.translate(0);
//执行回调函数
loading.innerHTML='正在刷新数据';
if (typeof option.next == "function") {
option.next.call(fn, e);
}
} else {
//返回初始状态
fn.back();
}
}
}
};
return slide;
}])
});