jQuery Mobile的滚动型

所以我想做一个滚动列表：jQuery Mobile的滚动型

<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伪类= “ex_list” 风格=“浮动：权利;宽度：70％;溢出：隐藏“>标签

我使用以下脚本：

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

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

除了jqm和jq。问题是，在电脑上滚动不起作用（但它并没有那么糟糕），但在iPad上整个网站正在滚动除了列表视图。用户也可以滚动浏览网站，看到灰色的BG，直到Safari浏览器停止滚动。

编辑：另外，这些2周JS的使 'toggleClass（）' jQuery函数无法正常工作。

来源

2011-08-31 Rufix

和你期待的结果是什么？ – JamesHalsall

除了工作'toggleClass（）'函数，以及我希望只有listview是可滚动的。或者如果整个页面应该是可滚动的，至少它不应该在页面上方滚动，显示灰色背景......您可能已经注意到它是ASP控件的一部分，Master Page没有像数据滚动一样，但它滚动：'（ – Rufix

我刚刚在android（2.2和3.2）和iphone（不是ipad）上执行此操作以使scrollview正常工作，您需要包括css文件和jquery easing脚本。

脚本必须被包括在该顺序：

jquery的
jquery.mobile
jquery.easing
jquery.mobile.scrollview
滚动视图

的css文件给你滚动条，jquery.easing giv es平滑的动画（一个令人印象深刻的项目本身），jquery.mobile.scrollview做了繁重的工作，scrollview刮除了页面并为scrollview接管了足够的标记。

我确定我不需要告诉你，这是'实验性'的原因（在滚动浏览列表视图时奇怪的行为，它也打破了点击按钮和铬浏览器文本区域的能力 - 我还没有测试过其他浏览器），但是我发现它在移动设备上的问题很少。我非常喜欢它，它使我能够始终将页面顶部保留在页面顶部。嵌套许多滚动视图也非常酷。

我不能说我已经注意到与toggleClass功能的任何问题，但是可能有一些做与滚动型经历和添加标记。

注：为最新版本的jQuery移动RC2的，按钮和文本输入应该工作。

EDIT

在jQuery移动1.1.0的，它是recommended使用data-position="fixed"属性在页眉（或页脚）使用fixed headers和完全除去滚动视图。

我已经尝试过这个自己和它的效果要好得多（针对Android 2.2+和iOS5的 - 黑莓OS不是我测试过，但博客声称，它应该BB7工作）。它比js解决方案运行得更快，更平滑，并且具有更少的图形错误。请务必删除所有额外的js，css和所有对data-scroll的引用，因为它会干扰/破坏所有内容。

对于不受支持的版本和操作系统，您可能仍然需要scrollview js/css等，但根据我的经验，不支持固定标头的地方太慢而无法运行js版本。

来源

2011-09-20 05:27:26 CoatedMoose

我在我的硕士论文中也用可滚动的列表视图来构造，我尝试了你提供的链接，但它们似乎不再工作，你能帮我解决这个问题吗？ jQuery Mobile Library，但似乎scrollview没有记录在任何地方，我试图用框架来解决它，但这不起作用 – NicTesla

尝试查看编辑中的链接使用最新版本的jqm，你应该需要做的是在页眉或页脚中使用'data-position ='fixed''属性来防止它滚动内容。 – CoatedMoose

这就是我所做的和它的工作。但我想知道是否有可能使用帧。BR – NicTesla

尼斯线程这里，想贡献一个小纸条：更重要的是

document.ontouchmove = function(e){ 
    e.preventDefault(); 
}

另外：

如果你喜欢Safari中的灰色地带，滚动时的jQuery移动页面消失，你可以使用，这将使您能够更高效地处理脱机数据库，因为UI（touchmove事件）通常会中断移动设备上的SqlLite数据库功能，从而避免中断。

来源

2012-03-08 18:53:36 Nader

这将禁止水平和垂直滚动。我想这不是一个好习惯。 –

jQuery Mobile的滚动型

回答

相关问题