解決iscroll.js上拉下拉重新整理手指劃出螢幕頁面無法回彈問題
阿新 • • 發佈:2019-01-06
使用過iscroll.js的上拉下拉重新整理效果的朋友應該都碰到過這個問題:在iOS的瀏覽器中,上拉或下拉重新整理時,當手指劃出屏幕後,頁面無法彈回。很多人因為解決不了這個問題,乾脆就那樣不解決了,還有的直接就不用HTML了,使用原生代替HTML頁面。
相信很多朋友也有自己的解決辦法,只是沒寫出來,所以網上都搜不到解決方案。在很多QQ群裡面也有很多人在問該怎麼解決這個問題,所以我寫這篇文章記錄一下我的解決方案,希望對一些朋友有所幫助。
上拉下拉重新整理的主要程式碼:
myScroll = new iScroll('wrapper', {
vScrollbar: false ,
useTransition: true,
topOffset: pullDownOffset,
onRefresh: function () {
if (pullDownEl.className.match('loading')) {
pullDownEl.className = '';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Pull down to refresh...';
} else if (pullUpEl.className.match('loading')) {
pullUpEl.className = '';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Pull up to load more...';
}
},
onScrollMove: function () {
if (this.y > 5 && !pullDownEl.className.match('flip' )) {
pullDownEl.className = 'flip';
pullDownEl.querySelector('.pullDownLabel').innerHTML = 'Release to refresh...';
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 = 'Release to refresh...';
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 = 'Loading...';
pullDownAction();
} else if (pullUpEl.className.match('flip')) {
pullUpEl.className = 'loading';
pullUpEl.querySelector('.pullUpLabel').innerHTML = 'Loading...';
pullUpAction();
}
}
});
頁面無法彈回的原因在於:手指劃出屏幕後touchend
事件無法觸發,回彈動畫就無法執行。解決辦法就是:當手指接近螢幕邊緣的時候,手動觸發動畫方法。
在onScrollMove
方法中插入判斷程式碼:
onScrollMove: function () {
if((this.y < this.maxScrollY) && (this.pointY < 1)){
this.scrollTo(0, this.maxScrollY, 400);
return;
} else if (this.y > 0 && (this.pointY > window.innerHeight - 1)) {
this.scrollTo(0, 0, 400);
return;
}
......
}
下面解釋一下這段程式碼的意思。
this.y
是頁面已經滾動的垂直距離,this.maxScrollY
是最大垂直滾動距離,this.pointY
手指當前的垂直座標。
當this.y
< this.maxScrollY
,就是已經處於上拉的過程,當(this.y
< this.maxScrollY) && (this.pointY < 1)
時,處於上拉且手指已經觸及螢幕邊緣,這時候手動觸發this.scrollTo(0,
this.maxScrollY, 400)
,頁面就開始回彈。
下拉過程也可以同理分析。
歡迎留下你的解決方法。