iscroll4实现下拉刷新和下拉加载更多

  开发项目中,需要用到下拉刷新,开始本来打算自己写这个效果的。但是,自己写的效果不流畅,显得死板。通过查询相关资料,发现了iscroll插件。

  iScroll是一种高性能,小体积,无依赖性,跨平台的JS滚动,下拉刷新插件,可以动态加载分页内容。它适用于台式机,手机和智能电视。它的性能和尺寸大力优化等提供的一致好评现代老设备的平滑效果。

 

  版本:iscroll4

 

  代码如下:

 

  html代码

 

<!DOCTYPE html>
<html>
<head>
    <title>下拉刷新</title>
    <meta content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=2.0" name="viewport" />
    <meta content="telephone=no" name="format-detection" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <link rel="stylesheet" type="text/css" href="css/refresh.css">

</head>
<body>
    <div id="page">
        <div class="header" id="header">
            <h3>页头</h3>
        </div>

        <div class="container" id="container">
            <div id="wrapper">

                <div id="scroller" style="width:100%; position:absolute; top:-40px;">
                    <div class="showbox" id="downLoading" style="display:block;">
                        <div class="loadingWord">
                            <img src="imgs/down-vector.png">
                            <span class="loading_text downRefreshLable">下拉刷新</span>
                        </div>
                    </div>

                    <div id="dataList" class="dataList">
                        <ul>
                            <li>1111111111111111</li>
                            <li>1111111111111111</li>
                            <li>1111111111111111</li>
                            <li>1111111111111111</li>
                            <li>1111111111111111</li>
                            <li>1111111111111111</li>
                            <li>1111111111111111</li>
                            <li>1111111111111111</li>
                            <li>1111111111111111</li>
                            <li>1111111111111111</li>
                            <li>1111111111111111</li>
                            <li>1111111111111111</li>
                            <li>1111111111111111</li>
                            <li>1111111111111111</li>
                            <li>1111111111111111</li>
                            <li>1111111111111111</li>
                            <li>1111111111111111</li>
                            <li>1111111111111111</li>
                            <li>1111111111111111</li>
                            <li>1111111111111111</li>
                            <li>1111111111111111</li>
                            <li>1111111111111111</li>
                            <li>1111111111111111</li>
                            <li>1111111111111111</li>
                            <li>1111111111111111</li>
                            <li>1111111111111111</li>
                            <li>1111111111111111</li>
                        </ul>
                        <ul>
                            <li>2222222222222222</li>
                            <li>2222222222222222</li>
                            <li>2222222222222222</li>
                        </ul>
                    </div>

                    <div class="showbox" id="upLoading" style="display:block;">
                        <div class="loadingWord">
                            <img src="imgs/up-vector.png">
                            <span class="loading_text downRefreshLable">上拉更多</span>
                        </div>
                    </div>        
                </div>
            </div>

        </div>

        <div class="footer" id="footer">
            <h3>页脚</h3>
        </div>
    </div>
    <script type="text/javascript" ></script>
    <script src="js/lib/require.js" data-main="js/app/refresh"></script>
</body>
</html>

 

 

 

 

 

  js代码

 

require.config({
    paths: {
        'zepto':'../lib/zepto',
        'refresh':'../app/refresh',
        'iscroll':'../lib/iscroll4'
    },
    shim: {
            "zepto": {
                exports : "$"
            },
            "iscroll":{
                exports : 'isc'
            }
        }
   
});

require(['zepto', 'iscroll', 'refresh'], function($,isc,ref){
    ref.init();
});




