Question

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

我已经编写了似乎有效的代码。

请注意，我在下面列出的HTML和CSS是简化了您，以便更快地了解。每个的宽度当应用程序加载时，AppPage和AppPages_Container将通过javascript动态设置。

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事件。

触摸事件将为您提供包含一系列触摸坐标的事件，因此您可以使用它们来检测滑动。

跟踪当前视图，并根据滑动更改当前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;
};

使用纯javascript在页面上捕捉页面（适用于Cordova应用程序）

1 个答案: