h5微网页向上滑动屏幕加载跟多数据例子（原生js）

来源：互联网发布：淘宝卖家注册流程图编辑：程序博客网时间：2024/05/24 06:47

<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
    <base href="<%=basePath%>">

    <title>My JSP 'MyJsp.jsp' starting page</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">
   <script src="/Bootstrap/bootstrap-3.3.5/js/tests/vendor/jquery.min.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>
</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>
</body>
</html>

阅读全文

0 0