isscroll插件实现下拉加载上啦刷新转

http://www.jb51.net/article/98394.htm

下面是别人的代码

<!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">

* {

    -webkit-box-sizing: border-box;

    -moz-box-sizing: border-box;

    box-sizing: border-box;

}  

html {

    -ms-touch-action: none;

}  

body,ul,li {

    padding: 0;

    margin: 0;

    border: 0;

}  

body {

    font-size: 12px;

    font-family: ubuntu, helvetica, arial;

    overflow: hidden; /* this is important to prevent the whole page to bounce */

}  

#header {

    position: absolute;

    z-index: 2;

    top: 0;

    left: 0;

    width: 100%;

    height: 45px;

    line-height: 45px;

    background: #CD235C;

    padding: 0;

    color: #eee;

    font-size: 20px;

    text-align: center;

    font-weight: bold;

}  

#footer {

    position: absolute;

    z-index: 2;

    bottom: 0;

    left: 0;

    width: 100%;

    height: 48px;

    background: #444;

    padding: 0;

    border-top: 1px solid #444;

}  

#wrapper {

    position: absolute;

    z-index: 1;

    top: 45px;

    bottom: 48px;

    left: 0;

    width: 100%;

    background: #ccc;

    overflow: hidden;

}  

#scroller {

    position: absolute;

    z-index: 1;

    -webkit-tap-highlight-color: rgba(0,0,0,0);

    width: 100%;

    -webkit-transform: translateZ(0);

    -moz-transform: translateZ(0);

    -ms-transform: translateZ(0);

    -o-transform: translateZ(0);

    transform: translateZ(0);

    -webkit-touch-callout: none;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

    user-select: none;

    -webkit-text-size-adjust: none;

    -moz-text-size-adjust: none;

    -ms-text-size-adjust: none;

    -o-text-size-adjust: none;

    text-size-adjust: none;

}  

#scroller ul {

    list-style: none;

    padding: 0;

    margin: 0;

    width: 100%;

    text-align: left;

}  

#scroller li {

    padding: 0 10px;

    height: 40px;

    line-height: 40px;

    border-bottom: 1px solid #ccc;

    border-top: 1px solid #fff;

    background-color: #fafafa;

    font-size: 14px;

}

#pullDown,#pullUp,.pulldown-tips{

    height:40px;

    line-height:40px;

    text-align:center;

}

    .pulldown-tips{

        position:absolute;

        top:-40px;

        left:0;

        width:100%;

    }  

</style>

</head>

