ICode9

精准搜索请尝试: 精确搜索
首页 > 编程语言> 文章详细

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

2019-10-11 09:39:04  阅读:155  来源: 互联网

标签:android javascript html5 cordova jquery-mobile


好的,所以我发现使用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">

标签:android,javascript,html5,cordova,jquery-mobile
来源: https://codeday.me/bug/20191011/1891654.html

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有