iScroll.js 向上滑动异步加载数据回弹问题

iScroll是一款用于移动设备web开发的一款插件。像缩放、下拉刷新、滑动切换等移动应用上常见的一些效果都可以轻松实现。

现在最新版本是5.X，官网这里：http://iscrolljs.com/

下面是按照官网给的Demo，写的一个异步加载数据实例：

  1 <title>iScroll demo: click</title>
  2 <script src="~/Scripts/iscroll5/jquery-1.10.2.js"></script>
  3 <script src="~/Scripts/iscroll5/iscroll-probe.js"></script>
  4 <script type="text/javascript">
  5     $(function () {
  6         upajaxload();
  7 
  8         var myScroll = new IScroll('#wrapper', {
  9             mouseWheel: false,  //是否监听鼠标滚轮事件
 10             bounceTime: 600,       //弹力动画持续的毫秒数
 11             probeType: 3
 12         });
 13 
 14         var handle = 0;//初始为0，无状态；1表示下拉，2表示上拉
 15         myScroll.on('scroll', function () {
 16             if (this.y > 5) {
 17                 handle = 1;
 18             } else if (this.y < (this.maxScrollY - 5)) {
 19                 handle = 2;
 20 
 21             };
 22         });
 23 
 25         function upajaxload() {
 26             $.ajax({ 28                 type: 'POST',
 29                 url: '/Home/GetData',
 30                 success: function (data) {
 31                     $(data).each(function (i, d) {
 32                         $("#scroller").append('<p>' + d + '</p>');
 33                     });
 34                 }
 35             }); 39         };
 40 
 41         myScroll.on('scrollEnd', function () {
 42             if (handle === 2) {
 43                 upajaxload();
 44             }
 45             handle = 0;
 46             myScroll.refresh();
 47         });
 48         document.addEventListener('touchmove', function (e) { e.preventDefault(); }, false);
 49     });
 50 </script>
 51 
 52 <style type="text/css">
 53     #header {
 54         position: absolute;
 55         z-index: 2;
 56         top: 0;
 57         left: 0;
 58         width: 100%;
 59         height: 45px;
 60         line-height: 45px;
 61         background: #CD235C;
 62         padding: 0;
 63         color: #eee;
 64         font-size: 20px;
 65         text-align: center;
 66         font-weight: bold;
 67     }
 68 
 69     #wrapper {
 70         position: absolute;
 71         z-index: 1;
 72         top: 45px;
 73         bottom: 48px;
 74         left: 0;
 75         width: 100%;
 76         background: #ccc;
 77         overflow: hidden;
 78     }
 79 
 80     #scroller {
 81         position: absolute;
 82         z-index: 1;
 83         -webkit-tap-highlight-color: rgba(0,0,0,0);
 84         width: 2000px;
 85         -webkit-transform: translateZ(0);
 86         -moz-transform: translateZ(0);
 87         -ms-transform: translateZ(0);
 88         -o-transform: translateZ(0);
 89         transform: translateZ(0);
 90         -webkit-touch-callout: none;
 91         -webkit-user-select: none;
 92         -moz-user-select: none;
 93         -ms-user-select: none;
 94         user-select: none;
 95         -webkit-text-size-adjust: none;
 96         -moz-text-size-adjust: none;
 97         -ms-text-size-adjust: none;
 98         -o-text-size-adjust: none;
 99         text-size-adjust: none;
100         background: #fff;
101     }
102 
103     p {
104         font-size: 16px;
105         padding: 1.2em;
106     }
107 </style>
108 <div id="header">iScroll</div>
109 
110 <div id="wrapper">
111     <div id="scroller">
112     </div>
113 </div>

 

上面的Demo有个问题，就是每次向上滑动结束之后，异步加载完成数据，再向上滑动查看加载的数据时，滑不上去，会回弹。

初步判断是Ajax异步加载修改了DOM结构导致的问题，去官网看了下也没说，自己摸索了一下，Ajax改成同步问题就解决。

    function upajaxload() {
            $.ajax({
                async: false,
                type: 'POST',
                url: '/Home/GetData',
                success: function (data) {
                    $(data).each(function (i, d) {
                        $("#scroller").append('<p>' + d + '</p>');
                    });
                }
            });
        };

 

改成同步，问题解决。

posted @ 2015-10-31 22:00  Jreey  阅读(5761)  评论(1)  编辑  收藏  举报