1

我正在用 html5-css-js 做 phonegap 项目。

在这个项目中，我使用 iscroll swipe 来解决页面之间的滑动手势问题。

在我的第一页上，我的 iscroll 工作并向下滚动所有页面。

但是当我刷我的第二页时，我的第二页看起来是静态的。它不触底，不显示数据，不移动。

这是我使用的代码；

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"/>
    <link rel="stylesheet" type="text/css" href="css/styles.css">
    <script type="text/javascript" src="js/cordova-2.5.0.js"></script>
</head>
<body>

    <div class="frame">

        <div id="pageWrapper">

            <div id="pageScroller">

                <div class="page" >
                    <div id="wrapper">
                        <div class="scroller">
                            <h1>Canlı Skorlar</h1>
                            <hr/>
                            <table border="1">
                                <tr>
                                    <td rowspan="2" width="15%" align="center"> data1 </td> 
                                    <td width="85%"> data2</td>
                                    <td> data3 </td>
                                </tr> 
                                <tr> 
                                    <td> data4 </td> 
                                    <td> data5</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="page" >
                    <div id="wrapper">
                        <div class="scroller">
                            <h1>Canlı Skorlar</h1>
                            <hr/>
                            <table border="1">
                                <tr>
                                    <td rowspan="2" width="15%" align="center"> data1 </td> 
                                    <td width="85%"> data2</td>
                                    <td> data3 </td>
                                </tr> 
                                <tr> 
                                    <td> data4 </td> 
                                    <td> data5</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="page" >
                    <div id="wrapper">
                        <div class="scroller">
                            <h1>Canlı Skorlar</h1>
                            <hr/>
                            <table border="1">
                                <tr>
                                    <td rowspan="2" width="15%" align="center"> data1 </td> 
                                    <td width="85%"> data2</td>
                                    <td> data3 </td>
                                </tr> 
                                <tr> 
                                    <td> data4 </td> 
                                    <td> data5</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>

                <div class="page" >
                    <div id="wrapper">
                        <div class="scroller">
                            <h1>Canlı Skorlar</h1>
                            <hr/>
                            <table border="1">
                                <tr>
                                    <td rowspan="2" width="15%" align="center"> data1 </td> 
                                    <td width="85%"> data2</td>
                                    <td> data3 </td>
                                </tr> 
                                <tr> 
                                    <td> data4 </td> 
                                    <td> data5</td>
                                </tr>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

<script src="js/jquery-1.7.2.min.js"></script>
<script src="js/iscroll.js"></script>
<script src="js/scroll.js"></script>

</body>
</html>

任何人都可以告诉我如何摆脱这个问题？

谢谢。

更新：滚动.js

document.addEventListener("orientationchange", updateLayout);

// The wrapperWidth before orientationChange. Used to identify the current page number in updateLayout();
wrapperWidth = 0;

var myScroll = new iScroll('pageWrapper', {
    snap: true,
    momentum: false,
    hScrollbar: false,
    vScrollbar: false,
    lockDirection: true});

updateLayout();

function updateLayout() {

    var currentPage = 0;

    if (wrapperWidth > 0) {
        currentPage = - Math.ceil( $('#pageScroller').position().left / wrapperWidth);
    }

    wrapperWidth = $('#pageWrapper').width();

    $('#pageScroller').css('width', wrapperWidth * 4);
    $('.page').css('width', wrapperWidth - 40);
    myScroll.refresh();
    myScroll.scrollToPage(currentPage, 0, 0);
}

page3Scroll = new iScroll('wrapper', {hScrollbar: false, vScrollbar: false, lockDirection: true });

由于限制，我无法放置 iscroll js。

所以，我没有吃 js 文件夹。

所以。帮助请我的朋友。

4

2 回答 2

1

我在 iscroll4 文档上找到了这个解决方案。

“iScroll 需要为您需要的每个滚动区域进行初始化。对于任何单个页面上可以拥有的 iScroll 数量没有限制，如果不是由设备内存/cpu 强加的话。内容的类型和长度会影响数量可以同时使用的 iScrolls。”

我希望它对某人有所帮助。

于 2013-04-16T11:28:38.237 回答
1

尝试在“pageshow”事件后初始化/刷新函数，因为 iScroll 存在display:none属性问题。

在此处查看我的详细说明：https ://stackoverflow.com/a/18726304/1959362

例如：

$('#<id-of-your-jqm-page>').on('pageshow', function() {
    setTimeout(function () {
        myScrollFunction .refresh();
    }, 100);
});
于 2013-09-13T20:37:31.203 回答