<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>下拉刷新</title>
<style>
/* 下拉刷新的css樣式 */
.slide-wrap{width:100%;}
.slide-wrap .sliding{
width:100%;
height:50px;
background:blue;
border-radius:0 0 50% 50%;
text-align: center;
font-size:20px;
display: none;
}
.slide-wrap .slided{
width:100%;
background:red;
line-height:50px;
text-align:center;
font-size:20px;
border-radius:0 0 50% 50%;
display: none;
}
.float-box{
width:100%;
height:500px;
background:pink;
}
</style>
</head>
<body>
<div class="float-box">float-box</div>
<script>
//封裝下拉刷新的功能模塊
(function(){
//1，首先創建一個slide構造函數，用來初始化屬性與函數
function Slide(dom){
this.start_y=null;//手指滑動屏幕的初始位置
this.end_y=null;//手指滑動屏幕的結束位置
this.render(dom);//初始化下拉功能的render函數
}
//2、編寫render函數
//render函數是用來動態創建下拉刷新的動畫圖。現在我們在Slide原型上編寫render函數。
Slide.prototype={
render:function(dom){
//拿到body節點
var body=document.getElementsByTagName('body');
//創建div，用來顯示下拉效果。這個div有‘正在刷新’和‘下拉刷新’這兩個子節點
var newItem=document.createElement('div');
//給div設置class屬性，該class是下拉效果的樣式
newItem.className='slide-wrap';
//用innerHTML將‘正在刷新。。。’和‘下拉刷新着’兩個子節點插入到上面創建的div中。
newItem.innerHTML='<div class="slided">正在刷新。。。</div>'+'<div class="sliding">下拉刷新</div>';
//然后將創建的div插入到頁面的前面
body[0].insertBefore(newItem,dom[0]);
//獲取創建完成的下拉刷新div
var dom2=document.getElementsByClassName('slide-wrap');
//運行slide_start()
this.slide_start(dom2);
// console.log(this)//this指向Slide構造函數
},
//3、編寫slide-strat()函數
slide_start:function(dom2){
var _this=this;
//監聽document整個文檔的touchstart事件
document.addEventListener('touchstart',function(evt){
var touch=evt.touches[0];//獲取第一個觸點
_this.start_y=Number(touch.pageY);//第一個觸點的y坐標
console.log(this)//this指向document
console.log(_this)//_this指向Slide構造函數
});
// slide_move
_this.slide_move(dom2);//這邊 用this也行
console.log(_this);//_this指向Slide構造函數
console.log(this)
},
//4、編寫slide_move()函數
slide_move:function(dom2){
var _this=this;
//監聽document的touchmove事件
document.addEventListener('touchmove',function(evt){
//下面這一行代碼是保證在手指移動的距離還不到規定的長度的時候，就不顯示‘正在刷新’
dom2[0].childNodes[0].style.display='none';
var touch=evt.touches[0];//獲取第一個觸點
//獲取手指向下移動的長度距離
_this.end_y=Number(touch.pageY)-_this.start_y;
// 判斷手指移動距離是否大於5，這個為什么設置為5，而不是0呢，主要是為了避免用戶不覺意的輕微滑動
if(_this.end_y>5){
// 當滑動距離大於5時，將‘下拉刷新’的效果顯示出來，同時將他的高度賦值為手指滑動的距離，已達到慢慢下拉的效果
dom2[0].childNodes[1].style.display='block';
dom2[0].childNodes[1].style.height=_this.end_y+'px';
dom2[0].childNodes[1].style.lineHeight=_this.end_y+'px';
}
});
// 執行slide_end()函數
_this.slide_end(dom2);
},
// 5、編寫slide_end()函數
slide_end:function(dom2){
var _this=this;
//監聽touchend事件
document.addEventListener('touchend',function(evt){
// 當手指松開的時候，判斷手指的滑動距離如果大於100就將‘正在刷新。。。’的效果顯示出來，同時隱藏‘下拉刷新的效果’
if(_this.end_y>100){
dom2[0].childNodes[1].style.display='none';
dom2[0].childNodes[0].style.display='block';
console.log('開始刷新');
// 這里模擬3秒后刷新成功，然后隱藏‘正在刷新。。’效果
setTimeout(function(){
dom2[0].childNodes[0].style.display='none';
},3000);
}else{
// 這里是當手指滑動距離小於100時，就將‘下拉刷新’的效果隱藏
dom2[0].childNodes[1].style.display='none';
}
});
}
}//Slide.prototype
//最后將Slide構造函數暴露到全局window
window.Slide=Slide;
})();//最外層的自執行函數
//使用方法
//在頁面中new一個Slide()。並將主頁的dom節點傳進去即可
var target=document.getElementsByClassName('float-box');
new Slide(target);
</script>
</body>
</html>