基于iscroll.js的上滑加载更多下拉刷新

有两种可以选择

1.如果需要下拉上拉有提示的可以下载查看以下案例:https://github.com/fongdaBoy/pullupPulldownDemohttps://github.com/fongdaBoy/pullupPulldownDemo

2.不需要提示 或者自己写 但是样式更多 包括所有滑动案例等:

https://github.com/cubiq/iscrollhttps://github.com/cubiq/iscroll以下是我根据1改进后的代码----------------------------------------------------------------------------------

1.下载引用jquery.js和iscroll.js文件

<script type="application/javascript" src="../js/iscroll.js"></script>  <!-- 第三方的插件 可以实现上拉加载下拉刷-->
        <script type="application/javascript" src="../js/jquery-3.4.1.min.js"></script><!-- 第三方插件 jquery -->

2.js中:

    // -------------------------------------------------滑动方法------------------------------------------------
            var myScroll, pullDownEl, pullDownOffset, pullUpEl, pullUpOffset, generatedCount = 0;
            
            // 下拉重新加载页面
            function pullDownAction () {
                window.location.reload();//刷新
                setTimeout(function () {
                    
                    myScroll.refresh();  //数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
                }, 100); 
            }
            
            // 上拉加载更多方法
            function pullUpAction () {
                if(haveMoreDataflag) {
                    ajaxpage1(start);
                }
                
                setTimeout(function () {
        
                    myScroll.refresh();  // 数据加载完成后，调用界面更新方法 Remember to refresh when contents are loaded (ie: on ajax completion)
                  
                }, 100); 
            }
            
             // 初始化iScroll控件
            function loaded() {
             pullDownEl = document.getElementById('pullDown');
             pullDownOffset = pullDownEl.offsetHeight;
             pullUpEl = document.getElementById('pullUp'); 
             pullUpOffset = pullUpEl.offsetHeight;
            
             myScroll = new iScroll('wrapper', {
              scrollbarClass: 'myScrollbar', /* 重要样式 */
              useTransition: false, /* 此属性不知用意，本人从true改为false */
              topOffset: pullDownOffset,
              // 拖动幅度比较小时候出发的方法
              onRefresh: function () {
               if (pullDownEl.className.match('loadingPart')) {
                pullDownEl.className = '';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = '下拉重新加载...';
               } else if (pullUpEl.className.match('loadingPart')) {
                pullUpEl.className = '';
                pullUpEl.querySelector('.pullUpLabel').innerHTML = '';
               }
              },
              // 拖动距离比较大的出发的方法
              onScrollMove: function () {
               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 = '下拉重新加载...';
                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 = '';
                this.maxScrollY = pullUpOffset;
               }
              },
              // 放手后的方法
              onScrollEnd: function () {
                  
               if (pullDownEl.className.match('flip')) {
                pullDownEl.className = 'loadingPart';
                pullDownEl.querySelector('.pullDownLabel').innerHTML = '加载中...';    
                pullDownAction(); // Execute custom function (ajax call?)
               } else if (pullUpEl.className.match('flip')) {
                    pullUpEl.className = 'loadingPart';
                    if(haveMoreDataflag){  
                        pullUpEl.querySelector('.pullUpLabel').innerHTML = '';    
                        pullUpAction(); // Execute custom function (ajax call?)
                    }else{
                        pullUpEl.querySelector('.pullUpLabel').innerHTML = '数据已全部加载完毕';   
                    }
                
               }
              }
             });
            
             setTimeout(function () { document.getElementById('wrapper').style.left = '0'; }, 800);
            }
            
            // -------------------------------------------------页面初始化------------------------------------------------
            var start = 1
            var pagesize = 8;
            var haveMoreDataflag = true;
            $(function() {
                ajaxpage1(start);
                setTimeout(()=>{
                    //初始化绑定iScroll控件
                    document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
                    document.addEventListener('DOMContentLoaded', loaded, false);
                    myScroll.refresh();//很重要
                },100)
            });

注:在1案例中发现可能会有滑动不到底部的情况,思考了很久,后来发现需要数据加载完之后再进行scroll刷新(高度会刷新)就会正常. 我采用了定时器触发刷新方法.