Penyelesaian kepada masalah yang isscroll.js tidak boleh melantun semula apabila menarik ke atas dan ke bawah untuk kemahiran refresh_javascript

Rakan yang telah menggunakan kesan muat semula tarik-turun dan tarik-turun iscroll.js sepatutnya menghadapi masalah ini: dalam penyemak imbas iOS, apabila menarik ke atas atau menarik ke bawah untuk memuat semula, apabila jari dileret keluar dari skrin , halaman tidak boleh melantun semula. Kerana ramai orang tidak dapat menyelesaikan masalah ini, mereka hanya tidak menyelesaikannya Sesetengah orang hanya tidak menggunakan HTML dan menggunakan halaman asli dan bukannya HTML.

Saya percaya ramai rakan juga mempunyai penyelesaian mereka sendiri, tetapi mereka belum ditulis, jadi penyelesaiannya tidak boleh didapati dalam talian. Dalam banyak kumpulan QQ, ramai orang bertanya bagaimana untuk menyelesaikan masalah ini, jadi saya menulis artikel ini untuk merekodkan penyelesaian saya, berharap ia akan membantu beberapa rakan.

Kod utama untuk muat semula tarik-turun dan tarik-turun:

 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();
   }
  }
 });

Sebab halaman tidak boleh melantun semula ialah peristiwa hujung sentuh tidak boleh dicetuskan selepas jari ditarik keluar daripada skrin dan animasi lantunan tidak boleh dilaksanakan. Penyelesaiannya adalah dengan mencetuskan kaedah animasi secara manual apabila jari berada dekat dengan tepi skrin.

Masukkan kod penghakiman dalam kaedah 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;
   }

   ......
  }

Yang berikut menerangkan maksud kod ini.

this.y ialah jarak menegak yang halaman telah ditatal, this.maxScrollY ialah jarak tatal menegak maksimum dan this.pointY ialah koordinat menegak semasa jari.

Apabila this.y < this.maxScrollY, ia sudah dalam proses pull-up Apabila (this.y < this.maxScrollY) && (this.pointY < 1), ia berada dalam pull-. proses ke atas dan jari telah menyentuh Di tepi skrin, cetuskan ini secara manual.scrollKe(0, this.maxScrollY, 400) pada masa ini dan halaman akan mula melantun semula.

Proses lungsur turun juga boleh dianalisis dengan cara yang sama.