這篇文章主要講解了jQuery如何實(shí)現(xiàn)上拉刷新功能，內(nèi)容清晰明了，對(duì)此有興趣的小伙伴可以學(xué)習(xí)一下，相信大家閱讀完之后會(huì)有幫助。
專注于為中小企業(yè)提供網(wǎng)站制作、成都網(wǎng)站設(shè)計(jì)服務(wù),電腦端+手機(jī)端+微信端的三站合一,更高效的管理,為中小企業(yè)商水免費(fèi)做網(wǎng)站提供優(yōu)質(zhì)的服務(wù)。我們立足成都，凝聚了一批互聯(lián)網(wǎng)行業(yè)人才，有力地推動(dòng)了1000多家企業(yè)的穩(wěn)健成長(zhǎng)，幫助中小企業(yè)通過(guò)網(wǎng)站建設(shè)實(shí)現(xiàn)規(guī)模擴(kuò)充和轉(zhuǎn)變。
技術(shù)要點(diǎn)：
1、jQuery的插件寫(xiě)法
2、上拉刷新步驟分解
3、css樣式
jQuery的插件寫(xiě)法：
重慶分公司
重慶分公司
$.fn.pluginName = function() {
return this.each(function () {
fn();
})
};上拉刷新步驟分解：
上拉刷新可以分解成三個(gè)部分：一是開(kāi)始（start），記錄當(dāng)前鼠標(biāo)的位置；二是移動(dòng)（move），根據(jù)下拉的位移響應(yīng)不同的視圖；三是結(jié)束（end），刷新頁(yè)面。
;!function ($) {
"use strict";
var PTR = function (ele) {
this.container = $(ele);
this.container.addClass('pull-to-refresh');
this.distance = 60; // 設(shè)置參考的下拉位移
this.attachEvent();
};
// 判斷是否有touch事件發(fā)生
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'
};
// 獲取事件發(fā)生時(shí)相對(duì)于文檔的距離（含滾動(dòng)距離）
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();
// 設(shè)置container的位移小于頁(yè)面滾動(dòng)的距離，給人一種用力下拉的錯(cuò)覺(jué)，提升用戶體驗(yàn)
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')
}
};
// 事件處理程序，通過(guò)$.proxy(fn, content)綁定執(zhí)行函數(shù)的上下文。
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));
};
// 實(shí)例化構(gòu)造函數(shù)
var pullToRefresh = function (ele) {
new PTR(ele)
};
var pullToRefreshDone = function (ele) {
$(ele).removeClass('refreshing');
};
// jQuery 插件編寫(xiě)的一般模式
$.fn.pullToRefresh = function () {
// return 是插件可鏈?zhǔn)秸{(diào)用
// this 在這里是一個(gè)jQuery對(duì)象，相當(dāng)于$(ele)。因?yàn)樵诩磿r(shí)執(zhí)行函數(shù)作用域中，沒(méi)必要用“$(this)”的方式來(lái)把this包裹到一個(gè)jQuery對(duì)象中，因?yàn)閠his本身已經(jīng)是被包裝好的jQuery對(duì)象。
// this.each()使插件代碼為多元素集合中的每個(gè)元素單獨(dú)起作用
return this.each(function () {
pullToRefresh(this);
})
};
$.fn.pullToRefreshDone = function () {
return this.each(function () {
pullToRefreshDone(this);
})
}
}(window.jQuery);HTML代碼如下：
Title ↓下拉刷新釋放刷新正在刷新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!
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!
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!
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!
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!
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!
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!
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!
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, 0);
}
.pull-to-refresh-arrow {
display: inline-block;
z-index: 10;
margin-right: 4px;
transition-duration: 300ms;
transform: rotate(0deg) translate3d(0, 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;
}看完上述內(nèi)容，是不是對(duì)jQuery如何實(shí)現(xiàn)上拉刷新功能有進(jìn)一步的了解，如果還想學(xué)習(xí)更多內(nèi)容，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
