Question

这里我的问题是我想为数据角色内容中的所有元素提供上滑效果。我可以使用两个不同的页面创建类似的效果。

<div data-role="page" id="firstpage" >
 </div>
 <div data-role="page" id="secondpage" >
    <div data-role="content"   id="projector">
    <ul>
    <li>test</li>
    <li>test</li>
    </ul>
    </div>
    </div>

$("#firstpage").live('pageinit', function (evt) {
     $.mobile.changePage("#secondpage", { transition : 'slideup'});

});

但我怎么能在一个页面上做到这一点？

<div data-role="page" id="firstpage" >
<div data-role="content"   id="projector">
<ul>
<li>test</li>
<li>test</li>
</ul>
</div>
</div>

$("#firstpage").live('pageinit', function (evt) {
      $('#projector').slideup(2000);

});

上述代码未达到预期效果

Answer 1

我希望我能正确理解你的问题。您想将幻灯片效果应用于所有数据角色div，然后您可以像这样写

   <div data-role="page" >
    <div data-role="content"   id="projector">
    <ul>
    <li>test</li>
    <li>test</li>
    </ul>
    </div>
    </div>

    $("#firstpage").live('pageinit', function (evt) {
          $("div[data-role='content']").slideup(2000);

    });

more details check this Attribute Equals Selector [name="value"] post

Answer 2

解决方案

为jQM构建了两种漂亮的方法，可以实现滚动：

$。mobile.silentScroll

示例：

//scroll to Y 100px
$.mobile.silentScroll(100);

这将根据您的页面内容滚动，因此您无需定位页面。更多abot这个方法可以在这里找到：http://jquerymobile.com/demos/1.0rc2/docs/api/methods.html

scrollTop的（值）

示例：

$("div.demo").scrollTop(300);

这个是从参考点开始的，您需要在某个页面元素上执行此操作。有关此内容的更多信息，请访问：http://jquerymobile.com/demos/1.0a1/experiments/api-viewer/docs/scrollTop/index.html

如何在jquery mobile中滑动data-role =“content”

2 个答案:

解决方案

$。mobile.silentScroll

scrollTop的（值）

更多信息