Maison > interface Web > js tutoriel > le corps du texte

Solution au problème selon lequel isscroll.js ne peut pas rebondir lors de l'extraction de haut en bas vers les compétencesfresh_javascript

WBOY
Libérer: 2016-05-16 15:15:06
original
1100 Les gens l'ont consulté

Les amis qui ont utilisé l'effet d'actualisation pull-up et pull-down d'iscroll.js auraient dû rencontrer ce problème : dans le navigateur iOS, lorsque vous tirez vers le haut ou vers le bas pour actualiser, lorsque le doigt est glissé hors de l'écran. , la page ne peut pas rebondir. Parce que beaucoup de gens ne peuvent pas résoudre ce problème, ils ne le résolvent tout simplement pas. Certaines personnes n'utilisent tout simplement pas HTML et utilisent des pages natives au lieu de HTML.

Je crois que de nombreux amis ont aussi leurs propres solutions, mais elles n'ont pas été écrites, donc les solutions ne peuvent pas être trouvées en ligne. Dans de nombreux groupes QQ, de nombreuses personnes demandent comment résoudre ce problème, j'ai donc écrit cet article pour enregistrer ma solution, en espérant qu'elle sera utile à certains amis.

Le code principal pour l'actualisation pull-up et pull-down :

 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();
   }
  }
 });
Copier après la connexion

La raison pour laquelle la page ne peut pas rebondir est que l'événement touchend ne peut pas être déclenché une fois le doigt retiré de l'écran et que l'animation de rebond ne peut pas être exécutée. La solution est de déclencher manuellement la méthode d'animation lorsque le doigt est proche du bord de l'écran.

Insérez le code de jugement dans la méthode 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;
   }

   ......
  }

Copier après la connexion

Ce qui suit explique la signification de ce code.

this.y est la distance verticale à laquelle la page a défilé, this.maxScrollY est la distance de défilement vertical maximale et this.pointY est la coordonnée verticale actuelle du doigt.

Lorsque this.y < this.maxScrollY, il est déjà dans le processus de pull-up. Lorsque (this.y < this.maxScrollY) && (this.pointY < 1), il est dans le processus de pull-up. processus et le doigt a touché le bord de l'écran, déclenchez manuellement this.scrollTo(0, this.maxScrollY, 400) à ce moment-là, et la page commencera à rebondir.

Le processus déroulant peut également être analysé de la même manière.

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal