Iscroll.js implement pull-up refresh, pull-down load more, apply skill project combat

Pull up refresh, pull down load more ... Imitation of the effect of the original----iscroll is a rolling effect of the plug-in, specific introduction I do not talk nonsense, look at official documents, I only write down some of the use of my project development:

(If not, debugging your CSS, it must be a very painful problem, give a hint: #wrapper, and #scroller-content to note)

The HTML is as follows:

 <Divclass= "Viewport">        <DivID= "wrapper"class= "wrapper">            <DivID= "Scroller">                <DivID= "Scroller-pulldown">                    <spanID= "Down-icon"class= "Pull-down-icon fa fa-refresh fa-spin fa-fw"></span>                    <spanID= "Pulldown-msg"class= "Pull-down-msg">Drop-down Refresh</span>                </Div>                <DivID= "Scroller-content">//You write the content here</Div>                <DivID= "Scroller-pullup">                    <spanID= "Up-icon"class= "Pull-up-icon fa fa-spinner fa-spin fa-fw"></span>                    <spanID= "Pullup-msg"class= "Pull-up-msg">Pull-up loading</span>                </Div>            </Div>        </Div>    </Div>

The CSS is as follows:

/*=================iscroll=================================*/#wrapper{position:Absolute;Z-index:1;Top:210* @size;Bottom:0px; Left:0;width:100%;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-pulldown, #scroller-pullup{background:#333333;Height:50px;Line-height:50px;Border-bottom:1px solid #ccc;Font-weight:Bold;font-size:14px;Color:#888;text-align:Center;position:Absolute; Left:0px;width:100%;}#scroller-pulldown{Top:-50px;}#scroller-pullup{Bottom:-50px;}. Pull-up-msg,.pull-down-msg{Padding-left:5px;position:relative;Top:0px;}#scroller-pulldown Pull-down-icon, #scroller-pullup. Pull-up-icon{Display:Inline-block;Color:#e84c3d;font-size:16px;}

JS Code look here:

    functionPushdata (m) {varm = m | | 10; if(flag) {
Send Ajax, loop your own data load: $.myget (URI, {formData},function(data) {if(data.result) { for(vari = 0; i < data.package.length; i++) {Data.package[i].ispass? Data.package[i].ispass = "Pass": Data.package[i].ispass = "Unpass"; Temp= ' <li> ' + ' <span class= ' item ellips ' > ' + data.package[i].planname + ' </span> ' + ' <span class= ' time ' &  gt; ' + ' 2017.03.08 ' + ' </span> ' + ' <span class= ' score ' > ' + data.package[i].score + ' </span> ' + ' <span class= "status" ></span> ' + ' <li> '; $("#target"). Append (temp); }                if(M * n >data.total) {$ ("#pullUp-msg"). Text ("No More Data"); Flag=false; return false; }            }          }    (function(window) {varMyscroll, Upicon= $ ("#up-icon"), Downicon= $ ("#down-icon"), Target= $ ("#target"), temp= " "; Myscroll=NewIscroll (' #wrapper ', {probetype:3, MouseWheel:true        }); Myscroll.on ("Scroll",function() {            vary = This. Y, Maxy= This. maxscrolly-y, Downhasclass= Downicon.hasclass ("Reverse_icon"), Uphasclass= Upicon.hasclass ("Reverse_icon"); if(Y >= 40) {                !downhasclass && downicon.addclass ("Reverse_icon"); return""; } Else if(Y < x && y > 0) {Downhasclass&& Downicon.removeclass ("Reverse_icon"); return""; }            if(Maxy >= 40) {                !uphasclass && upicon.addclass ("Reverse_icon"); return""; } Else if(Maxy < && maxy >= 0) {Uphasclass&& Upicon.removeclass ("Reverse_icon"); return"";        }        });        Pull the logic down here! Myscroll.on ("Slidedown",function() {            if( This. y > 40) {window.location.reload (); }        }); //pull-up logic is here! Myscroll.on ("Slideup",function() {            if( This. maxscrolly- This. y > 40) {pushdata ();            Myscroll.refresh ();    }        }); }) (window)

Iscroll.js implement pull-up refresh, pull-down load more, apply skill project combat