jquery mobile 怎么实现滚动翻页

李永波 发布于 2012/02/20 18:30
阅读 21K+
收藏 8
 jquery mobile 怎么实现滚动翻页 就是不限制页码 向下滚动时自己加载数据
加载中
0
李永波
李永波
谢谢红薯老大
0
k
kazuko
看不懂啊。
0
林宝基
林宝基
 有用。。。顶顶。。
0
k
kazuko

引用来自“林宝基”的答案

 有用。。。顶顶。。

有一个用到clone的。但是不知道怎么调用ajax获取数据加载啊。

这个是下拉后,全部数据都是重复的。

0
zxd1999
zxd1999
jquery mobile调用滚动翻页的这些插件的时候,需要绑定哪个接口,比如pagecreate、pageshow等 我尝试绑定这些接口,然后在这些接口中调用翻页插件,总是只能在首次加载时才有效,就是必须刷新页面才能滚动有效,请教请教
0
zxd1999
zxd1999
补充:我使用的waypoint,只有加在pageshow接口中才有效,但貌似$('#footer').waypoint({ offset: '100%'    }); 有问题,不是在最底部调用的。滚动条滚到中间时调用了。放在其他接口中(比如pagecreate,pageinit)都没效。但直接刷新这个页面显示正常。只有在从别的页面转到调用waypoint页面有问题。js放在body中,因为只有这个页面有这个效果,也只有这个页面引用了waypoint的js文件请指教,
0
zxd1999
zxd1999
代码:直接访问没问题,从别的页面(不应用waypoint 的js页面)调整过来 waypoint无效
<!DOCTYPE html> 
<html> 
    <head> 
    <title>My Page</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css" />
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
   
</head> 
<body> 
<div data-role="page">
    <div id="header" data-role="header">
        <h1>My Title</h1>
    </div><!-- /header -->

    <div data-role="content">    
        <div class="content-primary">    
            <ul data-role="listview" id="list">
            </ul>
        </div>
    </div><!-- /content -->
    
    <div id="footer" data-role="footer">
        <h1>My Footer</h1>
    </div><!-- /header -->
    <script>
        var i = 0;
    
        $(document).bind("pageshow", function(){
            
            //console.log($('#footerel'));
            
            //$('#header').waypoint(function (a, b) {
                
            //    console.log("header", a, b);
            //});
            
            for(; i<20; i++)
            {
    
                $("#list").append($("<li><a href=\"index.html\"><img src=\"#\" /><h3>" + i + "</h3><p>z</p></a></li>"));
            }
            
            $("#list").listview('refresh');
            //alert('st');
            $('#footer').waypoint(function (a, b) {
                //alert('in');
                $("#list").append($("<li><a href=\"index.html\"><img src=\"#\" /><h3>" + i++ + "</h3><p>z</p></a></li>"));
                $("#list").listview('refresh');
                $('#footer').waypoint({ offset: '100%'    });
            }, { offset: '100%'    });
            
        });
    </script>
<script type="text/javascript" src="http://imakewebthings.github.com/jquery-waypoints/waypoints.min.js"></script>
</div><!-- /page -->
</body>
</html>
0
Editor_Djy
Editor_Djy
大部分都是上拉滚动加载到最下面的,有没有 滚动加载,加载到做上面呢。发现iscroll4 可以,但是结合了效果和jqm 专场效果冲突了。
返回顶部
顶部