基于iscroll.js实现下拉刷新和上拉加载特效

现在已经不是纯Android独霸天下的时代了，H5嵌入Android的Hybrid混合开发是大势所趋。今天给大家带来的就是移动端中常见的“上拉刷新，下拉加载”特效，这个特效将会基于H5来实现。

先看下运行效果：

是不是有点小小的‘鸡冻’ ，它就是由我们今天要介绍的主人公‘iscroll.js’实现的，接下来我以最最简便的方式教给大家~~

实现步骤

一、准备好iscroll.js库

到官网下载即可：
https://github.com/cubiq/iscroll

二、搭建页面结构

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>iScroll 实例：下拉刷新，滚动翻页</title>
    <style type="text/css" media="all">
        body,ul,li {
            padding:0;
            margin:0;
            border:0;
        }

        body {
            font-size:12px;
            -webkit-user-select:none;
            -webkit-text-size-adjust:none;
            font-family:helvetica;
        }

        #header {
            position:absolute;
            top:0; left:0;
            100%;
            height:45px;
            line-height:45px;
            background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #fe96c9), color-stop(0.05, #d51875), color-stop(1, #7b0a2e));
            background-image:-moz-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
            background-image:-o-linear-gradient(top, #fe96c9, #d51875 5%, #7b0a2e);
            padding:0;
            color:#eee;
            font-size:20px;
            text-align:center;
        }

        #header a {
            color:#f3f3f3;
            text-decoration:none;
            font-weight:bold;
            text-shadow:0 -1px 0 rgba(0,0,0,0.5);
        }

        #footer {
            position:absolute;
            bottom:0; left:0;
            100%;
            height:48px;
            background-image:-webkit-gradient(linear, 0 0, 0 100%, color-stop(0, #999), color-stop(0.02, #666), color-stop(1, #222));
            background-image:-moz-linear-gradient(top, #999, #666 2%, #222);
            background-image:-o-linear-gradient(top, #999, #666 2%, #222);
            padding:0;
            border-top:1px solid #444;
        }

        #wrapper {
            position:absolute; z-index:1;
            top:45px; bottom:

基于iscroll.js实现下拉刷新和上拉加载特效

实现步骤

相关推荐