define(["zepto"],function($){
    //全局变量
    /*屏幕长宽*/
    var window_width = $(window).width();
    var window_height = $(window).height();
    var i = 0;
    var _iscroll;

    var elem = {

        //全局变量
        /*var window_width = $(document).width();
        var window_height = $(document).height();
        console.log('window_width===' +window_width +'window_height===' +window_height);*/
        
        //入口函数
        init:function(){
            elem.initStyle();
            elem.initIscroll();
        },

        //初始化样式
        initStyle:function(){
            //页面主要内容.container样式
            var header_height = $('#header').height();
            var footer_height = $('#footer').height();
            var downLoad_height = $('#downLoading').height();
            var upLoad_height = $('#upLoading').height();

            var container_height = window_height - header_height -  footer_height;
            $('#container').height(container_height).css('top', header_height + 'px');
            //iscroll滚动#warpper样式
            $('#wrapper').height(container_height + downLoad_height);
            $('#dataList').css('min-height', container_height - upLoad_height + 'px');
        },

        //刷新页面数据
        refreshData:function(){
            console.log('刷新数据===Ajax');
        },
        //加载更多数据
        loadMoreData:function(){
            console.log('下拉更多===Ajax');
            i++;
            var newData = '<ul>'
                            + '<li>'+ i +'</li>'
                            + '<li>'+ i +'</li>'
                            + '<li>'+ i +'</li>'
                        + '</ul>'
            $('#dataList').append(newData);

            _iscroll.refresh();
            //elem.initIscroll();
        },


        //滑动控件初始化
        initIscroll:function(){
            var refreshKey = false;//
            var loadMoreKey = false;//

            _iscroll=new iScroll('wrapper', {
                //scrollbarClass: 'myScrollbar',
                checkDOMChanges:true,
                vScrollbar : false,

                //开始滚动时回调
                onScrollMove: function () {
                    ////console.log(this.y);
                    var _y = this.y;//下拉距离
                    var _max = (this.maxScrollY)*(-1);//最大的下拉距离,负值
                    //console.log('_y:'+_y+'  _max:' + _max);
                    
                    //页头---下拉刷新                 
                    if(_y>0&&_y<40){//显示'下拉刷新'

                        $('#downLoading').find('img').animate({
                        'transform':'rotate(-0deg)',
                        '-ms-transform':'rotate(-0deg)',
                        '-moz-transform':'rotate(-0deg)', 
                        '-webkit-transform':'rotate(-0deg)',
                        '-o-transform':'rotate(-0deg)'},200);
                        $('#downLoading').find('.loading_text').html('下拉刷新');
                        refreshKey = false;//下拉超过40,释放后刷新数据
                    }else if(_y>=40){//显示释放更新,后调用刷新数据函数
                       

                       $('#downLoading').find('img').animate({
                        'transform':'rotate(180deg)',
                        '-ms-transform':'rotate(180deg)',
                        '-moz-transform':'rotate(180deg)', 
                        '-webkit-transform':'rotate(180deg)',
                        '-o-transform':'rotate(180deg)'},200);
                       $('#downLoading').find('.loading_text').html('释放更新');
                       refreshKey = true;//下拉超过40,释放后刷新数据

                    //上拉---加载更多
                    }else if((-_y)>_max){//_max

                        //显示加载中
                        $('#upLoading').find('img').attr('src', 'imgs/waiting.gif').css('display', 'block');
                        $('#upLoading').find('.loading_text').html('加载中...');
                        loadMoreKey = true;
                    }else{
                        //显示上拉更多
                        $('#upLoading').find('img').attr('src', 'imgs/up-vector.png').css('display', 'block');
                        $('#upLoading').find('.loading_text').html('上拉更多');

                        refreshKey = false;//下拉超过40,释放后刷新数据
                        loadMoreKey = false;
                    }          
                    
                 },
                 
                 //手离开屏幕时回调
                 onTouchEnd:function(){
                    //当触发释放更新时,需要更新数据
                    if(refreshKey){
                        var downLoad_height = $('#downLoading').height();

                        $('#downLoading').find('img').attr('src', 'imgs/waiting.gif').css('display', 'block');
                        $('#downLoading').find('.loading_text').html('加载中...');
                        $('#scroller').css('top', '0px');

                        elem.refreshData();
                        

                        setTimeout(function(){
                            $('#downLoading').find('img').attr('src', 'imgs/down-vector.png').css('display', 'block');
                            $('#downLoading').find('.loading_text').html('下拉刷新');
                            $('#scroller').css('top', -downLoad_height + 'px');
                        },500);

                        refreshKey = false;
                    }

                    //当触发上拉加载更多时,需要加载更多数据
                    if(loadMoreKey){
                        elem.loadMoreData();

                        setTimeout(function(){
                            $('#upLoading').find('img').attr('src', 'imgs/up-vector.png').css('display', 'block');
                            $('#upLoading').find('.loading_text').html('上拉更多');
                        },500);

                        loadMoreKey = false;
                    }
                    

                 }
            });
        }

    }

    return elem;
});

/*var elem = {

    //全局变量
    var window_width = $(document).width();
    var window_height = $(document).height();
    console.log('window_width===' +window_width +'window_height===' +window_height);

    init:function(){
        alert($('.header h3').text());
         alert('init');
    }
}*/

 

我的实例源码上传到博客文件里了,需要可以自己下载查看。

posted on 2016-01-27 09:57  wawa11  阅读(431)  评论(1编辑  收藏  举报

导航