pulldown.js

var pullrefresh = {

        /*++++++++++++++ 初始化 +++++++++++++*/

        init: function (data) {
            var self = this;
            this.generatedCount = 0;

            document.addEventListener('DOMContentLoaded', function () {
                setTimeout(function () {
                    self.loaded(data)
                }, 200);
            }, false);
        },

        /*++++++++++++++ 加载数据 +++++++++++++*/

        pullRefreshAction : function (data) {
            //模拟ajax
            var self = this,
                temp = "",
                list = $("#thelist");
            $.each(data.list,function (idx,obj) {

                temp += '<a class="nbd" href=""><li class="ui-listall clearfix">'
                +'<div class="gong-hd"><img class="pic-img" src="/statics/images/v3/mobile/mfstar/img/luo1.png"></div>'
                +'<dl class="gong-bd"><dt><h1 class="gong-title">'+obj+'</h1></dt> <dd><span class="fon-color">剩余&nbsp;30</span>/200</dd>'
                +'<dd class="list-con-size">是一款极为简单的平台过关游戏非常好玩</dd> </dl>'
                +'<div class="gong-ft"><span class="icon-enter-two"></span></div> </li> </a>'

            })

            list.last().append(temp);
            myScroll.refresh();

        },

         /*++++++++++++++ 加载完成 +++++++++++++*/

        loaded : function (data) {
            var self = this,
                pullUpEl = document.getElementById('pullUp'),
                pullUpOffset = pullUpEl.offsetHeight;

                myScroll = new iScroll('wrapper', {
                    useTransition: true,
                    //topOffset: pullUpOffset,
                    //向下拉&& 向上拉 更新文档
                    vScrollbar:false, //隐藏滚动条
                    //zoom:true,
                    onRefresh: function () {
                        if (pullUpEl.className.match('loading')) {
                            pullUpEl.className = '';
                            pullUpEl.querySelector('.pullUpLabel').innerHTML = '上拉加载更多...';
                        }
                    },

                    /*++++++++++++++ 下拉触发 +++++++++++++*/

                    onScrollMove: function () {
                        //更改图标指向
                        var pullUpelFind =  pullUpEl.querySelector('.pullUpLabel');
                         if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match('flip')) {

                             pullUpEl.className = 'flip';
                            pullUpelFind.innerHTML = '释放加载...';
                            this.maxScrollY = this.maxScrollY;

                         } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')) {

                            pullUpEl.className = '';
                            pullUpelFind.innerHTML = '上拉加载更多...';
                            this.maxScrollY = pullUpOffset;
                        }
                    },

                     /*++++++++++++++ 下拉结束 +++++++++++++*/

                    onScrollEnd: function () {
                        if (pullUpEl.className.match('flip')) {
                            pullUpEl.className = 'loading';
                            pullUpEl.querySelector('.pullUpLabel').innerHTML = '加载中...';
                            //ajax callback
                            pullrefresh.pullRefreshAction(data);
                        }
                    }
                });

            setTimeout(function () {
                document.getElementById('wrapper').style.left = '0';
            }, 100);
        }
    }

  var json = {
     list : ["asdasdasdasdasdasdasd","asdasdasdasdas","asdasdasdadasd","asdasdasdasdasdasdasd","asdasdasdasdas","asdasdasdadasd","asdasdasdasdasdasdasd","asdasdasdasdas","asdasdasdadasd","asdasdasdasdasdasdasd","asdasdasdasdas","asdasdasdadasd","asdasdasdasdasdasdasd","asdasdasdasdas","asdasdasdadasd"]
    }

pullrefresh.init(json);


/*

 #wrapper {
        position:absolute;
        z-index:1;
        top:0;
        bottom:0;
        left:-9999px;
        width:100%;
        background:#aaa;
        overflow:auto;
    }

    #scroller {
        position:absolute;
        z-index:1;
        -webkit-touch-callout:none;
        -webkit-tap-highlight-color:rgba(0,0,0,0);
        width:100%;
        padding:0;
    }






*/