Html 多页滚动_Html_Cordova_Iscroll_Iscroll4

Html 多页滚动

html cordova

Html 多页滚动,html,cordova,iscroll,iscroll4,Html,Cordova,Iscroll,Iscroll4,我正在用html5 css js做phonegap项目在这个项目中，我使用iscroll swipe来解决页面之间的滑动手势问题在我的第一页上，我的iscroll工作并向下滚动所有页面但当我滑动第二页时，第二页看起来是静态的。它不见底，不显示数据，不移动这是我使用的代码 <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-

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

由于限制，我无法将iscroll js放入

所以，我没有吃js文件夹

所以。请帮助我的朋友。

我在iscroll4文档中找到了此解决方案

需要为每个需要的滚动区域初始化iScroll。如果不是由设备内存/cpu强加的iScroll数量，则任何一页上的iScroll数量都没有限制。内容的类型和长度影响您可以同时使用的iScroll数量

我希望这对其他人有所帮助。

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

请在此处查看我的详细说明：

例如：

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

$（'#'）。在（'pageshow'，function（）上{
setTimeout（函数（）{
myScrollFunction.refresh（）；
}, 100);
});

JS部件在哪里？您在那里创建（并可能销毁）iScroll？我更新了它。你能检查一下吗

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