javascript - 使用纯 JavaScript 在滚动端捕捉页面(适用于 Cordova 应用程序)

Question

我开发了一个有 3 个页面的移动应用程序。 页面以水平线布局。用户通过在包含所有 3 个页面的 div 上向左或向右滑动来在页面之间导航。

我已经编写了一些似乎有时可以工作的代码。

Please keep in mind that the HTML and CSS i have listed below is simplified for you to get a quicker understanding. The width of each AppPage and the AppPages_Container will be set dynamically via javascript when the app loads.

HTML

<div id="AppDisplayArea">
  <div id="AppPages_Container" onscroll="get_PagePosition()">
    <div class="AppPage">Page 1</div>
    <div class="AppPage">Page 2</div>
    <div class="AppPage">Page 3</div>
  </div>
</div>

CSS

#AppDisplayArea{position:absolute; top:0; left:0; width:100%; height:100%; overflow-x:scroll;} 
#AppPages_Container{position:absolute; z-index:1; top:0px; bottom:0px; left:0; margin:0; width:2160px; height:100%;}
.AppPage{position:relative; width:720px; height:100%; display:block; float:left;}

JAVASCRIPT

这是通过 onscroll 事件调用的第一个函数

function get_PagePosition()
{
 var Container = document.getElementById('AppPages_Container'); 
 var scroll_position = Container.scrollLeft;

 var FIRST = 0;
 var SECOND = window.innerwidth;
 var THIRD = window.innerwidth*2;

 var Page1_Position = (Math.abs(FIRST - scroll_position));
 var Page2_Position = (Math.abs(SECOND - scroll_position));
 var Page3_Position = (Math.abs(THIRD - scroll_position));

 var Nearest_Page = Math.min(Page1_Position, Page2_Position, Page3_Position);

 setTimeout(function(){ check_position(); },60);


   function check_position()
    {
      if(Page1_Position==Nearest_Page){SnapPage('Pages_Container',0);}
      if(Page2_Position==Nearest_Page)SnapPage('Pages_Container',1);}
      if(Page3_Position==Nearest_Page)SnapPage('Pages_Container',2);}
    }

}// End get_PagePosition

这是执行实际捕捉的第二个函数(使用嵌套的 Animate() 函数)

function SnapPage(_object,_position){   

var LEFT = (window.innerWidth*_position);                        
var Page   = document.getElementById(_object);
var Scroll_Speed = 10; 
var Scroll_Direction;
var Count = (Math.abs(Page.scrollLeft - LEFT));
var ScrollTimer = setInterval(function(){ Animate(); }, 1);

if(LEFT > Page.scrollLeft){Scroll_Direction=1;}
if(LEFT < Page.scrollLeft){Scroll_Direction=-1;}
if(LEFT == Page.scrollLeft){Scroll_Direction=0;}

 function Animate()
 { 
  if(Count<=0){clearInterval(ScrollTimer); Page.scrollLeft=LEFT; return;}
  Page.scrollLeft += (Scroll_Direction*Scroll_Speed);  
  Count-=Scroll_Speed; if(Count<0){Count=0;}
 }


return false;              
}//End SnapPage.

有没有一种更简单(更可靠)的方法来实现页面捕捉而不使用 JavaScript 框架？ ...请提供建议或更好的解决方案来提供帮助。谢谢。

Answer 1

不要使用 onscroll 事件，而使用 touchstart 和 touchmove 事件。

触摸事件将为您提供一个包含触摸坐标数组的事件，以便您可以使用它们来检测滑动。

跟踪当前 View ，并根据滑动更改当前 div。

所以一个简单的实现是:

var xStart;
var currentScreen = 1;

function onTouchStart(e) {                                         
    xStart = e.touches[0].clientX;                                      
};                                                

function onTouchMove(e) {
    if (!xStart) return;

    if (xStart - e.touches[0].clientX > 0) {
        // Handle left swipe
        currentScreen++;
        if (currentScreen > 3) currentScreen = 1; 
    } else {
        // Handle right swipe
        currentScreen--;
        if (currentScreen < 1) currentScreen = 3; 
    }                       

    xStart = null;
};