<!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>
PullToRefresh.min.js插件源码
"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