jQuery 移动 ScrollView

Question

所以我正在尝试制作一个可滚动列表:

<div data-role="content-primary" class="list" style="height:100%; overflow:scroll" data-scroll="y">
    <ul data-role="listview" id="mainList" >
        <asp:Repeater ID="expList" runat="server" OnItemDataBound="expList_ItemDataBound" ClientIDMode="Static">
            <ItemTemplate>
                <li class="opener" runat="server" id="lItem" style="border-top: 1px solid rgb(200,200,200)">
                    <div id="divPic" runat="server" class="pic">
                        <h2><asp:Literal runat="server" ID="litName"></asp:Literal></h2>
                        <p><asp:Literal runat="server" ID="litDesc"></asp:Literal></p>
                        <input type="hidden" Id="brand" runat="server"/>
                        <input type="hidden" Id="cat" runat="server"/>
                    </div>
                </li>
            </ItemTemplate>
        </asp:Repeater>
    </ul>
</div>

包含在:<.section class="ex_list"style="float: right; width:70%;overflow:hidden">标签

我使用以下脚本:

http://jquerymobile.com/test/experiments/scrollview/jquery.mobile.scrollview.js

http://jquerymobile.com/test/experiments/scrollview/scrollview.js

除了jqm和jq。问题是，在 PC 上滚动不起作用(但还不错)，但在 iPad 上，除了 ListView 之外，整个网站都在滚动。用户还可以滚动网站并看到灰色背景，直到 safari 停止滚动。

编辑:此外，这 2 个 JS 使“toggleClass()”jQuery 函数不起作用。

Answer 1

我刚刚在 android(2.2 和 3.2)和 iphone(不是 ipad)上实现了这个，为了使 ScrollView 正常工作，您需要包含 css文件，以及 jquery easing脚本。

脚本必须按此顺序包含:

1. jquery
2. jquery.mobile
3. jquery.easing
4. jquery.mobile.scrollview
5. ScrollView

css 文件为您提供滚动条，jquery.easing提供流畅的动画(本身就是一个令人印象深刻的项目)，jquery.mobile.scrollview 完成繁重的工作，scrollview 抓取页面并添加足够的标记以供 ScrollView 接管。

我确信我不需要告诉你它是“实验性的”是有原因的(滚动 ListView 时的奇怪行为，它也破坏了在 chromium 浏览器上单击按钮和文本区域的能力 -我没有测试过其他浏览器)，但是我发现它在移动设备上几乎没有问题。我真的很喜欢它使我能够始终将选项卡保留在页面顶部。嵌套许多 ScrollView 也很酷。

我不能说我注意到了toggleClass函数的任何问题，但这可能与 ScrollView 的遍历和添加标记有关。

注意:从最新版本的 jQuery mobile rc2 开始，按钮和文本输入应该可以工作。

编辑

从 jQuery Mobile 1.1.0 开始，它是 recommended使用fixed headers在页眉(或页脚)中使用 data-position="fixed" 属性并完全删除 ScrollView 。

我自己尝试过，效果更好(对于 Android 2.2+ 和 iOS5 - 黑莓操作系统未经我测试，但博客声称它应该适用于 BB7)。它比 js 解决方案运行得更快、更流畅，并且图形错误更少。请务必删除所有额外的 js、css 和所有对 data-scroll 的引用，因为它会干扰/破坏一切。

对于不受支持的版本和操作系统，您可能仍然需要 ScrollView js/css 等，但根据我的经验，不支持固定 header 的地方无论如何都无法运行 js 版本。