admin 发表于 2013-8-8 19:32:52

Jquery Mobile 滚屏事件(scrollstart、scrollstop)

    scrollstart：当屏幕滚动开始的时候触发。苹果的设备会在滚屏时冻结DOM的操作，当滚屏结束时按队列执行这些dom操作，我们现在正在研究方法让苹果的设备在滚屏开始前执行dom操作。    $(document).ready(function(){
      $('body').bind('scrollstart', function(event) {
      // Add scroll start code here
      });
    });scrollstop：滚屏结束时触发。    $(document).ready(function(){
      $('body').bind('scrollstop', function(event) {
      // Add scroll stop code here
      });
    }); <!DOCTYPE html>
    <html>
      <head>
            <title>Ajax测试</title>
            <meta charset="gbk">
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.2.0.min.css"/>
            <link rel="stylesheet" href="jquery-mobile/jquery.mobile.structure-1.2.0.min.css"/>
            <script src="jquery-mobile/jquery-1.8.2.min.js"></script>
            <script src="jquery-mobile/jquery.mobile-1.2.0.min.js"></script>
      </head>
      <body>
            <div data-role="page" data-theme="b">
            <div data-role="header"></div>
            <div data-role="content">
                <script>
                  //scrollstart事件
                  function scrollstartFunc(evt) {
                        try
                        {
                            var target = $(evt.target);
                            while (target.attr("id") == undefined) {
                              target = target.parent();
                            }
                            //获取触点目标id属性值
                            var targetId = target.attr("id");
                            alert("targetId: " + targetId);
                        }
                        catch (e) {
                            alert('myscrollfunc：' + e.message);
                        }
                  }
                  function myinit() {
                        //绑定上下滑动事件
                        $("#myul").bind('scrollstart', function () { scrollstartFunc(event); });
                  }
                  window.onload = myinit;
                </script>
                <!-- listview测试 -->
                <ul id="myul" data-role="listview" data-inset="true">
                  <li data-role="list-divider">信息列表</li>
                  <li id="li1" data-role="fieldcontain">信息1</li>
                  <li id="li2" data-role="fieldcontain">信息2</li>
                  <li id="li3" data-role="fieldcontain">信息3</li>
                  <li id="li4" data-role="fieldcontain">信息4</li>
                  <li id="li5" data-role="fieldcontain">信息5</li>
                  <li id="li6" data-role="fieldcontain">信息6</li>
                  <li id="li7" data-role="fieldcontain">信息7</li>
                  <li id="li8" data-role="fieldcontain">信息8</li>
                  <li id="li9" data-role="fieldcontain">信息9</li>
                  <li id="li10" data-role="fieldcontain">信息10</li>
                </ul>
            </div>
      </body>
    </html>

phonegap100 发表于 2013-9-28 04:36:18

有竞争才有进步嘛

你懂得 发表于 2013-10-1 20:29:26

没看完~~~~~~ 先顶，好同志

admin 发表于 2013-10-4 08:14:15

正在学习中 谢谢楼主了 非常支持 开源

你懂得 发表于 2013-10-5 22:28:17

真是 收益 匪浅

小雪 发表于 2013-10-7 13:02:40

过来看看的

admin 发表于 2013-10-9 05:01:03

正在学习中 谢谢楼主了 非常支持 开源
页: [1]
查看完整版本: Jquery Mobile 滚屏事件(scrollstart、scrollstop)