安科网

使用Lungo.js支持HTML5实现类似微博的“拖拽刷新”功能

sweetga

sweetga

2014-10-26

关注 关注

       最近要在手机端的HTML5里面实现一个类似新浪微博的“Pull & Refresh”的功能，时间紧迫，一时找不到比较好用的框架，发现Lungo还不错，于是试用了一下，发现还不错，轻量小巧。

       Lungo很多函数与JQuery差不多，比如mix()、isOwnProperty()、toType()，另外因为我使用BootStrap，很多功能与Lungo重复，因此Lungo的很多组件我用不上，没有细致的研究。不过，最坑爹的是，我要用的Pull & Refresh它只支持从顶部下拉刷新，不支持从底部往上刷新！

       好吧！暂时找不到其它框架，那就自己动手修改一下吧使用Lungo.js支持HTML5实现类似微博的“拖拽刷新”功能

       由于Lungo的css与Bootstrap的css冲突了，没有全部引用Lungo的css，并且自己加了不少样式，所以单独出来，只包含Pull & Refresh的部分，代码如下：

/* Pull & Refresh */
body>section.show {
    -webkit-box-ordinal-group: 2;
    -moz-box-ordinal-group: 2;
    -ms-box-ordinal-group: 2;
    -o-box-ordinal-group: 2;
    box-ordinal-group: 2;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-box;
    display: -o-box;
    display: box;
    position: relative;
}

body>aside.show>article.active.pull,
body>section.show>article.active.pull,
body>aside.hide>article.active.pull,
body>section.hide>article.active.pull,
body>aside.hiding>article.active.pull,
body>section.hiding>article.active.pull
    {
    -webkit-transition-property: transform;
    -moz-transition-property: transform;
    -ms-transition-property: transform;
    -o-transition-property: transform;
    transition-property: transform;
    -webkit-transition-duration: 500ms;
    -moz-transition-duration: 500ms;
    -ms-transition-duration: 500ms;
    -o-transition-duration: 500ms;
    transition-duration: 500ms
}

section.show>[data-control="pull"]>.loading {
    position: relative;
    width: 25px;
    color: #ff8612;
    font-size: 12px;
    line-height: 1; /* 1倍行距，否则不能居边对齐 */
}

section.hide>[data-control="pull"] {
    display: none
}

section.show>[data-control="pull"] {
    position: absolute;
    z-index: -1;
    top: 0;
    line-height: 60px;
    width: 100%;
    height: 80px;
    padding: 10px 0;
    text-align: center;
}

