<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="renderer" content="webkit">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>上拉加载，下拉刷新效果Demo</title>
<link href="css/index.css" rel="stylesheet" type="text/css" />
<style>
.tip {
position: fixed;
right: 10px;
top: 50px;
width: 60px;
height: 50px;
border-radius: 50%;
background-color: #fff;
box-shadow: 0 0 5px #ccc;
z-index: 10000;
text-align: center;
line-height: 50px;
color: #666
}
</style>
</head>
<body>
<div class="tip">第0次</div>
<div id="app">
<ul>
<li>
<h5>上拉加载，下拉刷新</h5>
<p>尊敬万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改（这是一项推荐标准、外语原文：W3C Recommendation、见本处参考资料原文内容：[1] ）。</p>
</li>
<li>
<h5>2014年10月29日</h5>
<p>2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。</p>
</li>
<li>
<h5>1999年12月</h5>
<p>标准通用标记语言下的一个应用HTML标准自1999年12月发布的HTML4.01后，后继的HTML5和其它标准被束之高阁</p>
</li>
<li>
<h5>2013年1月6日</h5>
<p>HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。</p>
</li>
<li>
<h5>2013年5月6日</h5>
<p>HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。</p>
</li>
<li>
<h5>2012年12月17日</h5>
<p>万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”</p>
</li>
</ul>
</div>
</body>
<script type="text/javascript" src="https://apps.bdimg.com/libs/zepto/1.1.4/zepto.min.js"></script>
<script type="text/javascript" src="./dist/js/PullToRefresh.min.js"></script>
<script>
var n = 0,
flag = true;
//获取测试数据
function appendTestData() {
//此处Data为测试假数据，实际情况可以从Ajax请求获取
var Data = [{
ID: Math.floor(Math.random() * 100000),
Time: new Date()
}, {
ID: Math.floor(Math.random() * 100000),
Time: new Date()
}, {
ID: Math.floor(Math.random() * 100000),
Time: new Date()
}, {
ID: Math.floor(Math.random() * 100000),
Time: new Date()
}]
var str = "";
var templ = "<li><h5>{{ID}}</h5><p>现在开始报时：{{Time}}</p></li>";
//遍历处理Data
for (var i = 0; i < Data.length; i++) {
str += templ.replace("{{ID}}", Data[i].ID)
.replace("{{Time}}", Data[i].Time);
}
return str;
}
//为指定Dom渲染数据，此处是为#app ul填充数据
function addhtml(type) {
$(".tip").html("第" + n + "次")
$("#app ul")[type](appendTestData())
}
//插件的调用
var refreshBox = new PullToRefresh({
container: "#app",
pull: {
callback: function() {
setTimeout(function() {
n = 0
addhtml("html")
refreshBox.endPullRefresh(true)
}, 1000)
}
},
up: {
callback: function() {
setTimeout(function() {
if (n < 5) {
n++
addhtml("append")
refreshBox.endUpLoading(true)
} else { //没有数据
refreshBox.endUpLoading(false)
}
}, 1000)
}
}
})
</script>
</html>
"use strict";
function _classCallCheck(t, e) { if (!(t instanceof e)) throw new TypeError("Cannot call a class as a function") }
var _createClass = function() {
function t(t, e) {
for (var i = 0; i < e.length; i++) {
var s = e[i];
s.enumerable = s.enumerable || !1, s.configurable = !0, "value" in s && (s.writable = !0), Object.defineProperty(t, s.key, s)
}
}
return function(e, i, s) { return i && t(e.prototype, i), s && t(e, s), e }
}(),
_PTFuntil = {
throttle: function(t, e, i, s) {
var o = null,
l = null;
return function() {
var n = +new Date;
l || (l = n), s && n - l > s ? (e.call(t), l = n, clearTimeout(o)) : (clearTimeout(o), o = setTimeout(function() { e.call(t), l = null }, i))
}
},
deepMerge: function() {
var t = function(t) {
var e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : {},
i = "";
for (i in e) t[i] = t[i] && "[object Object]" === t[i].toString() ? _PTFuntil.deepMerge(t[i], e[i]) : t[i] = e[i]
};
return function() { for (var e = {}, i = arguments.length, s = Array(i), o = 0; o < i; o++) s[o] = arguments[o]; return s.forEach(function(i) { t(e, i) }), e }
}(),
prefixStyle: function() {
var t = document.createElement("div").style,
e = function() {
for (var e = ["t", "webkitT", "MozT", "msT", "OT"], i = 0, s = e.length; i < s; i++)
if (e[i] + "ransform" in t) return e[i].substr(0, e[i].length - 1);
return !1
}();
return function(t) { return !1 !== e && ("" === e ? t : e + t.charAt(0).toUpperCase() + t.substr(1)) }
}()
},
transform = _PTFuntil.prefixStyle("transform"),
transitionDuration = _PTFuntil.prefixStyle("transitionDuration"),
defaults = { container: "body", pull: { dampRate: .4, set: !0, height: 60, contentdown: "下拉刷新", contentover: "释放刷新", contentfresh: "刷新中……", success: "刷新成功" }, up: { set: !0, height: 120, contentfresh: "正在加载……", contentnomore: "没有更多数据了" } },
PullToRefresh = function() {
function t(e) { _classCallCheck(this, t), this.options = _PTFuntil.deepMerge({}, _PTFuntil.deepMerge(defaults, e)), e.pull && this.options.pull.set || (this.options.pull.set = !1), e.up && this.options.up.set || (this.options.up.set = !1), this.dom = document.querySelector(this.options.container), this.domHeight = this.dom.offsetHeight, this.scrollBox = this.dom.children[0], this.progress = null, this.data = { upLoading: !1, firstFull: !1, canPull: !0, pullLoadding: !1, preY: 0, starX: 0, starY: 0, pullHeight: 0, canRefresh: !1 }, this.init() }
return _createClass(t, [{ key: "init", value: function() { this.dom.classList.add("refreshWrap"), this.createPullBox(), this.createUpbox(), this.firstLoad(), this.loadMoreEvent(), this.pullEvent() } }, { key: "firstLoad", value: function() { this.scrollBox.offsetHeight < this.domHeight + this.options.up.height && !this.data.firstFull ? this.loadMore(!0) : this.data.firstFull = !0 } }, {
key: "createPullBox",
value: function() {
if (!this.options.pull.set) return !1;
this.pullBox = document.createElement("DIV"), this.pullBox.className = "refresh", this.pullBox.style.visibility = "hidden", this.pullBox.innerHTML = '<i class="loading"></i><p class="loadTxt">' + this.options.pull.contentdown + "</p>", this.dom.insertBefore(this.pullBox, this.scrollBox), this.progress = this.pullBox.querySelector(".loading"), this.progressTxt = this.pullBox.querySelector(".loadTxt")
}
}, {
key: "createUpbox",
value: function() {
if (!this.options.up.set) return !1;
var t = getComputedStyle(this.scrollBox).backgroundColor;
this.upBox = document.createElement("DIV"), this.upBox.className = "loadingBox", this.upBox.style.backgroundColor = t, this.upBox.innerHTML = '<i class="loading rotate"></i><p class="loadTxt">' + this.options.up.contentfresh + "</p>", this.dom.appendChild(this.upBox)
}
}, { key: "loadMoreEvent", value: function() { this.dom.onscroll = _PTFuntil.throttle(this, this.scrollCallback, 200, 250) } }, {
key: "scrollCallback",
value: function() {
if (!this.data.firstFull) return !1;
this.loadMore()
}
}, {
key: "loadMore",
value: function() {
var t = arguments.length > 0 && void 0 !== arguments[0] && arguments[0];
if (this.data.upLoading) return !1;
var e = this.dom.scrollTop,
i = this.dom.scrollHeight;
(t || e + this.domHeight + this.options.up.height >= i) && (this.data.upLoading = !0, this.options.up.callback && this.options.up.callback(this))
}
}, { key: "endUpLoading", value: function() {!(arguments.length > 0 && void 0 !== arguments[0]) || arguments[0] ? (this.data.upLoading = !1, this.data.firstFull || this.firstLoad()) : this.UpNoMore() } }, {
key: "endPullRefresh",
value: function() {
var t = !(arguments.length > 0 && void 0 !== arguments[0]) || arguments[0];
this.showPullSuc(t)
}
}, {
key: "showPullSuc",
value: function(t) {
var e = this;
this.progress.classList.add("success"), this.progress.style[transform] = "rotate(45deg)", this.progressTxt.innerText = this.options.pull.success, this.progress.classList.remove("rotate"), setTimeout(function() { e.refreshSuccess(t) }, 1e3)
}
}, {
key: "refreshSuccess",
value: function(t) {
var e = this;
if (this.data.pullLoadding = !1, this.translate(0, 300), this.data.pullHeight = 0, this.dom.scrollTop = 0, setTimeout(function() { e.progress.classList.remove("success") }, 100), !t) return this.pullBox.style.visibility = "hidden", this.UpNoMore(), !1;
this.initUpLoading(), setTimeout(function() { e.firstLoad(), e.pullBox.style.visibility = "hidden" }, 100)
}
}, { key: "UpNoMore", value: function() { this.upBox.classList.add("noMore"), this.upBox.querySelector(".loadTxt").innerHTML = this.options.up.contentnomore } }, {
key: "pullEvent",
value: function() {
var t = this;
if (!this.options.pull.set) return !1;
var e = function(e) {
t.data.canRefresh = !1;
var i = t.dom.scrollTop;
t.data.canPull = !(i > 0), t.data.preY = t.data.starY = e.changedTouches[0].clientY || e.clientY, t.data.starX = e.changedTouches[0].clientX || e.clientX
},
i = function(e) {
t.dom.scrollTop;
if (t.data.pullLoadding || !t.data.canPull) return !1;
t.pullBox.style.visibility = "visible";
var i = e.changedTouches[0].clientX || e.clientX,
s = e.changedTouches[0].clientY || e.clientY,
o = s - t.data.preY;
t.data.preY = s;
var l = i - t.data.starX,
n = s - t.data.starY;
return !(Math.abs(l) > Math.abs(n)) && (n < 0 ? (t.data.canPull = !1, !1) : (e.preventDefault(), t.options.pullHeight < t.options.pull.height ? t.data.pullHeight += o : t.data.pullHeight += o < 0 ? o : o * t.options.pull.dampRate, t.data.pullHeight = Math.round(t.data.pullHeight), t.translate(t.data.pullHeight), void t.progressRote(t.data.pullHeight)))
},
s = function(e) { t.dom.scrollTop; return !t.data.pullLoadding && (t.data.canPull ? (t.data.preY = 0, t.data.starY = 0, t.data.starX = 0, void(t.data.canRefresh ? t.pullRefresh() : (t.pullBox.style.visibility = "hidden", t.data.pullHeight = 0, t.translate(0, 300), t.dom.scrollTop = 0))) : (0 != t.data.pullHeight && (t.data.pullHeight = 0, t.translate(0, 0)), !1)) };
this.dom.addEventListener("touchstart", function(t) { e(t) }, !1), this.dom.addEventListener("touchmove", function(t) { i(t) }, !1), this.dom.addEventListener("touchend", function(t) { s() }, !1)
}
}, { key: "pullRefresh", value: function() { this.data.pullLoadding = !0, this.translate(this.options.pull.height, 300), this.data.pullHeight = this.options.pull.height, this.progressTxt.innerText = this.options.pull.contentfresh, this.options.pull.callback && this.options.pull.callback(this), this.progress.classList.add("rotate") } }, {
key: "translate",
value: function() {
var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 0,
e = arguments.length > 1 && void 0 !== arguments[1] ? arguments[1] : 0;
this.upBox.style[transitionDuration] = e + "ms", this.upBox.style[transform] = "translate3d(0," + t + "px,0)", this.scrollBox.style[transitionDuration] = e + "ms", this.scrollBox.style[transform] = "translate3d(0," + t + "px,0)"
}
}, {
key: "progressRote",
value: function() {
var t = arguments.length > 0 && void 0 !== arguments[0] ? arguments[0] : 0,
e = 360 * t / this.options.pull.height;
return this.progress.style[transform] = "rotate(" + e + "deg)", t >= this.options.pull.height ? (this.data.canRefresh || (this.progressTxt.innerText = this.options.pull.contentover, this.data.canRefresh = !0), !1) : (this.data.canRefresh && (this.progressTxt.innerText = this.options.pull.contentdown, this.data.canRefresh = !1), !1)
}
}, { key: "initUpLoading", value: function() { this.data.firstFull = !1, this.data.upLoading = !1, this.upBox.classList.remove("noMore"), this.upBox.querySelector(".loadTxt").innerHTML = this.options.up.contentfresh } }, { key: "scrollToTop", value: function() { this.dom.scrollTop = 0 } }, {
key: "triggerPullLoading",
value: function() {
if (!this.options.pull.set) return !1;
this.pullBox.style.visibility = "visible", this.scrollToTop(), this.pullRefresh()
}
}, { key: "triggerUpLoading", value: function() { this.initUpLoading(), this.loadMore(!0) } }]), t
}();
//# sourceMappingURL=../maps/PullToRefresh.min.js.map