javascript-在Android中使用Jquery Mobile和Phonegap进行Touchmove和可滚动内容

好的,所以我发现使用Jquery Mobile和Phonegap开发android App在android 4中工作正常,但是在旧版本(例如2.2.2)上,可滚动功能中断.因此,我尝试使用iScroll,但是存在冲突的问题,最终我只是决定编写一个Javascript函数来处理它.它曾经可以工作,但是现在坏了.

所以这里是:

<!DOCTYPE HTML>
    <html>

<head>

<title>Cordova</title>

            <script type="text/javascript" charset="utf-8" src="cordova-2.0.0.js"></script>
            <script type="text/javascript" charset="utf-8" src="js/jquery-1.8.1.min.js"></script>
            <script type="text/javascript" charset="utf-8" src="js/jquery.mobile-1.2.0-beta.1.min.js"></script>


            <style>
            .scrollstyle{
            height: 320px;
            }
            </style>


            <script type="text/javascript">

             document.addEventListener("deviceready", checkVersion, false);

                function checkVersion() {

                    var droidversion = device.version;

                    myversion = droidversion.substr(0,1);

                    alert(myversion);

                    if ( parseInt(myversion) < 3 ) {
                        alert("do the scroll");
                        setTimeout(function () {
                            var startY = 0;
                            //var startX = 0;
                            var b = document.body;
                            b.addEventListener('touchstart', function (event) {
                                startY = event.targetTouches[0].screenY;
                                //startX = event.targetTouches[0].screenX;
                            });

                            b.addEventListener('touchmove', function (event) {
                                event.preventDefault();
                                var posy = event.targetTouches[0].screenY;
                                var h = parent.document.getElementById("scrolldroid");
                                var sty = h.scrollTop;

                                //var posx = event.targetTouches[0].screenX;
                                //var stx = h.scrollLeft;
                                h.scrollTop = sty - (posy - startY);
                                //h.scrollLeft = stx - (posx - startX);
                                startY = posy;
                                //startX = posx;
                            });
                        }, 1000);

                    } else {
                        alert("havent done it!");
                        return false;
                    }
                }


            </script>

            <link rel="stylesheet" href="css/jquery.mobile-1.2.0-beta.1.min.css" type="text/css" />

    </head>
    <body>
            <div data-role="dialog" id="main" data-theme="a">

                <div data-role="header" class="header">

                    <h1>Styles</h1>

                </div><!-- /header -->

                    <div data-role="content" data-them="a">

                        <div id="scrolldroid" class="scrollstyle">


                                <ul data-role="listview">     
                                    <li>OK, that works, but why is the scrollbar</li>
                                    <li> scrolled down to the bottom of the dialog </li>
                                    <li>fsgsgestcontent, and not at the </li>
                                    <li>Line4</li>
                                    <li>Line5</li>
                                    <li>Line6</li>
                                    <li>Line7</li>
                                    <li>Line8</li>
                                    <li>Line9</li>
                                    <li>Line10</li>
                                    <li>Line11</li>
                                    <li>Line12</li>
                                    <li>Line13</li>
                                    <li>Line14</li>
                                    <li>Line15</li>
                                    <li>Line16</li>
                                    <li>Line17</li>
                                    <li>Line18</li>
                                    <li>Line19</li>
                                    <li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li>
                                    <li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li>
                                    <li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li>
                                    <li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li>
                                    <li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li>
                                    <li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li>
                                    <li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li>
                                    <li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li>
                                    <li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li>
                                    <li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li>
                                    <li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li>
                                    <li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li>
                                    <li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li>
                                    <li>fsgsgesthsdgfeagsdgsdgwe4ghesgaegeg</li>
                                </ul>

                        </div>   

                    </div><!-- /content -->

                <div data-role="footer" class="footermodal">
                    <h1>footer</h1>

                </div><!-- /footer -->

            </div>
        </body>
    </html>

我仍然是初级开发人员,所以我的代码并不完美,抱歉.但是它应该可以工作,在Android 3中它不会执行该功能,因为滚动已经可以了.在Android 2.9.9或更低版本中可以.而且它应该使div可滚动,但不是,它曾经是,但是后来我以某种方式将其破坏了,我不知道该怎么做.如果有人知道或可以看到它的坏处,我会永远爱你告诉我.谢谢.

编辑我在Eclipse LogCat中也不断出现黄色错误,指出:“在等待WebCore响应以进行落地操作时,缺少拖动”

解决方法:

尝试替换:

<div data-role="dialog" id="main" data-theme="a"> 

通过

<div data-role="page" id="main" data-theme="a">

并删除ID为scrolldroid的div

<div id="scrolldroid" class="scrollstyle"> </div>

并替换:

<div data-role="footer" class="footermodal">

通过

<div data-role="footer" data-position="fixed" data-tap-toggle="false">

原文地址:https://codeday.me/bug/20191011/1891654.html

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


HTML5和CSS3实现3D展示商品信息的代码
利用HTML5中的Canvas绘制笑脸的代码
Html5剪切板功能的实现
如何通过HTML5触摸事件实现移动端简易进度条
Html5移动端获奖无缝滚动动画实现
关于HTML5和CSS3实现机器猫的代码
HTML5使用DOM进行自定义控制
使用HTML5 Canvas绘制阴影效果的方法
使用PHP和HTML5 FormData实现无刷新文件上传
如何解决HTML5 虚拟键盘出现挡住输入框的问题
HTML5中div和section以及article的区别分析
html5和CSS 实现禁止IOS长按复制粘贴功能
html5 touch事件实现触屏页面上下滑动
canvas 模拟实现电子彩票刮刮乐的代码
HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能
Android自定义环形LoadingView效果
HTML5 canvas绘制五角星的方法
html5使用html2canvas实现浏览器截图
使用Canvas处理图片的方法介绍
利用Canvas模仿百度贴吧客户端loading小球的方法