文档章节

iscroll上拉加载、下拉刷新

s
 snecker
发布于 2015/01/22 00:04
字数 579
阅读 145
收藏 0
<!DOCTYPE html>
<html>
<head lang = "en">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>关 于</title>
    <link type="text/css" rel="stylesheet" href="../../style/public.css">
    <link type="text/css" rel="stylesheet" href="../../style/style.css">    
</head>
<body>
<div id="wrapper">
    <div id="scroller">
        <div id="pullDown">
            <span class="pullDownIcon"></span><span class="pullDownLabel">下拉刷新...</span>
        </div>
        <ul id="thelist">
            <li>
                <img src="img/page1_img1.jpg" />
            </li>
            <li>
                <img src="img/page1_img2.jpg" />
            </li>
            <li>
                <img src="img/page1_img3.jpg" />
            </li>
            <li>
                <img src="img/page1_img1.jpg" />
            </li>
            <li>
                <img src="img/page1_img2.jpg" />
            </li>
            <li>
                <img src="img/page1_img3.jpg" />
            </li>
        </ul>
        <div id="pullUp">
            <span class="pullUpIcon"></span><span class="pullUpLabel">上拉加载更多...</span>
        </div>
    </div>
    </div>


<script src="iscroll.js"></script>

<script>
    /**
       * 下拉刷新 (自定义实现此方法)
       * myScroll.refresh(); // 数据加载完成后,调用界面更新方法
       */
    function pullDownAction() {
        setTimeout(function () {
            var el, li, i;
            el = document.getElementById('thelist');
            //==========================================
            li = document.createElement('li');
            // li.innerText = 'Generated row ' + (++generatedCount);
            li.innerHTML = '<img src="' + 'http://pic.sogou.com/style2013/images/loading.gif' + '"/>';
            el.insertBefore(li, el.childNodes[0]);

            /*$.ajax({
                type: "GET",
                url: "LoadMore.ashx",
                data: { page: generatedCount },
                dataType: "json",
                success: function (data) {
                    var json = data;
                    $(json).each(function () {
                        li = document.createElement('li');
                        // li.innerText = 'Generated row ' + (++generatedCount);
                        li.innerHTML = '<img src="' + this.src + '"/>';
                        el.insertBefore(li, el.childNodes[0]);
                    })
                }
            });*/
            myScroll.refresh(); //数据加载完成后,调用界面更新方法  Remember to refresh when contents are loaded (ie: on ajax completion)
        }, 3000);  // <-- Simulate network congestion, remove setTimeout from production!
    }

    function pullUpAction() {
        setTimeout(function () {
            var el, li, i;
            el = document.getElementById('thelist');
            //==========================================
            li = document.createElement('li');
            // li.innerText = 'Generated row ' + (++generatedCount);
            li.innerHTML = '<img src="' + 'http://pic.sogou.com/style2013/images/icon!.gif' + '"/>';
            el.insertBefore(li, el.childNodes[0]);
            //============================================
            myScroll.refresh(); // 数据加载完成后,调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
        }, 1000); // <-- Simulate network congestion, remove setTimeout from production!
    }

    /**
       * 初始化iScroll控件
       */
    function loaded() {
        pullDownEl = document.getElementById('pullDown');
        pullDownOffset = pullDownEl.offsetHeight;
        pullUpEl = document.getElementById('pullUp');
        pullUpOffset = pullUpEl.offsetHeight;
        myScroll = new iScroll('wrapper', {
            scrollbarClass: 'myScrollbar', /* 重要样式 */
            useTransition: false,
            topOffset: pullDownOffset,
            onRefresh: function () {
                if (pullDownEl.className.match('loading')) {
                    pullDownEl.className = '';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
                } else if (pullUpEl.className.match('loading')) {
                    pullUpEl.className = '';
                    pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
                }
            },
            onScrollMove: function () {
                if (this.y > 5 && !pullDownEl.className.match('flip')) {
                    pullDownEl.className = 'flip';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = '松手开始更新...';
                    this.minScrollY = 0;
                } else if (this.y < 5 && pullDownEl.className.match('flip')) {
                    pullDownEl.className = '';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉刷新...';
                    this.minScrollY = -pullDownOffset;
                } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {
                    pullUpEl.className = 'flip';
                    pullUpEl.querySelector('.pullUpLabel').innerHTML = '松手开始更新...';
                    this.maxScrollY = this.maxScrollY;
                } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {
                    pullUpEl.className = '';
                    pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
                    this.maxScrollY = pullUpOffset;
                }
            },
            onScrollEnd: function () {
                if (pullDownEl.className.match('flip')) {
                    pullDownEl.className = 'loading';
                    pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';
                    pullDownAction(); // Execute custom function (ajax call?)
                } else if (pullUpEl.className.match('flip')) {
                    pullUpEl.className = 'loading';
                    pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
                    pullUpAction(); // Execute custom function (ajax call?)
                }
            }
        });
        setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
    }
    //初始化绑定iScroll控件
    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
    document.addEventListener('DOMContentLoaded', loaded, false);
</script>
</body>
</html>



本文转载自:http://www.jb51.net/article/51384.htm

s
粉丝 1
博文 43
码字总数 10092
作品 0
长沙
技术主管
私信 提问
html5下拉刷新上拉加载更多

iScroll控件使用了这个控件想做成局部的下拉刷新,上拉加载更多,但是没效果 就跟手机版的微博或说说那样,但是效果弄不出来 在这里感谢

ftt婷婷
2015/10/22
5.1K
2
iscroll总是:iScroll is not defined

我用angularjs+iScroll+bootstrap实现下拉刷新,但是在angualrJS的 控制器 里面每次 new iScroll的时候,总是报iScroll is not defined,请问这是怎么回事?...

放荡_蜗牛
2015/11/30
973
0
iscroll4文本框输入后会列表内容溢出导致上下滑动出现偏离

在iscroll4的例子上添加了几个文本框 然后发现在点击文本框的时候如果文本框的位置在弹出键盘的上方则没有事,如果弹出的键盘正好覆盖文本框 这个时候如果在文本框内输入文字会把iscroll4滑动...

sky止殇
2013/08/08
1K
2
iscroll模拟手机端下拉刷新功能时,打开初始化的时候默认要下拉一下。这个能够去掉吗

iscroll模拟手机端下拉刷新功能时,打开初始化的时候默认要下拉一下。这个能够去掉吗 就是打开list页面默认要下拉一下。 如题,哪位大神知道如何修改

一切勇归来
2016/01/20
717
1
使用iScroll时,input等不能输入内容的解决方法

最近做移动平台的应用,使用iscroll使屏幕上下滑动。发现当使用iscroll后,input等不能输入内容了。只要在iscroll.js文件中加入如下代码就ok了。 function allowFormsInIscroll(){ [].slice...

林宝基
2013/09/04
0
0

没有更多内容

加载失败,请刷新页面

加载更多

windows下cmd常用的命令

windows下常用的命令指示行: windows下 CMD比较常见的命令1. gpedit.msc-----组策略 2. sndrec32-------录音机 3. Nslookup-------IP地址侦测器 4. explorer-------打开资源管理器...

WinkJie
18分钟前
1
0
折叠手机适配布局

CSS Grid 设备相关参数 媒体查询 Chrome进行调试,创建相应的模拟机

lilugirl
19分钟前
0
0
Knative Eventing 中如何实现 Registry 事件注册机制

摘要: 在最新的 Knative Eventing 0.6 版本中新增了 Registry 特性, 为什么要增加这个特性, 该特性是如何实现的。针对这些问题,希望通过本篇文章给出答案。 背景 作为事件消费者,之前是...

阿里云云栖社区
23分钟前
0
0
安装 jemalloc for mysql

前言: Jemalloc 是BSD的提供的内存分配管理 安装依赖 $ yum install -y gcc$ yum install autoconf -y 安装 jemalloc $ git clone https://github.com/jemalloc/jemalloc$ cd jema......

Linux_Anna
33分钟前
1
0
linux下ctrl+c中止不了

有一台centos7的服务器,ctrl+c无效,并且tail -f也无效,只能关掉终端或者crtl+z放入后台再删掉,但是ping的时候使用ctrl+c是有效果的。 出现这种情况的原因可能是因为有人要使用ruby安装r...

gaolongquan
47分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部