<body onload="load()">

    <div id="header">iScroll</div>

    <div id="wrapper">

        <div id="scroller">

        <div id="pullDown" class=""><div class="pullDownLabel"></div></div>

            <div class="pulldown-tips">下拉刷新</div>

            <ul id="list">

                <li>Pretty row 1</li>

                <li>Pretty row 2</li>

                <li>Pretty row 3</li>

                <li>Pretty row 4</li>

                <li>Pretty row 5</li>

                <li>Pretty row 6</li>

                <li>Pretty row 7</li>

                <li>Pretty row 8</li>

                <li>Pretty row 9</li>

                <li>Pretty row 10</li>

                <li>Pretty row 11</li>

                <li>Pretty row 12</li>

                <li>Pretty row 13</li>

                <li>Pretty row 14</li>

                <li>Pretty row 15</li>

                <li>Pretty row 16</li>

                <li>Pretty row 17</li>

                <li>Pretty row 18</li>

                <li>Pretty row 19</li>

                <li>Pretty row 20</li>

            </ul>

            <div id="pullUp" class="">

            <div class="pullUpLabel">加载更多</div>

            </div>

        </div>

    </div>  

    <div id="footer"></div>

    <script type="text/javascript" src="build/jquery-3.2.1.min.js"></script>

    <script type="text/javascript" src="build/iscroll-probe.js"></script>

    <script type="text/javascript">  

        function load () {

            var myScroll,

                pullDown = $("#pullDown"),

                pullUp = $("#pullUp"),

                pullDownLabel = $(".pullDownLabel"),

                pullUpLabel = $(".pullUpLabel"),

                container = $('#list'),

                loadingStep = 0;//加载状态0默认，1显示加载状态，2执行加载数据，只有当为0时才能再次加载，这是防止过快拉动刷新  

                pullDown.hide();

                pullUp.hide();  

                myScroll = new IScroll("#wrapper", {

                    scrollbars: true,

                    mouseWheel: false,

                    interactiveScrollbars: true,

                    shrinkScrollbars: 'scale',

                    fadeScrollbars: true,

                    scrollY:true,

                    probeType: 2,

                    bindToWrapper:true

                });

                myScroll.on("scroll",function(){

                    if(loadingStep == 0 && !pullDown.attr("class").match('refresh|loading') && !pullUp.attr("class").match('refresh')){

                        if(this.y > 40){//下拉刷新操作

                            $(".pulldown-tips").hide();

                            pullDown.addClass("refresh").show();

                            pullDownLabel.text("松手刷新数据");

                            loadingStep = 1;

                            myScroll.refresh();

                        }else if(this.y < (this.maxScrollY - 14)){//上拉加载更多

                            pullUp.addClass("refresh").show();

                            pullUpLabel.text("正在载入");

                            loadingStep = 1;

                            pullUpAction();

                        }

                    }

                });

                myScroll.on("scrollEnd",function(){

                    if(loadingStep == 1){

                        if( pullDown.attr("class").match("refresh") ){//下拉刷新操作

                            pullDown.removeClass("refresh").addClass("loading");

                            pullDownLabel.text("正在刷新");

                            loadingStep = 2;

                            pullDownAction();

                        }

                    }

                });  

            function pullDownAction(){

                setTimeout(function(){

                    var li, i;

                    for (i = 0,li = ""; i < 3; i++) {

                        li += "<li>" + "new Add " + new Date().toLocaleString() + " ！" + "</li>";

                    }

                    container.prepend(li);

                    pullDown.attr('class','').hide();

                    myScroll.refresh();

                    loadingStep = 0;

                    $(".pulldown-tips").show();

                },1000);

            }

            function pullUpAction(){

                setTimeout(function(){

                    var li, i;

                    for (i = 0,li = ""; i < 3; i++) {

                        li += "<li>" + "new Add " + new Date().toLocaleString() + " ！" + "</li>";

                    }

                    container.append(li);

                    pullUp.attr('class','').hide();

                    myScroll.refresh();

                    loadingStep = 0;

                },1000);

            }  

            document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);

            }  

    </script>

</body>

</html>

isscroll插件实现下拉加载上啦刷新转的更多相关文章

