移动端上拉加载，下拉刷新效果Demo

<!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

移动端上拉加载，下拉刷新效果Demo的更多相关文章

Vue mint ui用在消息页面上拉加载下拉刷新loadmore 标记
之前总结过一个页面存在多个下拉加载的处理方式,今天再来说一下在消息页面的上拉加载和下拉刷新,基本上每个app都会有消息页面,会遇到这个需求需求:每次加载十条数据,上拉加载下拉刷新,并且没有点击查看过 ...
上拉加载下拉刷新控件WaterRefreshLoadMoreView
上拉加载下拉刷新控件WaterRefreshLoadMoreView 效果: 源码: // // SRSlimeView // @author SR // Modified by JunHan on ...
RecyclerView 上拉加载下拉刷新
RecyclerView 上拉加载下拉刷新 <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/teach_s ...
APICloud上啦加载下拉刷新模块
apicloud有自带的上啦加载下拉刷新,当让也可以用第三方或者在模块库里面找一个使用一.下拉刷新,一下代码写在 apiready = function (){} 里面 apiready = fun ...
微信小程序上拉加载下拉刷新
微信小程序实现上拉加载下拉刷新使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载 ...
mui scroll和上拉加载/下拉刷新
mui中 scroll和上拉加载/下拉刷新同时存在会出现两个滚动条把/* */ /* //mui页面鼠标拖动代码: mui('.mui-scroll-wrapper').scroll({ dec ...
React-Native 上拉加载下拉刷新
react-native 上下拉加载的控件效果都不好,找了半天没找到,正打算自已封装的时候,无意中找到了一个比较好的控件,大家看一下: react-native-refresh-list-view 这 ...
zepto.js + iscroll.js上拉加载下拉加载的移动端新闻列表页面
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...
移动端上拉加载下拉刷新插件-mescroll.js插件
官网地址是:http://www.mescroll.com // 初始化mescroll function initMeScroll() { //创建MeScroll对象,内部已默认开启下拉刷新,自动 ...
基于better-scroll封装一个上拉加载下拉刷新组件
1.起因上拉加载和下拉刷新在移动端项目中是很常见的需求,遂自己便基于better-scroll封装了一个下拉刷新上拉加载组件. 2.过程 better-scroll是目前比较好用的开源滚动库,提供很 ...

随机推荐

python unittest单元测试
unittest单元测试框架:包含测试用例编写.测试收集\测试用例加载.执行测试用例.生成测试用例报告,同时,更提供了添加断言,异常处理等. 第一:创建测试类,创建测试用例第二:收集测试用例,加载测 ...
Java架构技术进阶之：从分布式到微服务，深挖Service Mesh
自从几十年前第一次引入分布式系统这个概念以来,出现了很多原来根本想象不到的分布式系统使用案例,但同时也引入了各种各样的新问题. 当这些系统还是比较少比较简单的时候,工程师可以通过减少远程交互的次数来解 ...
Android应用系列：手把手教你做一个小米通讯录（附图附源码）
前言最近心血来潮,突然想搞点仿制品玩玩,很不幸小米成为我苦逼的第一个试验品.既然雷布斯的MIUI挺受欢迎的(本人就是其的屌丝用户),所以就拿其中的一些小功能做一些小demo来玩玩.小米的通讯录大家估 ...
通过GitHub和GoDaddy搭建静态个人博客
一.创建GitHub个人主页通过GitHub创建个人博客的好处:无广告,因为页面代码全是你自己写的:免费,不用买主机:装X:设计和编码练习. 1. 在GitHub上创建一个新的repository, ...
SSE图像算法优化系列五：超高速指数模糊算法的实现和优化（10000*10000在100ms左右实现）。
今天我们来花点时间再次谈谈一个模糊算法,一个超级简单但是又超级牛逼的算法,无论在效果上还是速度上都可以和Boxblur, stackblur或者是Gaussblur想媲美,效果上,比Boxblur来的 ...
【Shell实战】定期清理日志文件的shell脚本
功能描述:清理/var/log/路径下的messages历史日志文件(messages-date),但不清理messages文件本身依赖要求:服务器上安装了bc模块 # clean_logs.sh ...
Python和Java编程题(四)
1.题目:打印出所有的"水仙花数",所谓"水仙花数"是指一个三位数,其各位数字立方和等于该数本身. 分析:只需要对三位数的数字进行循环(100~999),判断三 ...
一个比较好用的省内存的ORM
http://www.52chloe.com 记录一下,完了,就这样
钉钉接口：获取accessToken和打卡记录【分享】
post和get方法工具类:HttpUtils package weaver.dingtalk.utils; import com.alibaba.fastjson.JSONObject; impor ...
Socket 类
构造函数名称说明 Socket(AddressFamily, SocketType, ProtocolType) 新实例初始化 Socket 类使用指定的地址族. 套接字类型和协议. ...

移动端上拉加载，下拉刷新效果Demo

移动端上拉加载，下拉刷新效果Demo的更多相关文章

随机推荐

热门专题