ionic 監聽頁面滾動,點擊停止滾動


類似今日頭條,頁面上有很多card,點擊每個card跳轉該card的詳情頁面。這里有一個問題,當我滾動頁面時,會先后觸發touchstart、touchmove、touchend,但是當touchend后,頁面仍會因為慣性而繼續滾動。這個時候,我想點擊頁面停止滾動,而不是跳轉到某個card的詳情頁面。

原理很簡單:設置一個狀態,初始值為true,頁面滾動時變為false,頁面停止滾動,則恢復為true,只有這個值為true時,才能觸發跳轉事件,即進入card詳情頁面。

這里需要用到ionic的一個屬性——ionic.scroll.isScrolling。關於這個屬性,可以使用on-scroll來測試:

html: ion-content scroll="true" on-scroll="onScroll()"></ion-content>

js: $scope.onScroll = function() {

  console.log(ionic.scroll.isScrolling);  //可以看到,即使是手指離開屏幕,頁面在慣性滾動時,值仍為true

};

 

代碼:

$scope.canGoDetailCard = true;  //一開始默認能跳轉進card詳情頁;

 

//監聽touch事件

window.addEventListener('touchstart', function() {

  if (ionic.scroll.isScrolling) {  //判斷頁面是否正在滾動

    $scope.canGoDetailCard = false;  // 如果正在滾動,則點擊跳轉card詳情頁失效

    ionic.scroll.isScrolling = false;  //同時停止滾動;

  } else {

    $scope.canGoDetailCard = true; //沒有滾動時,跳轉進入card詳情頁

  }

});

 

$scope.goDetailCard = function() {

  if (!$scope.canGoDetailCard) return; // 如果$scope.canGoDetailCard = false, 則返回

  $state.go('card');  //進入card詳情頁

};


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM