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

随机推荐

S 联系人新增及更新
一.联系人新增 [Public] ConnectString=host="siebel://10.10.1.139:2321/SBA_82/SMObjMgr_chs ConnectUserN ...
稀疏矩阵乘法 · Sparse Matrix Multiplication
［抄题］: 给定两个稀疏矩阵 A 和 B,返回AB的结果.您可以假设A的列数等于B的行数. [暴力解法]: 时间分析: 空间分析: ［思维问题］: ［一句话思路］: 如果为零则不相乘,优化常数的复杂 ...
[z]hadoop生态系统
http://developer.51cto.com/art/201311/415639_all.htm
c++ stringstream的使用
stringstream ss;//一次创建多次使用,需要进行clear()操作清除流状态标记 int i=0; while (i<3) { ss<<"21"; ...
为什么都说UX / UI设计师是最佳工作？
以下内容由Mockplus团队翻译整理,仅供学习交流,Mockplus是更快更简单的原型设计工具. 你将成为永远热爱自己工作的人,做着自己喜欢的工作还能得到相应的成果和报酬,就好似在度带薪年假一般,何 ...
ScrollView中嵌套ListView的问题
网上关于怎样在ScrollView中嵌套ListView的讨论有很多,我大概是搜索了一下,简单总结如下: 1.不要在ScrollView中嵌套ListView a.用一个LinearLayout来代替 ...
CoreText
[CoreText] Core Text is designed for development of higher-level text-handling frameworks. General ...
指向字符串的指针在printf与cout区别
根据指针用法: * 定义一个指针, &取变量地址, int b = 1; int *a = &b; 则*a =1,但对于字符串而言并非如此,直接打印指向字符串的指针打印的是地址还是字符 ...
UIWebView清除缓存和cookie[转]
现在项目遇到一个问题,游戏底层用Cocos2d-x,公告UI实现是用的UIWebView, 然后第一次在有网络的环境下运行公告UI,会加载url链接,同时就会自动存入缓存,当下次手机没有网络的环境下, ...
关于SQLServer无法对数据库'XXX'执行删除，因为它正用于复制。错误：'3724' 的解决方案
关于这个错误,是因为在服务器上想把数据库复制到本地,使用了“发布.订阅”方案,结果后来没成功,删除本地数据库的时候出现了这个错误,说“无法对数据库'XXX'执行删除,因为它正用于复制”. 解决方案:只 ...

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

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

随机推荐

热门专题