H5頁面基於iScroll.js插件實現下拉刷新，上拉加載更多

前言

在我以前的項目中，頁面老是乾巴巴的，用戶的體驗不是特別完美，我也是一直以爲把設計師給到的psd作出來就好，不多考慮用戶的感覺。我喜歡看不一樣的App,操做每一個步驟，觀賞每一個能和我互動的交互設計效果，我很喜歡。感受有迴應。

如今開始實現我頁面的第一個交互效果，讓個人頁面更生動一點。

 

實現的插件

基於iScroll.js插件

 

代碼

html

<div class="header">我是頭部固定</div>

<div id="wrapper">

          <div id="scroller">

                     <div id="pullDown"> <span class="pullDownLabel">下拉刷新</span> </div>

                      <ul id="thelist">

                                 <li>我是小公舉</li>

                                 <li>我是小公舉</li>

                                  <li>我是小公舉</li>

                                  <li>我是小公舉</li>

                                  <li>我是小公舉</li>

                                  <li>我是小公舉</li>

                                  <li>我是小公舉</li>

                                  <li>我是小公舉</li>

                                  <li>我是小公舉</li>

                                  <li>我是小公舉</li>

                                  <li>我是小公舉</li>

                      </ul>

                        <div id="pullUp"><span class="pullUpLabel">上拉加載更多</span></div>

           </div>

</div>

<div class=""footer>我是底部固定</div>

css

*{margin:0;padding:0}

body{font-size:12px}

li{list-style:none}

.header{position:absolute;top:0;left:0;width:100%;height:45px;line-height:45px;text-align:center;color:#333;font-size:16px}

.footer{position:absolute;bottom:0;left:0;width:100%;height:45px;line-height:45px;text-align:center;color:#333;font-size:16px}

#wrapper{position:absolute;top:45px;left:0;bottom:48px;width:100%;}

#wrapper #scroller .thelist li{height:60px;padding:0 10px;line-height:60px;background:#ecf6ff;margin-top:10px;}

#pullDown,#pullUp{height:30px;line-height:30px;padding:0 10px;color:#888;text-align:center}

javascript

<script type="text/javascript" src="js/iscroll.js"></script>

<script>

        var myScroll, pullDownEl, pullDownOffset, pullUpEl, pullUpOffset, generatedCount = 0;

        function loaded(){

               pullDownEl = document.getElementById('pullDown');

               pullDownOffset = pullDownEl.offsetHeight;      //獲取下拉刷新的div高度 30

               pullUpEl = document.getElementById('pullUp');

               pullUpOffset = pullUpEl.offsetHeight;               // 獲取上拉加載的div高度 30

               myScroll = new iScroll('wrapper',{

                             useTransition: true,                 //options.useTransition 默認爲true，支持css transition 動畫；

                             topOffset: pullDownOffset,     //經過topOffset參數屬性設置iScroll已經滾動的基準值；

                             onRefresh: function(){             //經過onRefresh參數方法調整刷新後的界面結構

                                          if(pullDownEl.className.match('loading')){

                                                      pullDownEl.className= '' ;

                                                      pullDownEl.querySelector('.pullDownLabel').innerHtml = '下拉刷新' ;

                                            } else if (pullUpEl.className.match('loading')){

                                                      pullUpEl.className = '' ;

                                                      pullUpEl.querySelector('.pullUpLabel').innerHtml = '上拉加載更多' ; 

                                              }

                              },

                               onScrollMove: function(){                         //經過onScrollMove參數方法判斷當前滾動是在頂端仍是底端

                                                if(this.y > 5 && !pullDownEl.className.match('flip')){

                                                               pullDownEl.className = 'flip' ;

                                                               pullDownEl.querySelector('.pullDownLabel').innerHtml = '刷新釋放' ;

                                                               this.minScrollY = 0;

                                                 } else if(this.y < 5 && pullDownEl.className.match('flip')){                                                     

                                                               pullDownEl.className = ' ' ;

                                                               pullDownEl.querySelector('.pullDownLabel').innerHtml = 'Pull down to refresh...' ;

                                                               this.minScrollY = -pullDownOffset;

                                                 } else if (this.y < (this.maxScrollY - 5) && !pullUpEl.className.match(flip)){

                                                                pullUpEl.className = 'flip';

                                                                pullUpEl.querySelector('.pullUpLabel').innerHtml = '釋放刷新';

                                                                this.maxScrollY = this.maxScrollY;

                                                 } else if (this.y > (this.maxScrollY + 5) && pullUpEl.className.match('flip')){

                                                                 pullUpEl.className = ' ';

                                                                 pullUpEl.querySelector('.pullUpLabel').innerHtml = 'Pull up to load more...;

                                                                  this.maxScrollY = pullUpOffset;

                                                 }

                                 },

                                 onScrollEnd: function(){

                                                 if(pullDownEl.className.match('flip')){

                                                                     pullDownEl.className = 'loading';

                                                                     pullDownEl.querySelector('.pullDownLabel').innerHtml = '加載中';

                                                                     pullDownAction();

                                                  } else if(pullUpEl.className.match('flip')){

                                                                      pullUpEl.className = 'loading'；

                                                                      pullUpEl.querySelector('.pullUpLabel').innerHtml = '加載中';

                                                                      pullUpAction();

                                                  }

                                 },

               });

               loadAction();

        };

 

        document.addEventListener('touchmove',function(e){ 

                 e.preventDefaule();

        },false);  //阻止冒泡

 

         document.addEventListener('DOMContentLoaded',function(){

                 setTimeout(loaded,0)

       }.false);   //當DOMContentLoaded 事件觸發時，僅當DOM加載完成，不包括樣式表，圖片，flash。

       

         //初始狀態，加載數據

        function loadAction(){

                 var el, li;

                  el = document.getElementById('thelist');

                  for(var i = 0; i < 10; i++){

                           li = doument.createElement('li');

                           li.innerHtml = '初始數據--' + (++generatedCount);

                           el.appendChild(li, el.childNodes[0]);

                 };

                  myScroll.refresh();

         };

 

            //下拉刷新當前數據

            function pullDownAction(){

                        setTimeout(function(){

                                 //這裏執行刷新操做

                                   myScroll.refresh();

                         },400);

            };

 

              //上拉加載更多數據

           function pullUpAction(){

                 setTimeout(function() {

                       var el, li;

                       el = document.getElementById('thelist');

                       for(var i = 0; i < 10; i++){

                                 li = doument.createElement('li');

                                 li.innerText= '上拉加載--' + (++generatedCount);

                                el.appendChild(li, el.childNodes[0]);

                       };

                     myScroll.refresh();

                     },400);

             }

 

//ajax

eg:  function pullUpAction(){

               setTimeout(function(){

                          var el, li, i;

                          document.getElementById("thelist");

                            //========================

                            $.ajax({

                                      type: "GET",

                                      url: "LoadMore.aspx",

                                      data: { page: generatedCount },

                                      dataType: "json",

                                      success: function(data){

                                                 var json = data;

                                                 $(json).each(function(){

                                                           li = document.createElement('li');

                                                           li.innerHtml = ' XXXXXXXXXXXX';

                                                           el.insetBefore(li, el.childNodes[0]);

                                                })

                                       }

                            });

                         //==========================

                         myScroll.refesh();

               },1000);

       }

</script>

 

參考搬運代碼地址：http://blog.csdn.net/xw505501936/article/details/48975991