Freunde, die den Pull-Up- und Pull-Down-Aktualisierungseffekt von iscroll.js verwendet haben, müssen auf dieses Problem gestoßen sein: im iOS-Browser beim Hochziehen oder Herunterziehen zum Aktualisieren, wenn der Finger vom Bildschirm gewischt wird , die Seite kann nicht zurückspringen. Weil viele Leute dieses Problem nicht lösen können, lösen sie es einfach nicht. Manche Leute verwenden einfach kein HTML und verwenden native Seiten anstelle von HTML.
Ich glaube, viele Freunde haben auch ihre eigenen Lösungen, aber diese wurden nicht aufgeschrieben, sodass die Lösungen nicht online zu finden sind. In vielen QQ-Gruppen fragen viele Leute, wie dieses Problem gelöst werden kann. Deshalb habe ich diesen Artikel geschrieben, um meine Lösung aufzuzeichnen, in der Hoffnung, dass er einigen Freunden hilfreich sein wird.
Der Hauptcode für die Pull-Up- und Pull-Down-Aktualisierung:
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();
}
}
});
Der Grund, warum die Seite nicht zurückspringen kann, liegt darin, dass das Touchend-Ereignis nicht ausgelöst werden kann, nachdem der Finger vom Bildschirm gezogen wurde, und die Rückprallanimation nicht ausgeführt werden kann. Die Lösung besteht darin, die Animationsmethode manuell auszulösen, wenn sich der Finger nahe am Bildschirmrand befindet.
Fügen Sie den Beurteilungscode in die onScrollMove-Methode ein:
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;
}
......
}
Im Folgenden wird die Bedeutung dieses Codes erläutert.
This.y ist die vertikale Distanz, um die die Seite gescrollt wurde, this.maxScrollY ist die maximale vertikale Scrolldistanz und this.pointY ist die aktuelle vertikale Koordinate des Fingers.
Wenn this.y < this.maxScrollY, ist es bereits im Pull-up-Prozess. Wenn (this.y < this.maxScrollY) && (this.pointY < 1), ist es im Pull-up-Prozess. Der Aufwärtsvorgang und der Finger haben den Rand des Bildschirms berührt. Lösen Sie zu diesem Zeitpunkt manuell this.scrollTo(0, this.maxScrollY, 400) aus, und die Seite beginnt sich zu erholen.
Auf die gleiche Weise kann auch der Drop-Down-Prozess analysiert werden.
