jQuery實現的上拉重新整理功能元件示例
阿新 • • 發佈：2020-05-03
本文例項講述了jQuery實現的上拉重新整理功能元件。分享給大家供大家參考，具體如下：
技術要點：
1、jQuery的外掛寫法
2、上拉重新整理步驟分解
3、css樣式
jQuery的外掛寫法：
$.fn.pluginName = function() {
return this.each(function () {
fn();
})
};
上拉重新整理步驟分解：
上拉重新整理可以分解成三個部分：一是開始（start），記錄當前滑鼠的位置；二是移動（move），根據下拉的位移響應不同的檢視；三是結束（end），重新整理頁面。
;!function ($) {
"use strict";
var PTR = function (ele) {
this.container = $(ele);
this.container.addClass('pull-to-refresh');
this.distance = 60; // 設定參考的下拉位移
this.attachEvent();
};
// 判斷是否有touch事件發生
var isTouch = (function () {
var isSupportTouch = !!'ontouchstart' in document || window.documentTouch;
return isSupportTouch;
})();
var touchEvents = {
start: isTouch ? 'touchstart': 'mousedown',move: isTouch ? 'touchmove':'mousemove',end: isTouch ? 'touchend': 'mouseup'
};
// 獲取事件發生時相對於文件的距離（含滾動距離）
function getTouchPosition(e) {
var e = e.orinalEvent || e;
console.log(e)
if(e.type === 'touchstart' || e.type === 'touchmove' || e.type === 'touchend') {
return {
x: e.targetTouches[0].pageX,y: e.targetTouches[0].pageY
}
}else {
return {
x: e.pageX,y: e.pageY
}
}
};
PTR.prototype.touchStart = function (e) {
var p = getTouchPosition(e);
this.start = p;
this.diffX = this.diffY = 0;
};
PTR.prototype.touchMove = function (e) {
if(this.container.hasClass('refreshing')) return;
if(!this.start) return false;
var p = getTouchPosition(e);
this.diffX = p.x - this.start.x;
this.diffY = p.y - this.start.y;
if(this.diffY < 0) return;
this.container.addClass('touching');
e.preventDefault();
e.stopPropagation();
// 設定container的位移小於頁面滾動的距離，給人一種用力下拉的錯覺，提升使用者體驗
this.diffY = Math.pow(this.diffY,.8);
this.container.css('transform','translate3d(0,'+ this.diffY +'px,0)');
if(this.diffY < this.distance) {
this.container.removeClass('pull-up').addClass('pull-down')
}else {
this.container.removeClass('pull-down').addClass('pull-up')
}
};
PTR.prototype.touchEnd = function (e) {
var _this = this;
this.start = false;
this.container.removeClass('pull-down');
this.container.removeClass('pull-up');
this.container.removeClass('touching');
this.container.css('transform','');
if(this.diffY >= this.distance) {
this.container.addClass('refreshing');
this.container.trigger('pull-to-refresh')
}
};
// 事件處理程式，通過$.proxy(fn,content)繫結執行函式的上下文。
PTR.prototype.attachEvent = function () {
var ele = this.container;
ele.on(touchEvents.start,$.proxy(this.touchStart,this));
ele.on(touchEvents.move,$.proxy(this.touchMove,this));
ele.on(touchEvents.end,$.proxy(this.touchEnd,this));
};
// 例項化建構函式
var pullToRefresh = function (ele) {
new PTR(ele)
};
var pullToRefreshDone = function (ele) {
$(ele).removeClass('refreshing');
};
// jQuery 外掛編寫的一般模式
$.fn.pullToRefresh = function () {
// return 是外掛可鏈式呼叫
// this 在這裡是一個jQuery物件，相當於$(ele)。因為在即時執行函式作用域中，沒必要用“$(this)”的方式來把this包裹到一個jQuery物件中，因為this本身已經是被包裝好的jQuery物件。
// this.each()使外掛程式碼為多元素集合中的每個元素單獨起作用
return this.each(function () {
pullToRefresh(this);
})
};
$.fn.pullToRefreshDone = function () {
return this.each(function () {
pullToRefreshDone(this);
})
}
}(window.jQuery);
HTML程式碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="pull-to-refresh.css" rel="external nofollow" >
<style>
p {
margin-top: 0;
}
</style>
</head>
<body>
<div class="pull-to-refresh_layer">
<div class="pull-to-refresh-arrow">↓</div>
<div class="pull-to-refresh-preloader"></div>
<div class="down">下拉重新整理</div>
<div class="up">釋放重新整理</div>
<div class="refresh">正在重新整理</div>
</div>
<div>
<p>Lorem ipsum dolor sit amet,consectetur adipisicing elit. Accusamus amet aperiam,architecto at aut
beatae dignissimos eaque est ex fugi
at incidunt inventore natus nemo nostru
m omnis quos repellat ut voluptas!
</p>
<p>Lorem ipsum dolor sit amet,architecto at aut
beatae dignissimos eaque est ex fugi
at incidunt inventore natus nemo nostru
m omnis quos repellat ut voluptas!
</p>
</div>
<script src="../jquery-1.8.3.min.js"></script>
<script src="pull-to-refresh.js"></script>
<script>
$(function () {
$(document.body).pullToRefresh().on('pull-to-refresh',function () {
setTimeout(function () {
$(document.body).pullToRefreshDone();
},2000)
});
})
</script>
</body>
</html>
CSS程式碼如下：
.pull-to-refresh {
margin-top: -50px;
transition: transform .4s;
}
.pull-to-refresh .pull-to-refresh-preloader,.pull-to-refresh .up,.pull-to-refresh .refresh {
display: none;
}
.pull-to-refresh.refreshing {
transform: translate3d(0,50px,0);
}
.refreshing .pull-to-refresh-arrow,.refreshing .down,.refreshing .up {
display: none;
}
.refreshing .refresh,.refreshing .pull-to-refresh-preloader {
display: inline-block;
}
.pull-to-refresh_layer {
height: 30px;
line-height: 30px;
padding-bottom: 10px;
}
.pull-down .pull-to-refresh_layer .up,.pull-down .pull-to-refresh_layer .refresh {
display: none;
}
.pull-down .pull-to-refresh_layer .down{
display: inline-block;
}
.pull-up .pull-to-refresh_layer .up{
display: inline-block;
}
.pull-up .pull-to-refresh_layer .down,.pull-up .pull-to-refresh_layer .refresh {
display: none;
}
.pull-up .pull-to-refresh-arrow {
transform: rotate(180deg) translate3d(0,0);
}
.pull-to-refresh-arrow {
display: inline-block;
z-index: 10;
margin-right: 4px;
transition-duration: 300ms;
transform: rotate(0deg) translate3d(0,0);
}
.pull-to-refresh_layer {
display: inline-block;
}
.pull-to-refresh-preloader {
display: inline-block;
}
.pull-down {
}
.pull-up {
}
.down {
display: inline-block;
}
.up {
display: inline-block;
}
.refresh {
display: inline-block;
}
感興趣的朋友可以使用線上HTML/CSS/JavaScript程式碼執行工具 http://tools.jb51.net/code/HtmlJsRun 測試上述程式碼執行效果。
更多關於jQuery相關內容感興趣的讀者可檢視本站專題：《jQuery頁面元素操作技巧彙總》、《jQuery常見事件用法與技巧總結》、《jQuery常用外掛及用法總結》、《jQuery擴充套件技巧總結》及《jquery選擇器用法總結》
希望本文所述對大家jQuery程式設計有所幫助。