AMAZEUI之iscroll 下滑重新整理/上拉載入更多例項
阿新 • • 發佈：2019-01-25
最新在做一個微信商城有用到商鋪列表展示，需要使用滑動上拉載入資料，就使用了iscroll，中間遇到很多坑，這裡使用iscroll做一個簡單的例子，希望能幫助到一些同學。
1.首先進入amazui官網下載amaui的zar包，解壓到專案中
2.新建case.html
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>豆瓣同城 - 音樂 - 北京 | Just a iScroll Demo</title> <link rel="stylesheet" href="../style/css/amazeui.min.css" /> <style> html, body, .page { height: 100%; } #wrapper { position: absolute; top: 49px; bottom: 0; overflow: hidden; margin: 0; width: 100%; padding: 0 8px; background-color: #f8f8f8; } .am-list { margin: 0; } .am-list > li { background: none; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); } .pull-action { text-align: center; height: 45px; line-height: 45px; color: #999; } .pull-action .am-icon-spin { display: none; } .pull-action.loading .am-icon-spin { display: block; } .pull-action.loading .pull-label { display: none; } </style> </head> <body> <div class="page"> <header data-am-widget="header" class="am-header am-header-default"> <h1 class="am-header-title"> 同城 - 音樂 </h1> </header> <div id="wrapper" data-am-widget="list_news" class="am-list-news am-list-news-default"> <div class="am-list-news-bd"> <div class="pull-action loading" id="pull-down"> <span class="am-icon-arrow-down pull-label" id="pull-down-label"> 下拉重新整理</span> <span class="am-icon-spinner am-icon-spin"></span> </div> <ul class="am-list" id="events-list"> <li class="am-list-item-desced"> <div class="am-list-item-text"> 正在載入內容... </div> </li> </ul> <div class="pull-action" id="pull-up"> <span class="am-icon-arrow-down pull-label" id="pull-up-label"> 上拉載入更多</span> <span class="am-icon-spinner am-icon-spin"></span> </div> </div> </div> </div> <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script> <script src="../style/js/handlebars.min.js" type="text/javascript"></script> <script src="../style/js/amazeui.min.js" type="text/javascript"></script> <script type="text/x-handlebars-template" id="tpi-list-item"> {{#each this}} <li class="am-list-item-desced" data-id="{{id}}"> <a href="{{alt}}" class="am-list-item-hd" target="_blank">{{title}}</a> <div class="am-list-item-text">{{content}}</div> </li> {{/each}} </script> <script type="text/javascript"> /* iscroll 流程順序 1.建立dom **dom必須在iscroll例項之前建立否則無法滾動 2.建立iscroll例項 3.設定下滑，上拉的條件 (1).startY startX:開始滑動的X,Y位置.一般用來隱藏重新整理頁面 預設值 0,0 (2).distY:滑動的絕對距離 (3).directionY: 上一次滑動狀態**（1 上拉 -1 下滑 0 未動） (4).pullStart :設定每次開始滾動的初始值，*用來比較 4.動態的插入data。 **每次dom插入新資料時需要重新整理iscroll */ $(function(){ createLi(false); }); function createLi(flg){ var html = []; for(var i=0;i<13;i++){ html.push('<li class="am-list-item-desced" data-id="1"> '); html.push('<a href="" class="am-list-item-hd" target="_blank">測試amazeUI</a> '); html.push('<div class="am-list-item-text">iScroll是一個高效能，資源佔用少，無依賴，多平臺的javascript滾動外掛。</div>' ); html.push('</li>'); } var createContent = html.join(" "); if (flg) { $('#events-list').append(createContent); } else { $('#events-list').html(createContent); } } </script> <script type="text/javascript"> var myScroll; var next = 0; $(function() { var height = document.body.clientHeight; height = height < 700 ? 700 : height; createMyScroll(); //新增手機自帶的滑動效果 /* element.addEventListener(type,listener,useCapture) 基中element是要繫結函式的物件； type是事件名稱，要注意的是”onclick”要改為”click”,”onblur”要改為”blur”,也就是說事件名不要帶”on”； listener當然就是繫結的函數了，記住不要跟括號； 最後一個引數是個布林值，表示該事件的響應順序。布林值引數是true，表示在捕獲階段呼叫事件處理程式；如果是false，表示在冒泡階段呼叫事件處理程式。 */ document.addEventListener('touchmove', function(e) { e.preventDefault(); }, false); }); function createMyScroll() { var IScroll = $.AMUI.iScroll; myScroll = new IScroll("#wrapper",{ click:true, startY:-43, }); var pullFormTop = false; var topOffset = -$("#pull-down").outerHeight(); var pullStart=0;//每次滾動的開始位置 // 滑動開始事件 儲存每次滑動初始值 myScroll.on("scrollStart",function(){ if (this.y>=topOffset) { pullFormTop=true; } pullStart = this.y; }); //滑動結束事件 呼叫下滑 或者上拉 myScroll.on("scrollEnd",function(){ // 當是下滑 and 滑動初始值為dom初值 and 上次滑動為下滑（可以不要） if(pullFormTop && pullStart=== -43 && this.directionY === -1) { handlePullDown(); return; } // 噹噹前dom物件的y值大於滑動初始位置時，恢復初始位置 if (this.y >= -43) { myScroll.scrollTo(0,-43); return; } // 滑動初始值與當前值不等時 if(pullStart != this.y) { return; } //上次滾動是上滑 if (this.directionY === 1) { handlePullUp(); } }); } function handlePullDown() { var $pullDown = $("#pull-down"); if(!this.queryLoading($pullDown)){ this.setLoading($pullDown) } setTimeout(function(){ this.resetLoading($pullDown); createLi(false); $("#pull-up-label").html("上拉載入更多"); myScroll.scrollTo(0,-43); },1000); }; function handlePullUp() { console.log('handle pull up'); if (next >= 3) { $("#pull-up-label").html("沒有更多了"); } else { next++; createLi(true); //每次dom插入新資料時需要重新整理iscroll myScroll.refresh(); } } this.setLoading = function($el) { $el.addClass('loading'); }; this.queryLoading= function($el) { $el.hasClass("loading"); }; this.resetLoading = function($el) { $el.removeClass('loading'); }; </script> </body> </html> <!--http://pnc.co.il/dev/iscroll-5-pull-to-refresh-and-infinite-demo.html-->
注：知識點在程式碼中，好好觀察吧。友情提示iscroll引數解釋：點選開啟連結