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>'); }); } }); };
改成同步,问题解决。