jQuery Mobile滚动视图 [英] jQuery Mobile Scrollview

问题描述

所以我想制作一个可滚动的列表:

So I'm trying to make a scrollable list:

<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">标记

enclosed in: <.section class="ex_list" style="float: right; width:70%;overflow:hidden"> tag

我使用以下脚本:

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

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

除了jqm和jq.问题是，在PC上滚动不起作用(虽然还不算太糟)，但是在iPad上，除了listview之外，整个网站还在滚动.用户还可以在站点上滚动并看到灰色背景，直到野生动物园停止滚动.

In addition to jqm and jq. Problem is that on PC scrolling doesn't work (yet it's not so bad), but on iPad whole site is being scrolled in addition to listview. User can also scroll OVER the site and see gray bg, until safari stops scrolling.

另外，这2个JS的make'toggleClass()'jQuery函数不起作用.

In addition these 2 JS's make 'toggleClass()' jQuery function not work.

推荐答案

我刚刚在android(2.2和3.2)和iphone(不是ipad)上实现了此功能，scrollview才能正常工作，您需要包括 css 文件和

I just finished implementing this on android(2.2 and 3.2) and on iphone (not ipad) for scrollview to work properly, you need to include the css file, and the jquery easing script.

必须按以下顺序包含脚本:

Scripts must be included in this order:

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

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

The css file gives you the scroll bars, jquery.easing gives the smooth animation (an impressive project by itself), jquery.mobile.scrollview does the heavy lifting, scrollview scrapes the page and adds enough markup for the scrollview to take over.

我确定我不必出于某种原因告诉您它是实验性的"(滚动浏览列表视图时的怪异行为，它也破坏了在铬浏览器上单击按钮和文本区域的功能-我尚未测试其他浏览器)，但是在移动设备上发现的问题很少.我真的很喜欢它，它使我可以始终将选项卡保持在页面顶部.嵌套许多滚动视图也很酷.

I am sure I don't need to tell you that it's is 'Experimental' for a reason (bizarre behaviour while scrolling through a listview, it also breaks the ability to click on buttons and in text areas on chromium-browser - I haven't tested other browsers), however I have found very few problems with it on mobile devices. I really like that it enables me to keep the tabs at the top of the page all the time. Nesting many scrollviews is pretty cool as well.

我不能说我已经注意到toggleClass函数的任何问题，但是这可能与滚动浏览并添加标记有关.

I can't say that I have noticed any problems with toggleClass function, however that might have something to do with scrollview going through and adding markup.

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

NOTE: As of the most recent version of jQuery mobile rc2, the buttons and text inputs should work.

编辑

从jQuery Mobile 1.1.0开始，它是固定标题，页眉(或页脚)中的data-position="fixed"属性，并完全删除滚动视图.

As of jQuery Mobile 1.1.0, it is recommended to use the fixed headers using the data-position="fixed" attribute in the header (or footer) and completely remove scrollview.

我自己尝试过此方法，它的性能要好得多(对于Android 2.2+和iOS5-未经过我测试的BlackBerry OS，但博客声称它应适用于BB7).它比js解决方案运行更快，更流畅，并且图形错误更少.确保删除所有多余的js，css和对data-scroll的所有引用，因为它会干扰/破坏所有内容.

I have tried this myself and it works much better (for Android 2.2+ and iOS5 - BlackBerry OS not tested by me, but the blog claims it should work for BB7). It runs faster and smoother than the js solution and has fewer graphical bugs. Be sure to remove all the extra js, css and all references to data-scroll as it interferes/breaks everything.

对于不受支持的版本和操作系统，您可能仍需要scrollview js/css等，但是以我的经验，不支持固定标头的地方太慢了，无论如何都无法运行js版本.

For unsupported versions and OS's you might still need the scrollview js/css etc, but in my experience the places that don't support the fixed headers were too slow to run the js version anyway.

这篇关于jQuery Mobile滚动视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！