Javascript 滑动一个div将打印一条消息并消失，而不是显示另一个div（PhoneGap 2.9-Android）
我希望在我正在实现的移动应用程序的第一个html页面中有一个滑动功能。我使用PhoneGap2.9和Eclipse。对于这个函数，我使用了Page_scrolling.html文件及其调用的JavaScripts 我希望具有滑动功能的.html文件中的头部：Javascript 滑动一个div将打印一条消息并消失，而不是显示另一个div（PhoneGap 2.9-Android）,javascript,android,cordova,swipe,Javascript,Android,Cordova,Swipe,我希望在我正在实现的移动应用程序的第一个html页面中有一个滑动功能。我使用PhoneGap2.9和Eclipse。对于这个函数，我使用了Page_scrolling.html文件及其调用的JavaScripts 我希望具有滑动功能的.html文件中的头部： <head> <meta name="viewport" content="width=device-width,initial-scale=1"> <meta cont
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta content="text/html; charset=ISO-8859-1" http-equiv="content-type">
<title>Guide-Me For-All</title>
<link href='http://fonts.googleapis.com/css?family=Patrick+Hand|Permanent+Marker|Exo|Nunito|Limelight|Ubuntu|Montserrat|Audiowide|Architects+Daughter' rel='stylesheet' type='text/css'>
<!-- import stylesheets -->
<link rel="stylesheet" type="text/css" href="../../css/home/home.css">
<link rel="stylesheet" type="text/css" href="../../css/home/home-eng-fonts.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.css" />
<link rel="stylesheet" href="../../jQuery-Mobile-Bootstrap-Theme-master/themes/Bootstrap.css">
<!-- <link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<link href="http://twitter.github.com/bootstrap/assets/js/google-code-prettify/prettify.css" rel="stylesheet" /> -->
<link href="css/main.css" type="text/css" rel="stylesheet" />
<!-- import js -->
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.4/jquery.mobile-1.4.4.min.js"></script>
<script type="text/javascript" charset="utf-8" src="../../cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="../../jss/connect.js"></script>
<script type="text/javascript" charset="utf-8" src="../../jss/home/change_page.js"></script>
<script type="text/javascript" src="https://google-code-prettify.googlecode.com/svn/loader/run_prettify.js"></script>
<script type="text/javascript" src="../../plugins/jquery.touchSwipe.min.js"></script>
<script type="text/javascript" src="../../plugins/js/main.js"></script>
<script src="../../plugins/swipe.js"></script>
<body>
<div id="logo">
<img id="lg" src="../../imgs/logo.png" alt="Logo">
</div>
<div id="trust_us">
<div id="trust_us_h2">
<h3>Why you should trust us :</h3>
</div>
<ul>
<li><p>All the info about the shops, are being validated with their owners.</p></li>
<li><p>You can send your thoughts or complaints to the shops' owners, so that they will do improvements to it. *</p></li>
</ul>
<div id="notice">*Only for occasions when there was a contact between administrator - shop's owner!</div>
</div> <!--trust us-->
<div id="how_it_works">
<div id="how_it_works_h2">
<h3>How it works :</h3>
</div>
<div id="first">
<h5>First:</h5>
</div>
<div id="Sign_Up" class="float-left">
<img src="../../imgs/1sign-up.png" alt="Sign-Up">
<p> 1. Register</p>
</div>
<div id="Rate" class="float-right">
<img src="../../imgs/5rate.png" alt="Rate">
<p>5. Rate it according to your experience</p>
</div>
</div> <!--how it works-->
<div id="owners">
<div id="owners_h2">
<h3>For the owners of a shop :</h3>
</div>
<ol>
<li><p>Register</p></li>
<li><p>After that, you can take interesting reports and useful statistics about your shop. *</p></li>
<li><p>Now, you can do improvements to your shop according to what the customers need so you can get even more of them.</p></li>
</ol>
<div id="notice">*Contact the admin of the app for more information.</div>
</div> <!--owners-->
<div id="sign_up_in">
<h2>...REGISTER NOW OR SIGN IN...</h2>
<a href="#" data-role="button" data-theme="f" data-icon="heart" onclick="change_page();">Sign-Up Now!</a>
</div>
<div id="last_line">
<br>
</div>
<div id="footer">
<p>Copyright (c) 2014 Guide-Me For-All. Design by Marialena S.</p>
</div>
</body>
现在发生的事情是，当我向左或向右滑动一个div时，它消失了，在它的位置出现了一条消息。所有的div都是垂直排列的。当您滚动页面时，从一开始就可以查看所有内容。我现在想要的是，当我向右滑动第一个div时，例如，显示第二个div。以同样的方式，我想执行向左滑动功能以显示前一个div。仅此而已。我尝试了许多其他选项，但这看起来最简单。我找不到解决问题的方法，但我找到了非常好的教程，而且滑动功能非常简单。但如果有人发现我在上述代码中的错误，请发布答案，以便我也可以学习如何使用此方法执行滑动功能。滑动页面或向下滚动页面？如果是滚动的话，看看这个问题，我回答了一个具体的例子，滑动和滚动。。。。滚动正在工作，因为我现在检查我将更新我的css，但滑动不工作。这一页是另一页的下一页。上下滑动并不需要Iscroll滑动。JQM有一个函数可以做到这一点。--您只需要设置滑动后要向下或向上滚动多少像素的动画。我的.html文件呢？我必须在那里写些什么？我的意思是，在我的例子中，我精确地除以是。为页面或元素指定id，然后创建一个函数，例如$'page1.onswipeup，函数{滚动到下一页或元素}；-在这里查看如何使用iscroll滚动到另一个元素的示例，或者查看如何执行此操作--但要小心，因为您将iscroll与向上滑动混合在一起，因此他们可能会混淆滚动和向上滑动这两个事件
<body>
<div id="logo">
<img id="lg" src="../../imgs/logo.png" alt="Logo">
</div>
<div id="trust_us">
<div id="trust_us_h2">
<h3>Why you should trust us :</h3>
</div>
<ul>
<li><p>All the info about the shops, are being validated with their owners.</p></li>
<li><p>You can send your thoughts or complaints to the shops' owners, so that they will do improvements to it. *</p></li>
</ul>
<div id="notice">*Only for occasions when there was a contact between administrator - shop's owner!</div>
</div> <!--trust us-->
<div id="how_it_works">
<div id="how_it_works_h2">
<h3>How it works :</h3>
</div>
<div id="first">
<h5>First:</h5>
</div>
<div id="Sign_Up" class="float-left">
<img src="../../imgs/1sign-up.png" alt="Sign-Up">
<p> 1. Register</p>
</div>
<div id="Rate" class="float-right">
<img src="../../imgs/5rate.png" alt="Rate">
<p>5. Rate it according to your experience</p>
</div>
</div> <!--how it works-->
<div id="owners">
<div id="owners_h2">
<h3>For the owners of a shop :</h3>
</div>
<ol>
<li><p>Register</p></li>
<li><p>After that, you can take interesting reports and useful statistics about your shop. *</p></li>
<li><p>Now, you can do improvements to your shop according to what the customers need so you can get even more of them.</p></li>
</ol>
<div id="notice">*Contact the admin of the app for more information.</div>
</div> <!--owners-->
<div id="sign_up_in">
<h2>...REGISTER NOW OR SIGN IN...</h2>
<a href="#" data-role="button" data-theme="f" data-icon="heart" onclick="change_page();">Sign-Up Now!</a>
</div>
<div id="last_line">
<br>
</div>
<div id="footer">
<p>Copyright (c) 2014 Guide-Me For-All. Design by Marialena S.</p>
</div>
</body>