iscoll移动端滚动加载数据 -

01jiangwei01

浏览: 543027 次
性别:
来自: 北京

最近访客更多访客>>

chenxuezhou_yzl

robotmen

xx5333

qiangorqiang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

iscoll移动端滚动加载数据

博客分类：

mobile 框架

html

<!DOCTYPE html>
<html>
<head>
    <meta 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">

    <title>iScroll-5 DEMO: Pull to Refresh + Infinite Next Page load</title>

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

    <script type="text/javascript">

        var items_per_page = 10;
        var scroll_in_progress = false;
        var myScroll;
var pageNo = 0; //初始化，默认加载页数
function myLoadContent(){

if(pageNo=='end'){

return;
}
if(pageNo == 1){
page = page1;
list = page.pageData;
renderRow(list);
$('#wrapper').css({left: 0});
if(list.length >= items_per_page){
//初始化scoller
initScoller();
}else{
$('#wrapper .pullUp span').hide();

}

}

if(pageNo == 2){
page = page2;
list = page.pageData;
renderRow(list);
myScroll.refresh();

}
if(pageNo >=3){
pageNo='end'

}
}
function renderRow(list){
for(var i=0;i<list.length;i++){
var item = list[i];

$('#wrapper > #scroller > ul').append('<li>数据-'+item.id+'</li>');

}
}
function initScoller(){

pullUpEl = document.querySelector('#wrapper .pullUp');
            if (pullUpEl) {
                pullUpOffset = pullUpEl.offsetHeight;
            } else {
                pullUpOffset = 0;
            }
var offset = pullUpOffset;
myScroll = new IScroll('#wrapper', {
                probeType: 1,
                tap: true,
                click: false,
                preventDefaultException: {tagName: /.*/},
                mouseWheel: true,
                scrollbars: true,
                fadeScrollbars: true,
                interactiveScrollbars: false,
                keyBindings: false,
                deceleration: 0.0002,
                startY: (parseInt(offset) * (-1))
            });

            myScroll.on('scrollStart', function () {
                scroll_in_progress = true;
            });
            myScroll.on('scroll', function () {
if(pageNo=='end'){
$('.pullUp').addClass('loading').html('<span class="pullUpIcon"> </span><span class="pullUpLabel">已经是最后一条了</span>');
return;
}

                scroll_in_progress = true;


console.log("this.y="+this.y+";this.maxScrollY="+this.maxScrollY);
var testF1 = (this.y <= (this.maxScrollY + 200));
var testF2 = !pullUpEl.className.match('loading');

var r = testF1 && pullUpEl && testF2 ;
console.log("testF1="+testF1+";testF2="+testF2+";r="+r);
if(r) {
                        $('.pullUp').addClass('loading').html('<span class="pullUpIcon"> </span><span class="pullUpLabel">加载数据中。。。</span>');

pageNo ++;
myLoadContent();

                       // pullUpAction();
                    }
            });
            myScroll.on('scrollEnd', function () {
                console.log('scroll ended');
                setTimeout(function () {
                    scroll_in_progress = false;
                }, 100);
$(pullUpEl).removeClass('loading').html('');

            });

}





//初始化数据
        function loaded() {

            //load_content();
pageNo = 1;
myLoadContent();

        }

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

var page1 = {pageNo:0,pageSize:10,
pageData:[
{id:1,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:2,createdAt:'2018-01-10 10:10',action:'取款成功',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款成功'},
{id:3,createdAt:'2018-01-10 10:10',action:'课程退款',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'课程退款'},
{id:4,createdAt:'2018-01-10 10:10',action:'课程退款',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'课程退款'},
{id:5,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:6,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:7,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:8,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:9,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:10,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'}
]

}

var page2 = {pageNo:1,pageSize:10,
pageData:[
{id:11,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:12,createdAt:'2018-01-10 10:10',action:'取款成功',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款成功'},
{id:13,createdAt:'2018-01-10 10:10',action:'课程退款',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'课程退款'},
{id:14,createdAt:'2018-01-10 10:10',action:'课程退款',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'课程退款'},
{id:15,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:16,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:17,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:18,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:19,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'},
{id:20,createdAt:'2018-01-10 10:10',action:'取款申请',amount:'1260',avaliableMoney:'11000','frozeMoney':'1260',remark:'取款申请'}
]

}

    </script>

    <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: 9999px; /* Not a must - can be 0 - but it makes the appearance of the content a bit nicer */
            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: 80px;
            line-height: 80px;
            border-bottom: 1px solid #ccc;
            border-top: 1px solid #fff;
            background-color: #fafafa;
            font-size: 14px;
        }

        .pullDownLabel, .pullUpLabel {
            color: #999
        }

        .pullDown, .pullUp {
            background: #fff;
            height: 40px;
            line-height: 40px;
            font-weight: bold;
            font-size: 0.8em;
            color: #888
        }

        .pullDown .pullDownIcon, .pullUp .pullUpIcon {
            display: block;
            float: left;
            opacity: 0.4;
            width: 40px;
            height: 40px;
            background: url(pull_to_refresh.png) 0 0 no-repeat;
            -webkit-background-size: 40px 80px;
            -ms-background-size: 40px 80px;
            background-size: 40px 80px;
            -webkit-transition-property: -webkit-transform;
            -ms-transition-property: -webkit-transform;
            -webkit-transition-duration: 250ms;
            -ms-transition-duration: 250ms
        }

        .pullDown .pullDownIcon {
            -webkit-transform: rotate(0deg) translateZ(0);
            -ms-transform: rotate(0deg) translateZ(0)
        }

        .pullUp .pullUpIcon {
            -webkit-transform: rotate(-180deg) translateZ(0);
            -ms-transform: rotate(-180deg) translateZ(0)
        }

        .pullDown.flip .pullDownIcon {
            -webkit-transform: rotate(-180deg) translateZ(0);
            -ms-transform: rotate(-180deg) translateZ(0)
        }

        .pullUp.flip .pullUpIcon {
            -webkit-transform: rotate(0deg) translateZ(0);
            -ms-transform: rotate(0deg) translateZ(0)
        }

        .pullDown.loading .pullDownIcon, .pullUp.loading .pullUpIcon {
            background-position: 0 100%;
            -webkit-transform: rotate(0deg) translateZ(0);
            -ms-transform: rotate(0deg) translateZ(0);
            -webkit-transition-duration: 0ms;
            -ms-transition-duration: 0ms;
            -webkit-animation-name: loading;
            -ms-animation-name: loading;
            -webkit-animation-duration: 1s;
            -ms-animation-duration: 1s;
            -webkit-animation-iteration-count: infinite;
            -ms-animation-iteration-count: infinite;
            -webkit-animation-timing-function: linear;
            -ms-animation-timing-function: linear
        }

        @-webkit-keyframes loading {
            from {
                -webkit-transform: rotate(0deg) translateZ(0)
            }
            to {
                -webkit-transform: rotate(360deg) translateZ(0)
            }
        }

        @-ms-keyframes loading {
            from {
                -ms-transform: rotate(0deg) translateZ(0)
            }
            to {
                -ms-transform: rotate(360deg) translateZ(0)
            }
        }

    </style>
</head>
<body onload="loaded()">
<div id="header">iScroll</div>
<div id="wrapper">
    <div id="scroller">

        <ul></ul>
        <div class="pullUp"></div>
    </div>
</div>
<div id="footer"></div>
</body>
</html>

my-iscoll-demo.zip (128 KB)
下载次数: 0

分享到：

AESUtils | java ftp上传文件

2018-01-09 13:15
浏览 692
评论(0)
分类:互联网
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

iscoll移动端滚动加载数据

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

iscoll移动端滚动加载数据

评论

发表评论

相关推荐

nodejs 开发环境搭建

mobile框架

最近访客更多访客>>