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

随机推荐

Taints和Tolerations
Taints和Tolerations和搭配使用的,Taints定义在Node节点上,声明污点及标准行为,Tolerations定义在Pod,声明可接受得污点. 可以在命令行为Node节点添加Taint ...
LevelDB Version
[LevelDB Version] Version 保存了当前磁盘以及内存中所有的文件信息,一般只有一个Version叫做"current" version(当前版本).Level ...
loadrunner12-参数化以及参数化关联
1.选中需要进行参数化的字段,单击鼠标右键,选择使用参数替换--新建参数. 2.输入参数名称. 3.根据需要进行选择,我这边选择“Yes”. 4.再次选中刚刚参数化的字段,单击鼠标右键,选择显示参数 ...
c11时间库一个小例子
#pragma once #include <chrono> #include <string> #include <iostream> #include < ...
Mybatis之整体描述
Mybatis在我看来最大的用处就是封装了jdbc,设置参数操作和获取解析结果集.同时控制了数据库链接等操作,大部分采用了反射来映射javabean对象来进行数据库操作. 1.接下来先整体介绍下主要的 ...
Javascript变长参数和默认参数
/* javascript 变长参数 * 实参少于形参: 剩下的参数如果没有默认值,将解析为undefined * 实参多于形参: 剩下的实参可以通过 "实参对象"-argumen ...
马婕 2014MBA专硕考试词汇每日一练(转)
2013-6-8 1. To ensure its sustained progress in economy, the government has _______ a series of poli ...
NetLink通信机制学习
Netlink套接字是用以实现用户进程与内核进程通信的一种特殊的进程间通信(IPC) ,在 Linux 2.4 版以后版本的内核中,几乎全部的中断过程与用户态进程的通信都是使用 netlink 套接字 ...
Shell脚本传递带有空格的参数[摘录自网络]
参数处理说明 $# 传递到脚本的参数个数 $* 以一个单字符串显示所有向脚本传递的参数 $$ 脚本运行的当前进程ID号 $! 后台运行的最后一个进程的ID号 $@ 与$#相同,但是使用时加引号,并在 ...
《Forward团队-爬虫豆瓣top250项目-开发文档》
码云地址:https://github.com/xyhcq/top250 模块功能:获取豆瓣top250网页的源代码,并分析. def getHTMLText(url,k): # 获取网页源代码 tr ...

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

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

随机推荐

热门专题