jquery - 如何在 jquery mobile 中向上滑动 data-role="content"

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);

    });

更多详细信息请查看此属性等于选择器 [name="value"] 帖子

Answer 2

解决方案

为 jQM 构建了 2 个漂亮的方法来启用滚动：

$.mobile.silentScroll

例子：

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

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

滚动顶部（值）

例子：

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

这是从参考点出发的，您需要在某些页面元素上执行此操作。更多关于这个可以在这里找到：http: //jquerymobile.com/demos/1.0a1/experiments/api-viewer/docs/scrollTop/index.html

更多信息

如果您想了解有关此主题的更多信息，请查看本文，您还将找到工作示例。