Question

我正在使用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>

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

感谢。

更新： scroll.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文件夹。

因此。请帮助我的朋友。

Answer 1

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

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

我希望对某人有帮助。

Answer 2

尝试在'pageshow'事件后初始化/刷新该函数，因为iScroll存在 display：none 属性的问题。

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

例如：

$('#<id-of-your-jqm-page>').on('pageshow', function() {
    setTimeout(function () {
        myScrollFunction .refresh();
    }, 100);
});

iScroll for Multipages

2 个答案: