zoukankan      html  css  js  c++  java
  • 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(); 
                        }
                    });
                }
                
            },
  • 相关阅读:
    洛谷 1339 最短路
    洛谷 1330 封锁阳光大学 图论 二分图染色
    洛谷 1262 间谍网络 Tarjan 图论
    洛谷 1373 dp 小a和uim之大逃离 良心题解
    洛谷 1972 莫队
    洛谷 2158 数论 打表 欧拉函数
    洛谷 1414 数论 分解因数 水题
    蒟蒻的省选复习(不如说是noip普及组复习)————连载中
    关于筛法
    关于整数划分的几类问题
  • 原文地址:https://www.cnblogs.com/daisy-hust/p/5162928.html
Copyright © 2011-2022 走看看