×

做一个H5移动端向上滑动加载更多数据的案例

作者:ceshi2018.06.08来源:Web前端之家浏览:1941评论:0
关键词:H5滑动加载

做一个移动端向上滑动加载更多数据的案例,其实不难,这里没用到插件,大家可以参考下。

图片.png

大家用浏览器看效果的话,调整到手机模式。代码如下:

<!DOCTYPE HTML>
<html>
  <head>
        <meta charset="utf-8">
    
    <title>h5微网页向上滑动屏幕加载更多数据</title>    
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">    
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="This is my page">
 
</head>
<body >
    <table style="font-size:100px">
        <tr>
            <td>测试数据1</td>
        </tr>
        <tr>
            <td>测试数据2</td>
        </tr>
        <tr>
            <td>测试数据3</td>
        </tr>
        <tr>
            <td>测试数据4</td>
        </tr>
        <tr>
            <td>测试数据5</td>
        </tr>
        <tr>
            <td>测试数据6</td>
        </tr>
        <tr>
            <td>测试数据7</td>
        </tr>
        <tr>
            <td>测试数据1</td>
        </tr>
        <tr>
            <td>测试数据2</td>
        </tr>
        <tr>
            <td>测试数据3</td>
        </tr>
        <tr>
            <td>测试数据4</td>
        </tr>
        <tr>
            <td>测试数据5</td>
        </tr>
        <tr>
            <td>测试数据6</td>
        </tr>
        <tr>
            <td>测试数据7</td>
        </tr>
    </table>
    
    <script type="text/javascript" src="/demo/js/jq.js"></script>
    <script>
            $(document).bind("scroll", srcollEvent);
            
            /*touchstart事件:当手指触摸屏幕时候触发,即使已经有一个手指放在屏幕上也会触发。
              touchmove事件:当手指在屏幕上滑动的时候连续地触发。在这个事件发生期间,调用preventDefault()事件可以阻止滚动。
              touchend事件:当手指从屏幕上离开的时候触发。
              touchcancel事件:当系统停止跟踪触摸的时候触发。*/
            $(document).bind("touchstart", startEvent).bind("touchmove", moveEvent).bind("touchcancel", stopEvent).bind("touchend", stopEvent);
            var isScrollStop = true;  //页面是否停止滚动 防止屏幕有滑动但还没到底部就开始加载数据
            var isMoveDown = false;  //防止手指向上滑动屏幕开始加载数据
            var isLoading = false;   //防止异步请求数据未返回到前端的时候重复提交请求
            var isMoved = false;   //手指是否在滑动屏幕 防止出现手指触摸屏幕而没有滑动就加载数据
            var startY = 0;
            var startX = 0;
            function srcollEvent() {
            
                if ($(document).scrollTop() > 0) {
                    isScrollStop = false;
                }
                //如果是左右滑动异步加载数据就用下面的代码
                /*
                if ($(document).scrollLeft() > 0) {
                    isScrollStop = false;
                }*/
            }
            function startEvent() {
                startY = event.targetTouches[0].clientY;
                //如果是左右滑动加载数据就用下面的代码
                //startX = event.targetTouches[0].clientX;
                isScrollStop = true;
                isMoved = false;
                isMoveDown = false;
            }
            function moveEvent() {                     
                var Y = event.targetTouches[0].clientY;
                if (startY > Y) {
                    isMoveDown = true;                
                } else {
                    isMoveDown = false;
                }
                //如果是左右滑动加载数据就用下面的代码
                /*var X = event.targetTouches[0].clientX;
                if (startX > X) {
                    isMoveDown = true;
                } else {
                    isMoveDown = false;
                }*/
                isMoved = true;
               
            }
            function stopEvent() {
            
                if (isScrollStop && isMoved && !isLoading && isMoveDown) {
                    console.log("分页加载");
                    loadData();
                }
            }
            var index = 0;
            function loadData() {   //模拟向后台异步加载数据
                isLoading = true;    //异步加载数据之前先设置为正在等待数据        
                $("table").append("<tr><td>异步加载数据" + index + "</td></tr>");
                $("table").append("<tr><td>异步加载数据" + (index+1) + "</td></tr>");
                $("table").append("<tr><td>异步加载数据" + (index+2) + "</td></tr>");
                $("table").append("<tr><td>异步加载数据" + (index+3) + "</td></tr>");
                $("table").append("<tr><td>异步加载数据" + (index+4) + "</td></tr>");
                $("table").append("<tr><td>异步加载数据" + (index+5) + "</td></tr>");
                //此时数据已返回到前端
                index+=5;
                isLoading = false;
                isMoved = false;
            }
            function sleep() {
                var t1 = new Date();
                var t2 = new Date();
                while ((t2 - t1) < 3000) {
                    t2 = new Date();
                }
            }
        </script>


  </body>
</html>
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
http://www.jiangweishan.com/article/js231812984.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    代码不可以用...

  • asidl

    这个DEMO应该再细点更好。。。...

  • 今天头条

    文章不错非常喜欢...

  • admin

    可以交换链接~...

  • 周松松博客

    确实不会用...

  • 便宜vps

    https://www.yd631.com/(便宜vps)申请交换链接,不知可否?联系邮箱:...

  • 访客

    我是里奥梅西,现在荒的一逼!!!...

  • qlong

    mailAutoComplete插件好用。...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2013-2018 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero