【UI组件】——用jQuery做一个上拉刷新

技术要点：

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做一个上拉刷新的更多相关文章

jQuery手机端上拉刷新下拉加载更多页面
基于jQuery手机端上拉下拉刷新页面代码.这是一款类似QQ空间客户端或者微信下拉刷新页面特效代码.效果图如下: 在线预览源码下载实现的代码. html代码: <div id=" ...
用jquery写一个上拉加载
/*可加载页面吗*/function canLoadMore() { return $('.loadin').length < 1;}/*移除正在加载字样*/function removeMor ...
vux （scroller）上拉刷新、下拉加载更多
1)比较关键的地方是要在 scroller 组件上里加一个 ref 属性 <scroller :lockX=true height="-170" :pulldown-conf ...
iOS动画进阶 - 实现炫酷的上拉刷新动效
移动端訪问不佳,请訪问我的个人博客近期撸了一个上拉刷新的小轮子.仅仅要遵循一个协议就能自己定义自己动效的上拉刷新和载入,我自己也写了几个动效进去,以下是一个比較好的动效的实现过程先上效果图和git ...
【转】vux （scroller）上拉刷新、下拉加载更多
1)比较关键的地方是要在 scroller 组件上里加一个 ref 属性 <scroller :lockX="true" height="-170" :p ...
用jQuery做一个三级菜单，鼠标移动到二级菜单的选项上，然后再迅速离开后，当鼠标再移动到该一级菜单或其他二级菜单选项，三级菜单也会显示。
用jQuery做一个三级菜单,鼠标移动到二级菜单的选项上,然后再迅速离开后,当鼠标再移动到该一级菜单或其他二级菜单选项,三级菜单也会显示. 原因:在为一个元素绑定hover事件之后,用户把光标移入元素 ...
基于better-scroll封装一个上拉加载下拉刷新组件
1.起因上拉加载和下拉刷新在移动端项目中是很常见的需求,遂自己便基于better-scroll封装了一个下拉刷新上拉加载组件. 2.过程 better-scroll是目前比较好用的开源滚动库,提供很 ...
vue 上拉刷新组件
背景,项目中经常会出现需要上拉加载更多或者下拉刷新的需求,一直以来呢都是借用各种UI库来实现,但是不知道啥情况,最近在使用的时候,一直有问题,出不了效果,然人很恼火,于是只能自己动手来实现以下, 这次 ...
Android UI之下拉刷新上拉刷新实现
在实际开发中我们经常要用到上拉刷新和下拉刷新,因此今天我写了一个上拉和下拉刷新的demo,有一个自定义的下拉刷新控件只需要在布局文件中直接引用就可以使用,非常方便,非常使用,以下是源代码: 自定义的 ...

随机推荐

confd test
vi /etc/confd/confd.toml backend = "consul"confdir = "/etc/confd"log-level = &qu ...
Volley的简单封装
算了一下,好像有很久没有写博客了.其实,关于写博客这件事,我从来没有把他当成我的一种任务,而是在学习过程中的一种总结和自我发现,同样也是为了练一练文笔,说不定有一天,我也能出一本书像<第一行代码 ...
jdeveloper 恢复默认配置
1>jdeveloper的环境设置出现问题,恢复默认的配置,需要删除保存再登录账户中的配置文件,以达到恢复默认配置的目的.只需删除以下配置文件目录即可. C:\Users\当前登录用户名\App ...
Java多线程同步方法
一.同步方法即有synchronized关键字修饰的方法. 由于java的每个对象都有一个内置锁,当用此关键字修饰方法时, 内置锁会保护整个方法.在调用该方法前,需要获得内置锁,否则就处于阻塞状态. ...
阿里云专属推荐码nuyxa6
申请成功!您的推荐码为nuyxa6 恭喜您获得阿里云专属推荐码,推荐码有效期至2017-03-04 14:43:49. 我们会在到期日前两周以站内信的方式通知您新的有效期.
让Ubuntu使用阿里云国内源，解决下载速度慢问题。
阿里云镜像官方地址 http://mirrors.aliyun.com/ 找到最新源地址列表: http://www.linuxdiyf.com/linux/23163.html 软件包管理中心(推荐 ...
IP转换成域名
DNS就是域名解析系统,它可以将IP转换成域名,也可以将域名转换成IP 1. 安装DNS服务开始—〉设置—〉控制面板—〉添加/删除程序—〉添加/删除Windows组件—〉“网络服务”—〉选择“域名服 ...
UILabel 字体下方加下划线
UILabel *knowKankan = [[UILabel alloc] initWithFrame:CGRectMake(0, MAINHEIGHT - 78 , MAINWIDTH, ...
Android代码实现求和运算
Android代码实现求和运算实验要求: 用Android语言设计一个界面,点击某按钮实现求和运算. 代码实现码云链接核心代码以上为求和按钮的代码截图,解析如图标注. 实验结果当输入为空值时 ...

【UI组件】——用jQuery做一个上拉刷新

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

随机推荐

热门专题