angularjs 下拉重新整理
阿新 • • 發佈：2018-11-19
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);
//////////////////
}
}
/////////////////////////////////////////////
}
}
///////////////////////
}
})程式碼已上傳