Touchmove和使用jQuery

Touchmove和使用jQuery

本文介绍了Touchmove和使用jQuery Mobile和PhoneGap的Andr​​oid中滚动内容的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

好了,所以我发现,使用jQuery Mobile和PhoneGap的开发Android应用程序工作正常,在机器人4+,但旧版本,例如2.2.2滚动功能中断。所以我试图用iScroll,但也有相互矛盾的问题,最终我决定写一个JavaScript函数来处理它。它用于工作,但现在它的破裂。

Ok so I found that using Jquery Mobile and Phonegap to develop android App works fine in android 4+, but on older versions for example 2.2.2 the scrollable functionality breaks. So I tried to use iScroll, but there were conflicting issues, eventually I just decided to write a Javascript function to handle it. It used to work but now its broken.

所以在这里,它是:

<!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>

我还是一个初级开发人员,所以我的code是不完美的,对不起。但它应该工作,在Android中3+不执行该功能,因为滚动已经工作。在安卓2.9.9或更少它。它应使格滚动的,但它不,它曾经后来我把它弄坏了不知何故,我无法弄清楚如何。如果有人知道或能看到它打破我会永远爱你告诉我。谢谢你。

I'm still a junior developer so my code isn't perfect, sorry. But It should work, in Android 3+ it doesn't execute the function, because the scrolling already works. In Android 2.9.9 or less it does. And it should make the div scrollable, but it doesn't, it used to but then I broke it somehow and I can't figure out how. If anyone knows or can see where Its broken I will love you forever for telling me. Thanks.

修改我也一直得到一个黄色的错误在Eclipse LogCat中指出:小姐,我们正在等待的WebCore的响应触摸向下拖动

Edit I also keep getting a yellow error in Eclipse LogCat stating: "Miss a drag as we are waiting for WebCore's response for touch down"

推荐答案

尝试更换:

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

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

和id为删除分区 scrolldroid

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

和替换:

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

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

这篇关于Touchmove和使用jQuery Mobile和PhoneGap的Andr​​oid中滚动内容的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!

08-12 05:21