【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,有一个自定义的下拉刷新控件只需要在布局文件中直接引用就可以使用,非常方便,非常使用,以下是源代码: 自定义的 ...

随机推荐

mount /dev/sr0 /media/cdrom you must specify the filesystem type
发现“CD/DVD”的Device status中的“Connected”未打勾,将此项打勾后(不需要重启虚拟机),可以正常挂载光驱
java基础三［深入多态，接口和多态］（阅读Head First Java记录）
抽象类和抽象方法 1.抽象类的声明方法,在前面加上抽象类的关键词abstract abstract class canine extends animal{ public void roam ...
7-n!的位数（斯特灵公式）
http://acm.hdu.edu.cn/showproblem.php?pid=1018 Big NumberTime Limit: 2000/1000 MS (Java/Others) Memo ...
Makefiles in Linux
http://www.codeproject.com/Articles/31488/Makefiles-in-Linux-An-Overview
解决virtualbox共享文件夹没有访问权限的问题
Virtualbox是一款免费试用的虚拟机软件.基本功能完全可替代需要购买或crack的VMware. 在Windows主机上用Virtualbox搭建Linux虚拟机,虚拟机和主机之间传递文件最方便 ...
Python爬虫进阶五之多线程的用法
前言我们之前写的爬虫都是单个线程的?这怎么够?一旦一个地方卡到不动了,那不就永远等待下去了?为此我们可以使用多线程或者多进程来处理. 首先声明一点! 多线程和多进程是不一样的!一个是 thread ...
解决win7和2008连接windows 2003远程桌面很卡的问题
解决win7和2008连接windows 2003远程桌面很卡的问题来源:http://www.hack1990.com/ 作者:佚名时间:2013-04-12 TAG: 我要投稿原因在于从vi ...
Google’s Project Tango is shutting down because ARCore is already here
https://www.theverge.com/2017/12/15/16782556/project-tango-google-shutting-down-arcore-augmented-rea ...
MFC中的多线程
程序是计算机指令的几何,以文件的形式存在磁盘上.进程被定义为正在运行的程序的实例,是在进行地址空间中的一次执行活动.一个程序可以对应多个进程,如可以通过打开多个Word程序,每个word的应用就是一个 ...
oracle内部结构
数据库管理系统将数据存储在磁盘.磁带以及其他的裸设备上,虽然这些设备的访问速度相比内存慢很多,但其非易失性和大容量的特点使他们成为数据存储的不二之选. 本文主要讨论大型数据库产品的磁盘存储内部结构,这 ...

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

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

随机推荐

热门专题