<!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的更多相关文章

  1. Vue mint ui用在消息页面上拉加载下拉刷新loadmore 标记

    之前总结过一个页面存在多个下拉加载的处理方式,今天再来说一下在消息页面的上拉加载和下拉刷新,基本上每个app都会有消息页面,会遇到这个需求 需求:每次加载十条数据,上拉加载下拉刷新,并且没有点击查看过 ...

  2. 上拉加载下拉刷新控件WaterRefreshLoadMoreView

    上拉加载下拉刷新控件WaterRefreshLoadMoreView 效果: 源码: // // SRSlimeView // @author SR // Modified by JunHan on ...

  3. RecyclerView 上拉加载下拉刷新

    RecyclerView 上拉加载下拉刷新 <android.support.v4.widget.SwipeRefreshLayout android:id="@+id/teach_s ...

  4. APICloud上啦加载下拉刷新模块

    apicloud有自带的上啦加载下拉刷新,当让也可以用第三方或者在模块库里面找一个使用 一.下拉刷新,一下代码写在 apiready = function (){} 里面 apiready = fun ...

  5. 微信小程序上拉加载下拉刷新

    微信小程序实现上拉加载下拉刷新 使用小程序默认提供方法. (1). 在xxx.json 中开启下拉刷新,需要设置backgroundColor,或者是backgroundTextStyle ,因为加载 ...

  6. mui scroll和上拉加载/下拉刷新

    mui中 scroll和上拉加载/下拉刷新同时存在会出现两个滚动条 把/*   */ /* //mui页面鼠标拖动代码: mui('.mui-scroll-wrapper').scroll({ dec ...

  7. React-Native 上拉加载下拉刷新

    react-native 上下拉加载的控件效果都不好,找了半天没找到,正打算自已封装的时候,无意中找到了一个比较好的控件,大家看一下: react-native-refresh-list-view 这 ...

  8. zepto.js + iscroll.js上拉加载 下拉加载的 移动端 新闻列表页面

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name ...

  9. 移动端上拉加载下拉刷新插件-mescroll.js插件

    官网地址是:http://www.mescroll.com // 初始化mescroll function initMeScroll() { //创建MeScroll对象,内部已默认开启下拉刷新,自动 ...

  10. 基于better-scroll封装一个上拉加载下拉刷新组件

    1.起因 上拉加载和下拉刷新在移动端项目中是很常见的需求,遂自己便基于better-scroll封装了一个下拉刷新上拉加载组件. 2.过程 better-scroll是目前比较好用的开源滚动库,提供很 ...

随机推荐

  1. 【LeetCode】1. 两数之和

    题目 给定一个整数数组 nums 和一个目标值 target,请你在该数组中找出和为目标值的那 两个 整数,并返回他们的数组下标.你可以假设每种输入只会对应一个答案.但是,你不能重复利用这个数组中同样 ...

  2. Xamarin.Android 使用SoundPool进行音频播放

    一.引入命名空间 using Android.Media; 二.声明变量 SoundPool soundPool; int soundPoolId; 三.实例化对象 soundPool = new S ...

  3. IO流查找文件然后写入TXT文档

    今天领导让分析日志,把日志中所有登录过的员工信息都拿出来.于是.把日志摘下来谢了这段代码 import java.io.BufferedReader;import java.io.BufferedWr ...

  4. pycharm中可以运行脚本但是不能debug脚本

    以前用的时候好好地,但是最近上班突然脚本就不能debug了,debug直接报错,如下所示 上网查过该有的原因: 1.在pycharm中两个地方设置成utf-8,页面右下角和File>settin ...

  5. Vue + Element UI 实现权限管理系统 前端篇（十六）：系统备份还原

    系统备份还原 在很多时候,我们需要系统数据进行备份还原.我们这里就使用MySql的备份还原命令实现系统备份还原的功能. 后台接口准备 系统备份还原是对数据库的备份还原,所以必须有后台接口的支持,我们准 ...

  6. set 和hash_set和海量数据的处理问题

    什么样的结构决定其什么样的性质,因为set/map/multiset/multimap都是基于RB-tree之上,所以有自动排序功能, 而hash_set/hash_map/hash_multiset ...

  7. 来自于一个问题的回答对自己的反思 php怎么发送邮件?发送邮件插件PHPMailer

    前言: 昨天用手机无意点了一下博问,看见了一个朋友问了一个关于php发邮件不能添加发件人名称的问题,试着看了一下代码,觉得自己发现了问题所在,谁知道只是一知半解没有真正发现问题所在,看来有一段时间没有 ...

  8. [转]Angular4---部署---将Angular项目部署到IIS上

    本文转自:https://www.cnblogs.com/kingkangstudy/p/7699710.html Angular项目部署到一个IIS服务器上 1.安装URL rewrite组件: 网 ...

  9. Mybatis获取插入记录的自增长ID

    转自:http://blog.csdn.net/tolcf/article/details/39035259 1.在Mybatis Mapper文件中添加属性“useGeneratedKeys”和“k ...

  10. 性能监控(1)--linux下的top命令

    Linux下的监控工具 top命令 top命令能够实时显示系统中各个进程的资源占用情况,其输出信息分为两部分,前半部分为系统统计信息,后半部分是进程信息. 第一行是任务队列信息,它的结果等同于upti ...