1

我需要在 jQuery Mobile 和 PhoneGap 中使用 scrowview 创建列表的帮助。我正在使用 iscrollview 并尝试采取措施来调整我的应用程序。在滚动视图附带的示例中，使用带有 data-iscroll 和列表 (ol) 的 div，仅此页面。我试图在正文中放入一个日期滚动 div，并在 div 中放入一个列表，在她获得另一个列表而不滚动之后。但是滚动这个没有正确回答的卷轴会“卡在”一个位置。这是我的代码：

    <!DOCTYPE html>
<html>
    <head>
    <title>Page 1</title>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"
        charset="utf-8" />

    <!--- STYLE --->
    <link rel="stylesheet"
        href="style/jquery.mobile-1.2.0.min.css" />
    <link rel="stylesheet" href="style/jquery.mobile.iscrollview.css" />
    <link rel="stylesheet" href="style/jquery.mobile.iscrollview-pull.css" />
    <link rel="stylesheet" href="style/smart_mobile_theme.css" />

    <!--- JS --->
    <script src="js/jquery-1.8.2.min.js" type="text/javascript"></script>
    <script src="js/jquery.mobile-1.2.0.min.js" type="text/javascript"></script>
    <script src="js/index.js" type="text/javascript"></script>
    <script src="js/iscroll.js" type="text/javascript"></script>
    <script src="js/jquery.mobile.iscrollview.js" type="text/javascript"></script>
    <script src="js/cordova-2.2.0.js" type="text/javascript"></script>

    </head>
    <body>

        <div data-role="page" id="index" data-theme="a">
            <div data-role="header" data-theme="a" data-position="fixed"
                    data-tap-toggle="false">
            </div>

            <div class="content">

                <div id="listFilter"
                    style="width: 100%; margin-top: 10%; padding: 5px; margin-bottom: 5%"
                    data-iscroll class="iscroll-wrapper">
                    <div class="iscroll-scroller">
                        <div class="iscroll-content">

                            <ul id="listVeiculos" data-role="listview" data-theme="d"
                                data-filter-placeholder="Vehicle" data-filter="true"
                                data-divider-theme="d">
                                <li data-role="list-divider">
                                    <div class="ui-grid-c">

                                        <div class="ui-block-a">aaaa</div>

                                        <div class="ui-block-b">bbbb</div>

                                        <div class="ui-block-c">cccc</div>

                                        <div class="ui-block-d">dddd</div>
                                    </div>
                                </li>

                                <!-- VISUAL TEST -->
                                <li>
                                    <div class="ui-grid-c">

                                        <div class="ui-block-a">Frota 001</div>

                                        <div class="ui-block-b">ABC 0123</div>

                                        <div class="ui-block-c">R124</div>

                                        <div class="ui-block-d">SCANNIA</div>
                                    </div>
                                </li>

                                <li>
                                    <div class="ui-grid-c">

                                        <div class="ui-block-a">Frota 002</div>

                                        <div class="ui-block-b">DEF 4567</div>

                                        <div class="ui-block-c">FH12</div>

                                        <div class="ui-block-d">VOLVO</div>
                                    </div>
                                </li>

                                <li>
                                    <div class="ui-grid-c">

                                        <div class="ui-block-a">Frota 003</div>

                                        <div class="ui-block-b">GHI 8901</div>

                                        <div class="ui-block-c">1113</div>

                                        <div class="ui-block-d">MERCEDES-BENZ</div>
                                    </div>
                                </li>

                                <li>
                                    <div class="ui-grid-c">

                                        <div class="ui-block-a">Frota 004</div>

                                        <div class="ui-block-b">JKL 2345</div>

                                        <div class="ui-block-c">CARGO</div>

                                        <div class="ui-block-d">FORD</div>
                                    </div>
                                </li>

                                <!-- TESTE SCROLL -->
                                <li>
                                    <div class="ui-grid-d">

                                        <div class="ui-block-a">Frota 005</div>

                                        <div class="ui-block-b">MNO 2222</div>

                                        <div class="ui-block-c">CARGO</div>

                                        <div class="ui-block-d">FORD</div>
                                    </div>
                                </li>

                                <li>
                                    <div class="ui-grid-e">

                                        <div class="ui-block-a">Frota 006</div>

                                        <div class="ui-block-b">MNO 3333</div>

                                        <div class="ui-block-c">TEST</div>

                                        <div class="ui-block-d">TEST</div>
                                    </div>
                                </li>

                            </ul>

                        </div>
                    </div>
                </div>
            </div>

            <div class="content_div" style="margin-top: 5%;" data-position="fixed"
                data-tap-toggle="false">

                <div id="listActions">
                    <ul data-role="listview" data-inset="true"
                        style="margin-top: 5%; border: 0px" data-theme="d"
                        data-dividertheme="d">
                        <li data-role="list-divider">1-xxxxxx</li>
                        <li data-role="text">2-xxxxxx</li>
                        <li data-role="text">3-xxxxxx</li>
                        <li data-role="text">4-xxxxxx</li>
                        <li data-role="text">5-xxxxxx</li>
                        <li data-role="text">6-xxxxxx</li>
                        <li data-role="text">7-xxxxxx</li>
                    </ul>
                </div>

            </div>

        </div>

</body>
</html>

甚至我的清单也必须有一个过滤器。通过添加此过滤器，通过关注搜索框，listAction（具有滚动的列表之后的列表）在带有滚动的列表上并过滤它，因为 data-position = "fixed" date-tap-toggle = "错误的”。

谢谢！

4

0 回答 0