iscroll5的相对于版本4的变化,以及下拉刷新,上拉更多实例

  (1)需要系统学习iscroll5的一些新特性,可以查看iscrollAPI:

  中文手册:http://wiki.jikexueyuan.com/project/iscroll-5/ 或 http://www.mamicode.com/info-detail-331827.html

  英文手册:http://cubiq.org/iscroll-5

  (2)在使用iscroll5的时候,也遇到了一些问题

  • 创建iscroll, myScroll = new IScroll('#wrapper', {...});                                              iscroll4在创建iscroll时是 iscroll=new iScroll('wrapper', {...}); ,版本5与4在创建对象时变化了。 




  • iscroll5增加了一些新属性,click: true                                                                                                                                                        

    options.click

    为了重写原生滚动条,iScroll禁止了一些默认的浏览器行为,比如鼠标的点击。如果你想你的应用程序响应click事件,那么该设置次属性为true。请注意,建议使用自定义的tap 事件来代替它(见下面)。
    默认属性:false

  • probeType:3,//像素级的触发scroll事件                                                                                                                                                                                                       我没太看懂官网属性的解释,我测试了一下,probeType: 1时,无法实时响应我的myScroll.on("scroll",function(){...});probeType: 2或3时,myScroll.on("scroll",function(){...});事件都能及时响应。

    options.probeType

    这个属性是调节在scroll事件触发中探针的活跃度或者频率。有效值有:1, 2, 3。数值越高表示更活跃的探测。探针活跃度越高对CPU的影响就越大。

    • probeType: 1 对性能没有影响。scroll事件只有在滚动条不繁忙的时候触发。
    • probeType: 2 除了在势能和反弹范围内,将在scroll事件周期内一直执行。这类似于原生的onScroll事件。
    • probeType: 3 像素级的触发scroll事件。注意,此时滚动只关注requestAnimationFrame (即:useTransition:false).
  • scrollbar滑动时显示,不滑动时影藏                                                                                                                                                                                                      scrollbars: true,                                                                                                                                                                                                                                      interactiveScrollbars: true,                                                                                                                                                                                                                shrinkScrollbars: 'scale',                                                                                                                                                                                                        fadeScrollbars: true
  • 首先列表先要加载完后,才能创建初始化iscroll
  • 首先给iscroll一个最小的初始高度,不然高度不填充完,无法下拉刷新   

//scroller的min高度
$("#msgList").css("min-height",weinHeight-headerHeight + "px");

  • 在不需要使用iScoll的时候调用iScroll实例的公共方法destroy()可以释放一些内存。
       //iscroll存在时,销毁iscroll
            if(myScroll != undefined){
                myScroll.destroy();
                myScrollEventBindFlag = true;
            }
  • preventDefault属性不要轻易使用

options.preventDefault

当事件触发时师傅执行preventDefault()。此属性应该设置为true,除非你真的知道你需要怎么做。
请参考下面的Advanced features中的preventDefaultException,可以获取更多控制preventDefault行为的信息。
默认值:true

<div id="wrapper">
        <div id="scroller" style="transition-timing-function: cubic-bezier(0.1, 0.57, 0.1, 1); transition-duration: 0ms; transform: translate(0px, 0px) translateZ(0px);">
            <!-- 下拉刷新 -->
            <div class="showbox" id="downLoading" style="display:block;">
                <div class="loadingWord">
                    <img src="../images/down-vector.png">
                    <span class="loading_text downRefreshLable">下拉刷新</span>
                </div>
            </div>
            <div id="scroller-content">
                <ul id="msgList" style="min-height: 529px;">
            <li>1111111111111111111111111111111</li>
            <li>2222222222222222222222222222222</li>
            <li>3333333333333333333333333333333</li>
            <li>4444444444444444444444444444444</li>
            <li>5555555555555555555555555555555</li>
            <li>6666666666666666666666666666666</li>
            <li>7777777777777777777777777777777</li>
            <div class="showbox" id="upLoading" style="display:block;">
              <
div class="loadingWord"><img src="../images/up-vector.png"><span class="loading_text downRefreshLable">上拉更多</span></div>
            </
div>
          </
ul> </div> </div> </div>
/**
         * 创建iscroll,初始化
         */
        initIScroll : function(){
            //iscroll存在时,销毁iscroll
            if(myScroll != undefined){
                myScroll.destroy();
                myScrollEventBindFlag = true;
            }
            //触发事件标志
            var refreshKey = false;//
            var loadMoreKey = false;//
            //重置查询开始条数
            //searchStartNum = 1;
            
            //创建iscroll,初始化
            myScroll = new IScroll('#wrapper', {
                probeType:3,//像素级的触发scroll事件
                click: true, 
                scrollbars: true,
                mouseWheel: true,
                interactiveScrollbars: true,
                shrinkScrollbars: 'scale',
                fadeScrollbars: true
            });
            
            if(myScrollEventBindFlag){
                //绑定后锁死 
                myScrollEventBindFlag = false;
                //滑动时触发
                myScroll.on("scroll", function(){
                    var y = this.y;
                    var maxY = this.maxScrollY - y;
                    //console.log("y===" + y + " maxY===" + maxY);
                    
                    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(eval("msgListLang." + common.sysLang +".pageMessage.relaseRefreshInfo"));//'释放更新'
                               refreshKey = true;//下拉超过40,释放后刷新数据
                               
                        return "";
                    }else if(y < 40 && y > 0){
                        $('#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(eval("msgListLang." + common.sysLang +".pageMessage.downRefreshInfo"));//'下拉刷新'
                            refreshKey = false;//下拉小于40
                            
                        return "";
                    }
                });
                //下滑事件,松手后触发
                myScroll.on("slideDown",function(){
                    if(this.y > 40){
                        
                        //获取消息列表
                        searchStartNum = 1;
                        slipUpFalg = false;
                        //刷新数据
                        MsgList.getMessageListFunction();
                        //每次完成重置一下
                        searchStartNum = 1;
                        myScroll.refresh();                         
                    }
                });
                
                //上滑事件,松手后触发
                myScroll.on("slideUp",function(){
                    if(this.maxScrollY - this.y > 40){
                        //alert("当前滑动所在行")
                        //当前滑动所在行
                        //myScroll.scrollToElement($('#scroller .js_msgItem').eq(searchStartNum), null, null, true);
                        //自动计算下载所需要的条数
                        searchStartNum += searchEachAllCount;
                        slipUpFalg = true;
                        //添加数据
                        MsgList.getMessageListFunction();
                        myScroll.refresh(); 
                    }
                });
            }
            
        },
原文地址:https://www.cnblogs.com/daisy-hust/p/5162928.html