section.show>[data-control="pull"]>.icon {
    display: inline-block;
    width: 25px;
    color: #ff8612;
    font-size: 12px;
    line-height: 1;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

section.show>[data-control="pull"]>.loading {
    display: none;
    left: 0%
}

section.show>[data-control="pull"]>.msg {
    position: relative;
    color: #ff8612;
    font-size: 12px;
    font-weight: normal;
    line-height: 1; /* 1倍行距，否则不能居边对齐 */
    display: inline-block;
}

section.show>[data-control="pull"].rotate>.icon {
    -webkit-transform: rotate(-180deg);
    -moz-transform: rotate(-180deg);
    -ms-transform: rotate(-180deg);
    -o-transform: rotate(-180deg);
    transform: rotate(-180deg);
    -webkit-transition: all .2s ease-in-out;
    -o-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}

section.show>[data-control="pull"].refresh>.icon {
    display: none
}

section.show>[data-control="pull"].refresh>.loading {
    display: inline-block
}

section.show>[data-control="pull"].pulling-down {
    top: 0;
    bottom: auto;
}
section.show>[data-control="pull"].pulling-up {
    top: auto;
    bottom: 0;
}

section.show>[data-control="pull"].pulling-down .pullup.icon {
    display: none;
}
section.show>[data-control="pull"].pulling-up .pulldown.icon {
    display: none;
}

section.show>[data-control="pull"].pulling-down>.icon,
 section.show>[data-control="pull"].pulling-down>.loading,
 section.show>[data-control="pull"].pulling-down>.msg {
    vertical-align: top;
}

section.show>[data-control="pull"].pulling-up>.icon,
 section.show>[data-control="pull"].pulling-up>.loading,
 section.show>[data-control="pull"].pulling-up>.msg {
    vertical-align: bottom;
}

/* Pull & Refresh end */

    然后，重新实现了Pull组件，要用的话可以将如下代码替换Lungo.js中与Pull相关的那部分，JavaScript代码如下：

/**
 * Creates a instance of Pull & Refresh Element。<br>
 * 增加功能：在原来的Pull Down & Refresh的基础上，支持Pull Up & Refresh。
 * 
 * @namespace Lungo.Element
 * @class Pull
 * @version 1.0
 * 
 * @author Ignacio Olalde <[email protected]> || @piniphone
 * @author Javier Jimenez Villar <[email protected]> || @soyjavi
 * @author fbchen <[email protected]>
 */
(function() {
    // 修改loading的样式
    Lungo.Attributes['loading'] = {
        selector : "*",
        html : '<span class="loading {{value}}"></span>'
    };
    Lungo.Attributes['pull'] = {
        selector : "*",
        html : '<div data-control="pull" data-icon="pulldown {{value}}" data-loading="fa fa-spinner fa-spin"><span class="msg"></span></div>'
    };
    
    Lungo.Element.Pull = function(element_selector, config_data) {
        var ANIMATION_TIME, CONFIG_BASE, CONTAINER, CURRENT_DISTANCE, ELEMENT,
            MAX_HEIGHT, REFRESHING, REFRESHING_HEIGHT, PULLING_DOWN,
            hide, _blockGestures, _getTouchY, _handlePullEnd, _handlePulling, _moveElementTo,
            _refreshStart, _setContainerLoading, _setContainerOnPulling, _setContainerTitle,
            UP = void 0,
            DOWN = void 0,
            isOwnProp = Lungo.Core.isOwnProperty,
            pullUpIcon;
        REFRESHING_HEIGHT = 68;
        MAX_HEIGHT = 80;
        ANIMATION_TIME = 300;
        CURRENT_DISTANCE = 0;
        PULLING_DOWN = true;
        REFRESHING = false;
        ELEMENT = $$(element_selector);
        CONTAINER = ELEMENT.siblings("div[data-control=\"pull\"]");
        CONFIG_BASE = {
            onPull : "Pull down to refresh",
            onRelease : "Release to...",
            onRefresh : "Loading...",
            callback : void 0
        };
        
        // 分出pull down、pull up的配置，为了向后兼容，默认都是pull down
        UP = Lungo.Core.mix(CONFIG_BASE, config_data['up']);
        DOWN = Lungo.Core.mix(CONFIG_BASE, config_data['down']);
        if (!isOwnProp(config_data, 'up') && !isOwnProp(config_data, 'down')) {
            DOWN = Lungo.Core.mix(CONFIG_BASE, config_data);
        }
        
        // 注入data-pullup图标
        pullUpIcon = UP.icon || ELEMENT.parent().data('pullup');
        if (pullUpIcon) {
            CONTAINER.prepend('<span class="pullup icon ' + pullUpIcon + '"></span>');
        }
        
        hide = function() {
            _moveElementTo(0, true);
            setTimeout((function() {
                        REFRESHING = false;
                        CONTAINER.attr("class", "");
                        return ELEMENT[0].removeEventListener("touchmove",
                                _blockGestures, true);
                    }), ANIMATION_TIME);
            return CURRENT_DISTANCE = 0;
        };
        _moveElementTo = function(posY, animate) {
            var newPos;
            newPos = Math.abs(posY) > MAX_HEIGHT ? (posY < 0 ? -1 * MAX_HEIGHT : MAX_HEIGHT) : posY;
            if (animate) {
                ELEMENT.addClass("pull");
            } else {
                ELEMENT.removeClass("pull");
            }
            ELEMENT.style("-webkit-transform", "translate(0, " + newPos + "px)");
            if (animate) {
                return setTimeout((function() {
                            return ELEMENT.removeClass("pull");
                        }), ANIMATION_TIME);
            }
        };
        _refreshStart = function(event) {
            REFRESHING = true;
            ELEMENT[0].addEventListener("touchmove", _blockGestures, true);
            _setContainerTitle(_getConf().onRefresh);
            _setContainerLoading(true);
            _moveElementTo(PULLING_DOWN ? REFRESHING_HEIGHT : -1 * REFRESHING_HEIGHT, true);
            if (_getConf().callback) {
                return _getConf().callback.apply(this);
            }
        };
        _setContainerTitle = function(title) {
            return CONTAINER.find(".msg").html(title);
        };
        _setContainerLoading = function(op) {
            _setContainerPosition();
            if (op) {
                return CONTAINER.addClass("refresh");
            } else {
                return CONTAINER.removeClass("refresh");
            }
        };
        _setContainerOnPulling = function(op) {
            _setContainerPosition();
            if (op) {
                return CONTAINER.addClass("rotate");
            } else {
                return CONTAINER.removeClass("rotate");
            }
        };
        _setContainerPosition = function() {
            if (PULLING_DOWN) {
                CONTAINER.removeClass("pulling-up").addClass("pulling-down");
            } else {
                CONTAINER.removeClass("pulling-down").addClass("pulling-up");
            }
        }
        _getConf = function() {
            return PULLING_DOWN ? DOWN : UP;
        };
        _blockGestures = function(touchEvent) {
            return touchEvent.preventDefault();
        };
        _handlePulling = function(event) {
            _moveElementTo(PULLING_DOWN ? CURRENT_DISTANCE : -1 * CURRENT_DISTANCE, false);
            _setContainerLoading(false);
            if (CURRENT_DISTANCE > REFRESHING_HEIGHT) {
                _setContainerTitle(_getConf().onRelease);
                return _setContainerOnPulling(true);
            } else {
                _setContainerTitle(_getConf().onPull);
                return _setContainerOnPulling(false);
            }
        };
        _handlePullEnd = function(event) {
            if (CURRENT_DISTANCE > REFRESHING_HEIGHT) {
                _refreshStart();
            } else {
                hide();
            }
            return this;
        };
        _getTouchY = function(event) {
            if ($$.isMobile()) {
                return event.touches[0].pageY;
            } else {
                return event.pageY;
            }
        };
        (function() {
            var INI_Y, STARTED, dt;
            STARTED = false;
            INI_Y = 0;
            return ELEMENT.bind("touchstart", function(event) {
                        if (ELEMENT[0].scrollTop <= 1) {
                            STARTED = true;
                            INI_Y = _getTouchY(event);
                        }
                        return true;
                    }).bind("touchmove", function(event) {
                        var current_y;
                        if (!REFRESHING && STARTED) {
                            current_y = _getTouchY(event);
                            dt = current_y - INI_Y;
                            PULLING_DOWN = dt > 0;
                            CURRENT_DISTANCE = Math.abs(dt);
                            _handlePulling(event);
                            if (event.cancelable !== false) {
                                event.preventDefault();
                            }
                        }
                        return true;
                    }).bind("touchend", function() {
                        if (STARTED) {
                            _handlePullEnd();
                        }
                        STARTED = false;
                        return true;
                    });
        })();
        return {
            hide : hide
        };
    };

}).call(this);

     最后是HTML测试页面，模拟手机端的“拖拽”功能，可以用Chrome打开，用浏览器自带的“开发者工具”，切换到Device模式调试。HTML页面如下：

    

<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Pull &amp; Refresh</title>

    <!-- Bootstrap -->
    <link type="text/css" rel="stylesheet" href="./js/bootstrap3.2/css/bootstrap.min.css">
    <link type="text/css" rel="stylesheet" href="./css/font-awesome-4.2.0/css/font-awesome.min.css">
    <link type="text/css" rel="stylesheet" href="./css/zyb/app.css">
    <style type="text/css">
    .article {
        background-color: beige;
    }
    h1 {
        background-color: azure;
        margin-bottom: 0;
        margin-top: 100px;
    }
    </style>
</head>
<body>
<h1>测试下拉刷新功能</h1>


<!-- 内容列表 -->
<section id="articleList" data-transition="slide" data-pull="fa fa-long-arrow-down" data-pullup="fa fa-long-arrow-up">
    <article class="article">
        <div title="下拉文章内容刷新">
            文章内容<br>
            文章内容<br>
            文章内容<br>
            文章内容<br>
        </div>
    </article>
</section>

<script type="text/javascript" src="./js/jquery/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="./js/bootstrap3.2/js/bootstrap.min.js"></script>
<!-- 支持 Pull & Refresh -->
<script type="text/javascript" src="./js/quojs-2.3.6/quo.js"></script>
<script type="text/javascript" src="./js/lungo-2.2.1/lungo-1.js"></script>
<script>
$(function(){
    
    Lungo.init({});
    var pull_example = new Lungo.Element.Pull('#articleList article', {
        down: {
        	onPull: '下拉刷新',      // Text on pulling
            onRelease: '释放更新',   // Text on releasing
            onRefresh: '加载中...',  // Text on refreshing
            callback: function() { // Action on refresh
                //alert('Pull & Refresh completed!');
                setTimeout(function() {
                    pull_example.hide();
                }, 3000);
            }
        },
        up: {
            onPull: '上推刷新',      // Text on pulling
            onRelease: '释放更新',   // Text on releasing
            onRefresh: '加载中...',  // Text on refreshing
            callback: function() { // Action on refresh
                //alert('Pull & Refresh completed!');
                setTimeout(function() {
                    pull_example.hide();
                }, 3000);
            }
        }
    });
    
});
</script>
</body>
</html>

    效果如下：

    
使用Lungo.js支持HTML5实现类似微博的“拖拽刷新”功能


 
使用Lungo.js支持HTML5实现类似微博的“拖拽刷新”功能


 
使用Lungo.js支持HTML5实现类似微博的“拖拽刷新”功能
 

html5 box transition

sweetga

sweetga

0 关注 0 粉丝 0 动态

关注 关注

相关推荐

一篇文章带你了解HTML5 MathML

HTML5 可以在文档中使用 MathML 元素，对应的标签是 ... 。MathML 是数学标记语言，是一种基于XML的标准，用来在互联网上书写数学符号和公式的置标语言。大部分浏览器都支持 MathML 标签，如果你的浏览器不支持该标签，可以使用最新版的

wusiye 2020-10-23

HTML5标签2

表格的现在还是较为常用的一种标签，但不是用来布局，常见处理、显示表格式数据。在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...

gufudhn 2020-08-09

HTML 5 &lt;input&gt; 标签

<input> 标签规定用户可输入数据的输入字段。根据不同的 type 属性，输入字段有多种形态。输入字段可以是文本字段、复选框、密码字段、单选按钮、按钮等等。在 HTML 4.01 中，"align" 属性已被废弃，HTM

nercon 2020-08-01

HTML5的新语义和新结构元素

自1999年以后HTML 4.01 已经改变了很多,今天，在HTML 4.01中的几个已经被废弃，这些元素在HTML5中已经被删除或重新定义。为了更好地处理今天的互联网应用，HTML5添加了很多新元素及功能，比如: 图形的绘制，多媒体内容，更好的页面结构，

swiftwwj 2020-07-21

HTML5中修改表单验证默认提示语句

HTML5中针对表单新增的验证属性如required、pattern以及一些特定input类型，当验证不通过时，都有默认的提示语句，但实践中发现并不怎么友好，因此，需要自定义提示语句，使用setCustomValidity()。在此之前，需要介绍一下表单的

nercon 2020-07-16

indexedDB 数据库_html5中Web离线数据库的使用

在html5 的本地存储中，有一种叫 indexedDB 的数据库，该数据库是一种存储在客户端本地的 NoSQL数据库，它可以存储大量的数据。web Storage可以方便灵活的在本地存取简单数据，但是对于大量结构化存储，indexedDB 的优势就更加明

饮马天涯 2020-07-05

[Javascript] HTML5 DOM project

<p>You have <span class="todos-count"></span> items</p>. <button type="button" cl

Lophole 2020-06-28

Html5—— &lt;input&gt; autocomplete 属性

autocomplete 属性是 HTML5 中的新属性。autocomplete 属性规定输入字段是否应该启用自动完成功能。当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项。即，当你输入过一次，提交后，下次再点击输入框时，会

gufudhn 2020-06-12

疯狂HTML5 CSS 3 JavaScript讲义 (李刚) 高清PDF扫描版 279M完整版下载

《疯狂html 5/css 3/javascript讲义》的定位是一本前端开发的“实战性”图书，因此在介绍各知识点时并不是简单地停留在知识点层面阐述，而是结合了大量实例来让读者对照练习、学以致用。该游戏综合运用了html 5的绘图支持、客户端存储等技术，具

csstpeixun 2020-06-11

Vue.Js（html5） + Java实现文件分片上传

代码从项目中剥离修改，未经测试，仅提供思路。let bufferLength = 1024 * 1024 * 5;需要注意的是，Blob.slice,文件块包含start指向的字节，而不包含end指向的字节，在使用时要注意Blob的边界。使用ByteBuf

huzijia 2020-06-09

[JavaScript] HTML5 播放hls流媒体视频流

PC端chrome，IE，Firefox以及集成以上内核的各种浏览器，以及旧版的Android SDK的webview 不能播放

WebVincent 2020-06-06

html5 video视频，本地环境好的，线上环境，不能播放

本地环境ok，发布到线上不能播放。之前看这个视频，把video放在public文件夹下的。

niehanmin 2020-06-03

HTML5

万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言的第五次重大修改，作为新HTML语言，具有新的元素、属性和行为。<source src="./media/snow.ogg" type="audio.mpeg&

行吟阁 2020-05-30

HTML5中History.back()页面后退刷新页面

在开发中经常会遇到在一个页面操作完返回上一个页面，此时要求上个页面展示最新数据的需求。　　返回了A1页面同时A1页面进行了刷新！

qsdnet我想学编程 2020-05-26

分享一些酷酷的特效，希望你也能够喜欢

id=ha200bcjbb畜牧资讯官方app页面模板。新闻资讯手机模板html下载。id=ha202bhcib简单的手机绑定银行卡页面，手机添加银行卡信息列页面模板 。id=ha2bh01a2jcss3 Animation属性制作夜晚的景色搭配悬浮发光圆点

gufudhn 2020-05-25

这些例子很炫，感兴趣的童鞋可以了解一下

id=kja1abajb黑色通用的网络品牌设计公司介绍html5单页模板，广告品牌设计公司网站单页模板。echarts中国地图城市区块选择代码点击》echarts中国地图城市区块选择代码html5基于echarts.js地图插件制作中国地图点击选择城市弹出

qsdnet我想学编程 2020-05-19

HTML5 Web SQL 数据库

Web SQL 数据库 API 并不是 HTML5 规范的一部分，但是它是一个独立的规范，引入了一组使用 SQL 操作客户端数据库的 APIs。如果你是一个 Web 后端程序员，应该很容易理解 SQL 的操作。你也可以参考我们的 SQL 教程，了解更多数据

suixinsuoyu 2020-05-15

HTML5 服务器发送事件(Server-Sent Events)

HTML5 服务器发送事件允许网页获得来自服务器的更新。以前也可能做到这一点，前提是网页不得不询问是否有可用的更新。所有主流浏览器均支持服务器发送事件，除了 Internet Explorer。创建一个新的 EventSource 对象，然后规定发送更新的

HSdiana 2020-05-15

HTML5 Web Workers

web worker 是运行在后台的 JavaScript，不会影响页面的性能。当在 HTML 页面中执行脚本时，页面的状态是不可响应的，直到脚本已完成。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行。Inter

PioneerFan 2020-05-15

HTML5 应用程序缓存

使用 HTML5，通过创建 cache manifest 文件，可以轻松地创建 web 应用的离线版本。HTML5 引入了应用程序缓存，这意味着 web 应用可进行缓存，并可在没有因特网连接时进行访问。减少服务器负载 - 浏览器将只从服务器下载更新过或更改

GimmeS 2020-05-15
sweetga

sweetga

W3CSchool教程
HTML 教程
CSS 教程
Bootstrap 教程
Javascript 教程
jQuery 教程
后端教程
C 教程
Java 教程
PHP 教程
Python 教程
Go 教程
移动开发
Android 教程
Swift 教程
Kotlin 教程
jQuery Mobile 教程
ionic 教程
关于我们
新闻动态
联系方式
招聘英才
安科实验室
帮助与反馈

安科网(Ancii)，中国第一极客网

Copyright © 2013 - 2019 Ancii.com

京ICP备18063983号 京公网安备11010802014868号