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

最新推荐文章于 2024-04-03 17:49:18 发布
原创 最新推荐文章于 2024-04-03 17:49:18 发布 · 261 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Lungo #HTML5

本文介绍了一种在HTML5应用中实现自定义上下拉刷新的方法，通过对Lungo.js框架的扩展，支持了从底部向上刷新的功能。

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

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

       好吧！暂时找不到其它框架，那就自己动手修改一下吧皱眉

 

       由于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 <ina@tapquo.com> || @piniphone
 * @author Javier Jimenez Villar <javi@tapquo.com> || @soyjavi
 * @author fbchen <fbchen@fourbin.com>
 */
(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>

 

    效果如下：

    


 


 

 

 

 

 

 

fbchen
关注
一个移动开发框架Lungo.js
04-02
该源码Lungo.js是一款非常不错的移动开发框架，Lungo.js不但可以为开发者创建基于iOS、Android、Blackberry以及FirefoxOS平台的应用程序等，而且还可以支持开放的web标准，另外还拥有强大的JS API等，目前有新出不同的设备层，Lungo.js解决了其他的难题，可以很好的支持，还针对各个平台开发app变得越来越困难等，另外Lungo可以满足你对多平台开发的需求，并带来独一无二的的用户体验等；Lungo.js还具有包括布局、列表、数据分发、图标、触摸事件、滚动、通知以及按钮和颜色等功能，并且每项功能包含数量不等的主题等，喜欢的朋友可以下载研究一下。
Node.js-lungo-cli从命令行控制Lungo应用程序
08-10
总结来说，`lungo-cli`是Node.js和Lungo框架开发中的强大工具，它简化了项目的创建、调试和部署流程，让开发者能够更加专注于应用的功能实现，而不是繁琐的构建过程。通过熟练掌握`lungo-cli`的使用，可以更高效地...
一个HTML5移动Web开发框架 - Lungo.js
u013981767的专栏
02-05 1143
Lungo.js 是一个采用HTML5, CSS3 和JavaScript技术实现的移动Web应用程序开发框架。 利用这框架开发的应用程序可运行所有流行的平台包括：iOS, Android, Blackberry 和 WebOs。 它还支持触摸事件如：tap, double-tap和swipe。整个框架没有用到任何图片包括图标，所有都矢量化。 可以在这个框架中使用HTML5拥有的一些特性
Lungo.js - 构建响应式Web应用的HTML5框架
gitblog_00023的博客
03-14 489
Lungo.js - 构建响应式Web应用的HTML5框架 Lungo.js 是一个基于 HTML5、CSS3 和 JavaScript 的开源框架，用于构建响应式的 Web 应用程序。它提供了简单易用的 API，帮助开发者快速创建跨平台的应用，并支持离线存储和触摸事件。 为什么选择 Lungo.js？ 响应式设计：Lungo.js 内置了灵活的布局系统，可以自动适应不同设备的屏幕尺寸，使应用程...
lungo.js练习（一）
weixin_34343000的博客
05-18 200
为什么80%的码农都做不了架构师？>>> ...
Lungo 使用说明及心得 中文api —— JavaScript部分
weixin_33963594的博客
09-17 292
为什么80%的码农都做不了架构师？>>> ...
Lungo.js：一站式多平台移动应用开发框架
2. 对Web标准的支持：Lungo.js遵循开放的web标准，意味着它支持HTML5、CSS3和JavaScript等技术。这样，开发者可以利用他们对这些标准的熟悉程度来开发应用，同时享受现代Web技术带来的优势。 3. 强大的JS API：...
掌握Node.js：使用lungo-cli管理Lungo应用
Lungo.js是一个JavaScript库，它允许开发者使用HTML模板和JavaScript来创建单页应用程序（SPA）。通过Node.js与Lungo.js结合使用，开发者可以利用Node.js强大的服务器端能力以及Lungo.js提供的前端页面生成能力，...
精选资源
11个有用的移动网页开发App和HTML5框架
01-31
在过去的两年里，触屏设备飞速增长。iOS和Android设备让开发者和设计师开始重新思考他们的网页应用，以提供更好...Lungo.js不需要任何web服务器的支持就能帮助用户实现HTML5的功能，例如WebSQL,Geolocation，History，
LungoJS框架学习笔记——基本布局
fengzi9731的专栏
09-12 1274
LungoJS 框架根据html5新特性采用清晰的区块加条目（section+article）的布局方式。 首先创建一个HTML文件，然后将以下几个CSS和JS文件引入：
HTML5 移动开发框架，重磅消息
最新发布
m0_60635001的博客
04-03 957
Android学习PDF+架构视频+源码笔记高级架构技术进阶脑图、Android开发面试专题资料，高级进阶架构资料这几块的内容。非常适合近期有面试和想在技术道路上继续精进的朋友。本文已被CODING开源项目：《Android学习笔记总结+移动架构视频+大厂面试真题+项目实战源码》收录一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！
2020年Web前端工程师需要掌握的10款H5开发工具推荐
weixin_43703144的博客
12-01 1004
正所谓“工欲善其事必先利其器”，一名合格的Web前端开发工程师自然会用到不少能使其工作高效的工具。下面，就给大家分享Web前端开发需要掌握的10款H5开发工具！ 1、Lungo Lungo是一款基于HTML5的开发框架，专为想要设计、构建和共享跨设备应用的开发者而准备。支持开放的Web标准，如HTML5、CSS3和JavaScript；支持手机、电视以及桌面设备。拥有强大的JavaScript API：开发WebAPP应用有很多种方式，而不是一味的优化。Lungo提供了一个强大的API，这样你可以完全掌控自
Lungo 使用说明及心得 中文api —— 模型部分
weixin_33691700的博客
09-16 258
为什么80%的码农都做不了架构师？>>> ...
H5开发 第一天准备工作
LONG_IOS的博客
01-06 2627
很多想学html5的同学都不知道html5开发工具有哪些，具体哪一个最好用。 　　今天就为大家推荐几款html5开发工具。 　　hbuilder 　　hbuilder是DCloud推出的一款支持HTML5的Web开发IDE。快，是HBuilder的最大优势，通过完整的语法提示和代码输入法、代码块等，大幅提升HTML、js、css的开发效率。同时，它还包括最全面的语法库和浏览器兼容性数据。
QQ技术全攻略（原来简单的QQ，还隐藏着这么多秘密！）
游戏
01-16 3231
1、将您的QQ的在线状态发布在互联网上将您的QQ的在线状态发布在互联网上，不用加好友也可以聊天.将您的QQ/TM的在线状态发布在互联网上；点击 QQ在线，不用加好友也可以聊天；寻找商机，广交朋友，"互动状态"给您更便捷的交互体验。 您只需按以下步骤生成代码。"互动状态"，你也能随心设置...http://is.qq.com/webpresence/最下面就是俺的QQ互动状态显示,怎么样
关于html5拖拽中的一些坑
百岁如流富贵冷灰的博客
05-30 6205
难受，上头交代做的页面里有个拖拽的功能，网上其实有许多好用的拖拽插件，但是本着不拿嗟来之食，毅然决然的选择使用原生的js拖拽API，然后被坑惨了。。。。 1.首先是从body下拖拽到iframe中的     ☆需要注意，当使用a标签的target属性进行iframe切换时，iframe标签的src属性是不会变化的 &lt;a href="1.html" target="iframe"&gt...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值