移动端好用的下拉加载上拉刷新插件 dropload插件
入了很多下拉加载上拉刷新的插件,但是感觉都不好用,知道最近遇到这款dropload的插件,瞬间打开新世界的大门啊,无卡顿简单易用可配置 <!doctype html> <html&g ...
基于Zepto移动端下拉加载（刷新），上拉加载插件开发
写在前面:本人水平有限,有什么分析不到位的还请各路大神指出,谢谢. 这次要写的东西是类似于<今日头条>的效果,下拉加载上啦加载,这次做的效果是简单的模拟,没有多少内容,下面是今日头条的移动 ...
关于MJRefresh的下拉加载数据bug
当没有更多数据的时候显示NoMoreData 我的理解是先结束刷新再显示没有更多今天之前一直没发现有问题贴之前的代码 [self.collectionView reloadData]; [self ...
集成iscroll 下拉加载更多 jquery插件
一个插件总是经过了数月的沉淀,不断的改进而成的.最初只是为了做个向下滚动,自动加载的插件.随着需求和功能的改进,才有了今天的这个稍算完整的插件. 一.插件主功能: 1.下拉加载 2.页面滚动到底部自动 ...
iscroll.js实现上拉刷新，下拉加载更多，应用技巧项目实战
上拉刷新,下拉加载更多...仿原生的效果----iscroll是一款做滚动效果的插件,具体介绍我就不废话,看官方文档,我只写下我项目开发的一些用到的用法: (如果不好使,调试你的css,想必是个很蛋疼 ...
原生JS下拉加载插件分享。
无聊写了一个JS下拉加载插件,有需要的可以下载. // 使用 // new ManDownLoad("#ul","json/load.json",functio ...
iscroll5 上拉，下拉加载数据
我这里的思路是上拉时候只是加载第一页的内容,可根据实际情况修改其中的代码.请勿照搬.样式没怎么调,可以加载gif动画.1.没有数据时候,下拉可以加载数据.2.没有数据时候,点击也可以加载数据.3.其余 ...
MUI - 上拉刷新/下拉加载
新闻信息列表必备的功能,支持Table,Ul等列表. 以下是DIV版本,在安卓端或者ios端必须使用双webview模式,传送门:http://dev.dcloud.net.cn/mui/pulldo ...
jQuery模拟原生态App上拉刷新下拉加载
jQuery模拟原生态App上拉刷新下拉加载效果代码,鼠标上拉时会显示loading字样,并且会模拟加载一条静态数据,支持触屏设备使用. <!doctype html> <html ...

随机推荐

Leetcode题库——14.最长公共前缀
@author: ZZQ @software: PyCharm @file: longestCommonPrefix.py @time: 2018/9/16 17:50 要求:查找字符串数组中的最长公 ...
Gradle入门（1）：安装
在Ubuntu下,执行以下命令: sudo apt-get install gradle 安装完成后,执行命令: gradle -v 得到以下信息: Picked up _JAVA_OPTIONS: ...
angularJS1笔记-(2)-$watch方法监听变量的变化
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
springmvc+mybatis 实现分页查询
为简化分页功能,设计了一个分页的JSP标签,只需要在页面使用分页标签,就可以完成所有页面的分页功能. 1. 项目结构和数据库设计 (1) 项目结构: (2) 数据库设计 2. PageModel.ja ...
PGM学习之二 PGM模型的分类与简介
废话:和上一次的文章确实隔了太久,希望趁暑期打酱油的时间,将之前学习的东西深入理解一下,同时尝试用Python写相关的机器学习代码. 一 PGM模型的分类通过上一篇文章的介绍,相信大家对PGM的定义 ...
NIO - 三大组件
NIO 概述 NIO有三个核心组件: 通道(Channels) 缓存(Buffers) 选择器(Selectors) 实际上,NIO的组件和类远不止这三个,但这个三个组件是核心.至于其它组件,例如Pi ...
java链表的各种操作
java里面没有指针的说法,所以初始化的时候,就是新建一个null节点就是一个空链表了.//C里面链表会有头指针,头指针指向头节点如果想向空链表插入第一个节点,直接head=newNode: 注意的 ...
linux 批量更改文件名 rename 命令
rename 的典型应用: # rename $1 $2 $3# $1: 要被取代的關鍵字# $2: 新的關鍵字# $3: 檔名符合這個規則的才取代 # 把 IMG001.jpg, IMG002.jp ...
Navicat使用教程：获取MySQL中的行数（第1部分）
下载Navicat Premium最新版本 Navicat Premium是一个可连接多种数据库的管理工具,它可以让你以单一程序同时连接到MySQL.Oracle及PostgreSQL数据库,让管理不 ...
codevs1839洞穴勘测
题目链接:http://codevs.cn/problem/1839/ 题目描述 Description 辉辉热衷于洞穴勘测.某天,他按照地图来到了一片被标记为JSZX的洞穴群地区.经过初步勘测,辉辉 ...

isscroll插件 实现下拉加载 上啦刷新 转

isscroll插件 实现下拉加载 上啦刷新 转的更多相关文章

随机推荐

热门专题

isscroll插件实现下拉加载上啦刷新转

isscroll插件实现下拉加载上啦刷新转的更多相关文章