技术要点：

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

    <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:;

    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;

}

【UI组件】——用jQuery做一个上拉刷新的更多相关文章

  1. jQuery手机端上拉刷新下拉加载更多页面

    基于jQuery手机端上拉下拉刷新页面代码.这是一款类似QQ空间客户端或者微信下拉刷新页面特效代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div id=" ...

  2. 用jquery写一个上拉加载

    /*可加载页面吗*/function canLoadMore() { return $('.loadin').length < 1;}/*移除正在加载字样*/function removeMor ...

  3. vux （scroller）上拉刷新、下拉加载更多

    1)比较关键的地方是要在 scroller 组件上里加一个 ref 属性 <scroller :lockX=true height="-170" :pulldown-conf ...

  4. iOS动画进阶 - 实现炫酷的上拉刷新动效

    移动端訪问不佳,请訪问我的个人博客 近期撸了一个上拉刷新的小轮子.仅仅要遵循一个协议就能自己定义自己动效的上拉刷新和载入,我自己也写了几个动效进去,以下是一个比較好的动效的实现过程 先上效果图和git ...

  5. 【转】vux （scroller）上拉刷新、下拉加载更多

    1)比较关键的地方是要在 scroller 组件上里加一个 ref 属性 <scroller :lockX="true" height="-170" :p ...

  6. 用jQuery做一个三级菜单，鼠标移动到二级菜单的选项上，然后再迅速离开后，当鼠标再移动到该一级菜单或其他二级菜单选项，三级菜单也会显示。

    用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示. 原因:在为一个元素绑定hover事件之后,用户把光标移入元素 ...

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

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

  8. vue 上拉刷新组件

    背景,项目中经常会出现需要上拉加载更多或者下拉刷新的需求,一直以来呢都是借用各种UI库来实现,但是不知道啥情况,最近在使用的时候,一直有问题,出不了效果,然人很恼火,于是只能自己动手来实现以下, 这次 ...

  9. Android UI之下拉刷新上拉刷新实现

    在实际开发中我们经常要用到上拉刷新和下拉刷新,因此今天我写了一个上拉和下拉刷新的demo,有一个自定义的下拉刷新控件 只需要在布局文件中直接引用就可以使用,非常方便,非常使用,以下是源代码: 自定义的 ...

随机推荐

  1. MapReduce Notes

    [MapReduce Notes] 1.一个Map/Reduce 作业的输入和输出类型如下所示: 2.Shuffle & Sort & Secondary Sort Reducer的输 ...

  2. Java项目的结构

    -------siwuxie095             以 Hello World 为例     这个工程用一个文件夹表示,被放置在左侧的资源管理面板 Package Explorer 中     ...

  3. 282 expression and operations添加运算符

    ［抄题］: 给定一个仅包含数字 0 - 9 的字符串和一个目标值,返回在数字之间添加了 二元 运算符(不是一元)+, - 或 * 之后所有能得到目标值的情况. "123", 6 - ...

  4. IPMI (Intelligent Platform Management Interface)

    4.3. ipmitool - utility for controlling IPMI-enabled devices 4.3.1. ipmitool 4.3.1.1. ubuntu 确定硬件是否支 ...

  5. java高级工程师（一）

    一.无笔试题   不知道是不是职位原因还是没遇到,面试时,都不需要做笔试题,而是填张个人信息表格,或者直接面试     二.三大框架方面问题   1.Spring 事务的隔离性,并说说每个隔离性的区别 ...

  6. Introduction Sockets to Programming in C using TCP/IP

    Introduction Computer Network: hosts, routers, communication channels Hosts run applications Routers ...

  7. 字符编码codecs模块（读写文件）

    python对多国语言的处理是支持的很好的,它可以处理现在任意编码的字符,这里深入的研究一下python对多种不同语言的处理.有一点需要清楚的是,当python要做编码转换的时候,会借助于内部的编码, ...

  8. 生产消费者队列（TaskCompletionSource）的应用

    using System; using System.Collections.Concurrent; using System.Collections.Generic; using System.Li ...

  9. Linux文件备份

    1.tar -P是否保留根目录 -t查看压缩文件内容 -N 201401010备份日期以后 [root@localhost /]# tar -zcPf /tar/data2.tar.gz /etc/* ...

  10. 试题 F: 特别数的和 第十届蓝桥杯

    试题 F: 特别数的和时间限制: 1.0s 内存限制: 512.0MB 本题总分: 15 分[问题描述]小明对数位中含有 2. 0. 1. 9 的数字很感兴趣(不包括前导 0),在 1 到40 中这样 ...