style
<style>
#slideDown{margin-top: 0;width: 100%;}
#slideDown1,#slideDown2{width: 100%;height: 70px;;background: #e9f4f7;display: none;}
#slideDown1{height: 20px;}
#slideDown1>p,#slideDown2>p{margin: 20px auto;text-align:center;font-size: 14px;color: #37bbf5;}
</style>
html
<div ng-app="myApp">
<div reload-data></div>
<div>
<ul>
<li>item1 -- item1 -- item1</li>
<li>item2 -- item2 -- item2</li>
<li>item3 -- item3 -- item3</li>
<li>item4 -- item4 -- item4</li>
<li>item5 -- item5 -- item5</li>
<li>item6 -- item6 -- item6</li>
<li>item7 -- item7 -- item7</li>
<li>item11 -- item11 -- item1</li>
<li>item21 -- item21 -- item2</li>
<li>item31 -- item31 -- item3</li>
<li>item41 -- item41 -- item4</li>
<li>item51 -- item51 -- item5</li>
<li>item61 -- item61 -- item6</li>
<li>item71 -- item71 -- item7</li>
<li>item12 -- item12 -- item1</li>
<li>item22 -- item22 -- item2</li>
<li>item32 -- item32 -- item3</li>
<li>item42 -- item42 -- item4</li>
<li>item52 -- item52 -- item5</li>
<li>item62 -- item62 -- item6</li>
<li>item72 -- item72 -- item7</li>
<li>item13 -- item13 -- item1</li>
<li>item23 -- item23 -- item2</li>
<li>item33 -- item33 -- item3</li>
<li>item43 -- item43 -- item4</li>
<li>item53 -- item53 -- item5</li>
<li>item63 -- item63 -- item6</li>
</ul>
</div>
</div>
js
<script>
var app = angular.module('myApp',[]);
app.directive('reloadData',function(){
return{
restrict:'A',
template : "<div id='slideDown'><div id='slideDown1'><p>松开刷新</p></div><div id='slideDown2'><p>正在刷新 ...</p><div/></div>",
link:function($scope){
window.addEventListener("scroll",function(){
$scope.scrollTop = document.body.scrollTop;
if($scope.scrollTop<=0){ console.log('刷新启动');k_touch("y");}else{console.log('未激活刷新');
console.log($scope.scrollTop);
}
});
/
function slideDownStep1(dist){ // dist 下滑的距离,用以拉长背景模拟拉伸效果
$scope.slideDown1 = document.getElementById("slideDown1");
$scope.slideDown2 = document.getElementById("slideDown2");
$scope.slideDown2.style.display = "none";//正在刷新block
$scope. slideDown1.style.display = "block";//松开刷新出现
$scope.slideDown1.style.height = (parseInt("20px") - dist) + "px";//松开刷新的高度
}
function slideDownStep2(){
$scope.slideDown1 = document.getElementById("slideDown1");
$scope.slideDown2 = document.getElementById("slideDown2");
$scope.slideDown1.style.display = "none";//松开刷新none
$scope.slideDown1.style.height = "20px";//高度设定为20px
$scope.slideDown2.style.display = "block";//刷新出现
//刷新数据
//location.reload();//加载数据
}
function slideDownStep3(){
$scope.slideDown1 = document.getElementById("slideDown1");
$scope.slideDown2 = document.getElementById("slideDown2");
$scope.slideDown1.style.display = "none";//松开刷新none
$scope.slideDown2.style.display = "none";//正在刷新none
}
function k_touch(way){
$scope._start = 0;
$scope. _end = 0;
document.body.addEventListener("touchstart",touchStart,false);//当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。
document.body.addEventListener("touchmove",touchMove,false);//当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。
document.body.addEventListener("touchend",touchEnd,false);
function touchStart(event){//touchStart函数
var touch = event.targetTouches[0];
if(way == "x"){
$scope._start = touch.pageX;console.log('x'+$scope._start);
}else{
$scope._start = touch.pageY;console.log('ystart'+$scope._start);
}
}
//
function touchMove(event){//touchMove函数
var touch = event.targetTouches[0];
if(way == "x"){
$scope._end = ($scope._start - touch.pageX);
}else{
$scope._end = ($scope._start - touch.pageY);
//下滑才执行操作
if($scope._end < 0){
if( document.body.scrollTop <= 0){slideDownStep1($scope._end);}else{return;}
}
}
}
/
function touchEnd(event){//touchEnd函数
if($scope._end >0){
console.log("左滑或上滑 "+$scope._end);
}else{
console.log("右滑或下滑"+$scope._end);
if( document.body.scrollTop <= 0){
slideDownStep2();
//刷新成功则
//模拟刷新成功进入第三步
setTimeout(function(){
slideDownStep3();
},3000);
//
}else{return;}
}
}
/
}
}
///
}
})
</script>
以上是从网上其它地方COPY来的代码,发现并不适用于现在的项目,因为它是以window作为滑动对象,而我们是以某块div区域
所以作了以下改动
1 给div加入id
<div reload-data></div>
<div id="scroller">
<ul>
<li>item1 -- item1 -- item1</li>
<li>item2 -- item2 -- item2</li>
<li>item3 -- item3 -- item3</li>
<li>item4 -- item4 -- item4</li>
<li>item5 -- item5 -- item5</li>
<li>item6 -- item6 -- item6</li>
</ul>
</div>
2 把id取出来作为变量,来进行滑动变化参数
app.directive('reloadData', function () {
return {
restrict: 'A',
template: "<div id='pullDown'> <span class='pullDownIcon'></span><span class='pullDownLabel'>加载中...</span></div>",
link: function ($scope) {
var scrollerId = "scroller";
var pullDownId = "pullDown";
// var scrollerHeight = "130"
// document.getElementById(scrollerId)
document.getElementById(scrollerId).addEventListener("scroll", function () {
$scope.scrollTop = $("#" + scrollerId).scrollTop()
if ($scope.scrollTop <= 0) {
// console.log('刷新启动');
k_touch("y");
} else {
//console.log('未激活刷新');
}
});
/
function slideDownStep1(dist) { // dist 下滑的距离,用以拉长背景模拟拉伸效果
$scope.pullDown = document.getElementById(pullDownId);
$scope.pullDown.className = '';
var pullshowHeight = 40 - dist;
if (pullshowHeight > 100) {
pullshowHeight = 100;
}
$scope.pullDown.style.height = pullshowHeight + "px";//松开刷新的高度
$scope.pullDown.querySelector('.pullDownLabel').innerHTML = '松手开始更新...';
$scope.pullDown.style.display = "block";//松开刷新none
}
function slideDownStep2() {
$scope.pullDown.className = 'loading';
$scope.pullDown.querySelector('.pullDownLabel').innerHTML = '加载中...';
$scope.pullDown.style.height = "40px";//高度设定为20px
//刷新数据
//location.reload();//加载数据
}
function slideDownStep3() {
$scope.pullDown.style.display = "none";//松开刷新none
}
function k_touch(way) {
$scope._start = 0;
$scope._end = 0;
document.getElementById(scrollerId).addEventListener("touchstart", touchStart, false);//当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。
document.getElementById(scrollerId).addEventListener("touchmove", touchMove, false);//当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。
document.getElementById(scrollerId).addEventListener("touchend", touchEnd, false);
function touchStart(event) {//touchStart函数
var touch = event.targetTouches[0];
if (way == "x") {
$scope._start = touch.pageX;
//console.log('x' + $scope._start);
} else {
$scope._start = touch.pageY;
//console.log('ystart' + $scope._start);
}
}
//
function touchMove(event) {//touchMove函数
var touch = event.targetTouches[0];
if (way == "x") {
$scope._end = ($scope._start - touch.pageX);
} else {
$scope._end = ($scope._start - touch.pageY);
//下滑才执行操作
if ($scope._end < 0) {
if ($("#" + scrollerId).scrollTop() <= 0) { slideDownStep1($scope._end); } else { return; }
}
}
}
/
function touchEnd(event) {//touchEnd函数
if ($scope._end >= 0) {
// console.log("左滑或上滑 " + $scope._end);
} else {
//console.log("右滑或下滑" + $scope._end);
slideDownStep2();
//刷新成功则
//模拟刷新成功进入第三步
setTimeout(function () {
slideDownStep3();
$("#" + scrollerId).scrollTop(0)
}, 3000);
//
}
}
/
}
}
///
}
})
代码已上传