jQuery实现的上拉刷新功能组件示例
程序员文章站
2024-01-26 09:12:34
本文实例讲述了jquery实现的上拉刷新功能组件。分享给大家供大家参考，具体如下：技术要点：1、jquery的插件写法2、上拉刷新步骤分解3、css样式jquery的插件写法：$.fn.pluginn...
本文实例讲述了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, 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, 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, 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, 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, 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, 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, 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>
</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, 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;
}
感兴趣的朋友可以使用在线html/css/javascript代码运行工具 http://tools.jb51.net/code/htmljsrun 测试上述代码运行效果。
下一篇： 趣拿场景营销拥有哪些黑科技