H5页面基于iScroll.js插件实现下拉刷新,上拉加载更多

时间:2024-02-15 19:14:44

前言

在我之前的项目中,页面总是干巴巴的,用户的体验不是特别完美,我也是一直觉得把设计师给到的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