简体   繁体   English

iScroll无法与jQuery Mobile一起执行

[英]iScroll not executing with jQuery Mobile

I need to implement iScroll in my jQuery Mobile pages. 我需要在jQuery Mobile页面中实现iScroll。 I need it to scroll a large table horizontally. 我需要它水平滚动大表。 Since the first beta of iScroll 5 has been released, I'd like to use this version, which include a horizontal scrolling mode. 自从iScroll 5的第一个Beta发布以来,我想使用此版本,其中包括水平滚动模式。

Here's the global syntax of the code I'm supposed to use : 这是我应该使用的代码的全局语法:

<html>
    <head>
        <meta name="apple-mobile-web-app-capable" content="yes">
        <script src="/JAVASCRIPT/jquery-1.9.1.min.js"></script>
        <script src="/JAVASCRIPT/jquery.mobile-1.3.0.min.js"></script>
        <script src="/JAVASCRIPT/iscroll.js"></script>
        <script type="text/javascript">
            var myScroll;

            function loaded () {
                myScroll = new IScroll('#wrapper', { eventPassthrough: true, scrollX: true, scrollY: false });
                }
        </script>
    <head>

    <body onload="loaded()">
        <div data-role="page">
        <div data-role="content" id="content">
            <div id="wrapper">
                <div id="scroller">
                    <table>
                    </table>
                </div>
            </div>
        </div>
        </div>
    </body>
</html>

The problem is that jQuery Mobile uses AJAX to load the content. 问题是jQuery Mobile使用AJAX加载内容。 And because the page with the table isn't the first page, my javascript isn't executed. 并且因为带有表的页面不是第一页,所以我的JavaScript未被执行。 The whole site is supposed to be an iPhone webapp, so I can't just skip the ajax navigation for this page, otherwise the iPhone loads this page out of the webapp, in Safari. 整个网站应该是一个iPhone Webapp,所以我不能只跳过此页面的Ajax导航,否则iPhone会将这个页面从Safari中的WebApp加载出去。 The script works perfectly in safari, but nothing moves in my webapp! 该脚本在safari中可以完美运行,但是在我的webapp中什么都没有动!

I need an explanation on how to load these few lines in the page, please : 我需要有关如何在页面中加载这几行的说明,请:

<script type="text/javascript">
    var myScroll;

    function loaded () {
        myScroll = new IScroll('#wrapper', { eventPassthrough: true, scrollX: true, scrollY: false });
    }
</script>

I've already searched a lot, I found something about binding the script with the pagecreate event, but I couldn't make it work. 我已经进行了很多搜索,发现了一些有关将脚本与pagecreate事件绑定的信息,但是无法使其正常工作。

There's a special adaptation of iScroll for jQuery Mobile, but it was made for iScroll 4... You are my only hope! iScroll针对jQuery Mobile进行了特殊的改编,但它是为iScroll 4设计的……您是我唯一的希望!

English isn't my first language, so please ask me if you didn't understand something. 英语不是我的母语,所以请问我您是否听不懂。

Thanks in advance for your help! 在此先感谢您的帮助!

Try something like: 尝试类似:

$(document).on('pageshow', '.mypage', function() {
        var myPageScroll = new IScroll('#wrapper', { eventPassthrough: true, scrollX: true, scrollY: false });
});

Add 'mypage' class to your page 将“ mypage”类添加到您的页面

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM